AS3S.ORG

ACTIONSCRIPT 3.0 SOURCES

Embedタグを用いたFlash CS3とFlex Builderの連携

これまでは、あくまでFlex BuilderをFlash CS3のエディタとして利用する(デバッグ&ビルドはFlash CS3で行う)方法を紹介してきましたが、できればFlex Builderでデバッグ&ビルドまで行える、もしくはFlash CS3でもFlex Builderでも同じものをビルドできるのが理想的と言えます。

いくつかの方法を試してみた中で発見した、今のところ最も理想に近い方法を紹介します。
ポイントはFlex BuilderでSWFを読み込むためのEmbedタグを利用することです。


1. Flaファイルのシンボルを作成する

まず、Flaファイル(EmbedSample.fla)を作成し、ドキュメントクラスを「EmbedSample」とします。
読み込みたいシンボルを作成して、「ActionScriptに書き出し」をチェックし、クラス名を「Test」とします。
FlaファイルからSWF(EmbedSample.swf)を書き出します。

2. Flex BuilderでActionScriptプロジェクトを作成する

Flex BuilderでActionScriptプロジェクトを作成し、デフォルトアプリケーション(最初に実行されるクラス)のクラス名をEmbedSampleとし、サンプルとしてTestクラスのインスタンスを表示するプログラムを記述します。

package {
    import flash.display.Sprite;
   
    public class EmbedSample extends Sprite {
        private var test:Test;
       
        public function EmbedSample() {          
            test = new Test();
            addChild(test);

        }
    }
}

また、プロジェクトプロパティのコンパイラオプションの中の「Additional compiler arguments」にFlaファイルのパブリッシュ設定の値を指定します。
例) -default-size 400 300 -default-frame-rate=24 -default-background-color=0xffffff

3. シンボルを読み込む

Flex BuilderでFlaファイル内のシンボルを読み込みたいクラスを作成しますが、ここでクラス名を1.と同じ「Test」にします。
シンボルを読み込むには、class指定の前に以下のようにEmbedタグを記述します。

package {
    import flash.display.MovieClip;
  
    [Embed(source="EmbedSample.swf", symbol="Test")]
    public class Test extends MovieClip {
      
        public function Test() {
        }
       
    }
}

以上で、ひとまずFlash CS3 でもFlex Builderでも同じものがビルドできるようになります。

4. 子要素を含むシンボルを読み込む

実は3. ではまだ問題が残ります。

み込みたいシンボルにFlaファイル側で名前をつけた子要素が存在するとFlex
Builderでビルド時にエラーになってしまいます。どうやらこのEmbedを用いた方法では、名前をつけた子要素はFlex
Builder側で作成したクラスのインスタンスが作られた後、動的に追加されているようです。

そこで、例えば、シンボルTest内にダイナミックテキストを配置し、tCaptionという名前を付けた場合
(当然ながらFlaファイルに修正を加えたらSWFに書き出す必要があります)、エラーが起きないようにするには、

public var tCaption:TextField;

といったpublicな変数として宣言しておく方法が考えられますが、この方法では逆にFlash CS3でビルドしたい場合に宣言のコンフリクトでエラーになってしまいます。

この問題は、dynamicキーワードを用いてインスタンスに動的に子要素が追加されるのを許可することで解決できます。

だし、このままではFlaファイル側で名前をつけた子要素に対して補完機能などが使えないので、Flex
Builder側では別の名前で変数宣言しておき、コンストラクタでFlaファイル側で名前をつけた子要素を代入して、以降はこれらの変数を使うようにす
るとよいでしょう。

package {
    import flash.display.MovieClip;
    import flash.text.TextField;
   
    [Embed(source="EmbedSample.swf", symbol="Test")]
    public dynamic class Test extends MovieClip {
        //created by embeded swf
        private var caption:TextField;

       
        public function Test() {
            caption = this.tCaption;
        }
      
    }
}

5. フレームアクションを追加する

しかしこれでもまだ問題が残ります。Embedを用いた方法ではFlaファイル側でフレームに記述されたアクションは無視されてしまうようです。
なるべくFlaファイル側にはアクションを記述しないことが望ましいのですが、どうしてもフレームアクションが必要な場合はAS3のUndocumentメソッドであるaddFrameScriptを利用します。

例えば、以下のように記述すると5フレーム目(addFrameScriptでは先頭フレームが0となりますので注意が必要です)で
stopします。

package {
    import flash.display.MovieClip;
    import flash.text.TextField;
  
    [Embed(source="EmbedSample.swf", symbol="Test")]
    public dynamic class Test extends MovieClip {
        //created by embeded swf
        private var caption:TextField;
      
        public function Test() {
            caption = this.tCaption;
            addFrameScript(4, stop);
        }
     
    }
}

より複雑なアクションを記述するにはメソッドを指定します。

package {
    import flash.display.MovieClip;
    import flash.text.TextField;
   
    [Embed(source="EmbedSample.swf", symbol="Test")]
    public dynamic class Test extends MovieClip {
        //created by embeded swf
        private var caption:TextField;
       
        public function Test() {
            caption = this.tCaption;
            addFrameScript(4, action5);
        }
       
        public function action5():void {
            stop();
            trace(this.caption.text);
        }

    }
}

以上の方法で、
・Flaファイルのステージには何も配置しない
・フレームアクションはaddFrameScriptで記述する

という作法を守ればFlash CS3とFlex Builderで同じものをデバッグ&ビルドすることができ、Flaファイルでビジュアルデザインを行い、プログラミングはデバッグも含めてFlex Builderで行うという環境を構築することができます。

なお、それぞれの独自コンポーネントなどについてはさらに少し工夫が必要だと思われますが、それはまた別の機会があればご紹介します。

Written by admin

January 7th, 2008 at 1:25 am

Posted in Environment

One Response to 'Embedタグを用いたFlash CS3とFlex Builderの連携'

Subscribe to comments with RSS or TrackBack to 'Embedタグを用いたFlash CS3とFlex Builderの連携'.

  1. [...] で http://as3s.org/2008/01/embed-flash-cs3-flex-builder/ に答えっぽいのがあるとのことで教えてもらったんですが [...]

Leave a Reply