閃光部でインターンとして働いている堀口です。初めまして。

今回はデザインやアニメーション制作はFlashIDE使っているけど、
「コーディングはもっぱらFlashDevelopだぜ!」
とか
「FlexBuilder使っています、mxmlは書かないけど。』

みたいな人にFlashIDEのSWC書き出しという機能をおすすめしたいとおもいます。

 

すごい簡単に説明するとSWCファイルとはライブラリなのですが、シンボル等のデザイン要素も一緒にパッケージにできるのですねSWCというのは。
コレを上手に使えると様々ないい事が起こります。


いい事の例

  • FlashIDEで配置したインスタンス名等の補完が効く。(FlashDevelopとFlexBuilderで)
  • もちろんクラス名だって補完が効く。
  • swcファイルさえあればFlashDevelopやFlexBuilderでswc内のデザインを利用してプログラミングでる。

つまり、プログラミングするのにわざわざ重いFlashも同時に立ち上げなくていいのですよ。
説明するより体感した方が理解が早いと思うので早速SWCファイルを作ってみましょう。

なおFlashDevelopを使用している方は、   
FlexSDKへのパスが通っていて、FlashDevelopからswfファイルをパブリッシュできるようになっている事が条件です。

まず、Flashを起動して適当なインスタンスを用意します
今回はコンポーネントを適当に配置して以下のようにしました。

pori_swc_01.pngのサムネール画像のサムネール画像

配置してあるコンポーネントには適当にインスタンス名をつけておきます。
 

今回は
左のテキストエリアがleftText
右がrightText
下のボタンがbtnRun
にしています。

出来上がったらこれらの要素をすべて選択して

シンボルに変換>actionscriptに書き出しにチェック>クラス名

で適当なクラス名をつけます。今回はTestWindowにしました。

pori_swc_02.pngのサムネール画像


そしたら早速swcファイルを作りましょう。

パブリッシュ設定より
SWCの書き出しにチェックを入れてパブリッシュをします。

pori_swc_03.pngのサムネール画像


そうするとswfファイルを書き出した先と同じ階層に
ファイル名.swcファイルがあるかと思いますがこちらを利用します。

もう、デザインに変更が無い限りFlashを起動する事はありません。


それでは、swcファイルに入っているデザインデータを使ってロジックを組んで行きましょう。


FlashDevelopの場合
AS3のプロジェクトを立てて下さい。
*FlashIDEプロジェクトはコンパイルにFlashを利用するので今回はダメです。

プロジェクトフォルダにswcファイル持ってきます。
それで、swcファイルを右クリック>Add To Libraryにチェック

pori_swc_04.pngのサムネール画像


FlexBuilderの場合
プロジェクト内のフォルダにswcファイルを配置したら
プロジェクトのプロパティよりライブラリパスを配置したフォルダに通します。


コレで使用する準備は完了しました。

後は先ほどリンケージでTestWindowとしたものをnewして使うだけなのですが
なんと、コード補完が効くようになっています。

 

pori_swc_05.pngのサムネール画像

便利ですね。


しかも、TestWindow内に配置してあるインスタンス名までばっちり補完が効きます。

pori_swc_06.pngのサムネール画像

死ぬほど便利!

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class Main extends Sprite {

        private var _view:TestWindow = new TestWindow();

        public function Main():void {
            addChild(_view);
            _view.x = 20;
            _view.y = 20;
            _view.btnRun.addEventListener(MouseEvent.CLICK, btnClickEvent);
        }

        private function btnClickEvent(e:MouseEvent):void {
            _view.rightText.text = _view.leftText.text;
        }   
    }   
}




と、こんな感じでやったらF5かctr+Enterでパブリッシュ。

以下のようなプログラムが出来ました。

pori_swc_demo.swf


簡単ですね。デザインとロジックの分離も出来ていい感じです。
FlexBuilderを使っている方はswcファイルにやはり同様にパスを通せば同様の事が出来ます。

flexコンポーネントとして使いたい場合は弊社 松村のエントリーFlash のシンボルを Flex コンポーネントにを参考にしてみて下さい。


Flashで普通にやればいいと思うかもしれませんが、
ロジックの変更の度にFlashを起動してパブリッシュてのはなかなか面倒です。

とくに私みたいにMacでわざわざVMでWIn起動してFlashDevelop使っている用な人間にはうれしすぎますね。


究極にはswcファイルまではデザイナーさんが作って、その後はプログラマーにバトンタッチみたいな事も可能かもしれないですね。

さてさて、実際にこのような手法で制作したものが、マイミクイズです。
mixi内のおすすめアプリにも掲載されているので(11月5日現在)ぜひぜひ遊んでみて下さい。

マイミクイズ
http://mixi.jp/run_appli.pl?id=9279

HTML5飯