Flex 3 SDK環境でSWCを作り、使ってみる

Flex Flash

Flashにおいてコンポーネントライブラリは2種類あり、それぞれSWC、RSL(Runtime Shared Library)と呼ばれている。一般的なプログラム用語で言い分けると、SWCが静的リンクライブラリで、RSLが動的リンクライブラリです。今回は静的リンクの方の使い方を調べたのでまとめておきます。

復習

まず、関連ページへのリンクを張っておきます。以下のエントリ内容について一通りわかった上で、作業を進めます。

テスト環境

以下のようにディレクトリ構造を作り、ファイルを配置します。

testSWC
├─swc
│    octech.swc           .. 作成、使用するコンポーネントファイル
│
├─test
│    UseCircle.as         .. テストSWF用スクリプト
│    UseCircle-config.xml .. テストSWF用アプリ定義ファイル
│
└─work
    └─octech             .. コンポーネントスクリプト格納ディレクトリ
          BlueCircle.as
          RedCircle.as

octech.BlueCircle, octech.RedCircleというクラスをoctech.swcというコンポーネントファイルにまとめ、それをUseCircleから使う、という流れです。

compc:.as→.swc

Flashにおけるコンポーネントのコンパイルには、mxmlcやamxmlcの代わりに、compc（Component Compiler：コンポーネントライブラリ）でコンパイルします。

/* RedCircle.as */
package octech
{
  import flash.display.Sprite;
  import flash.display.Graphics;

  public class RedCircle extends Sprite
  {
    public function RedCircle()
    {
      this.graphics.beginFill(0xFF0000);    // 塗りつぶし色.
      this.graphics.drawCircle( 0, 0, 50 ); // (x, y, radius)
      this.graphics.endFill();
    }
  }
}

BlueCircle.asも同様に作り、塗りつぶし色だけ変えておきます。
これらをworkディレクトリ直下で次のようにコンパイルします。

compc -source-path . -output ../swc/octech.swc -include-classes octech.RedCircle octech.BlueCircle

これでswc/octech.swcが完成しました。この中には、octech.RedCircleというクラスと、octech.BlueCircleというクラスが入っているはずですので、使用して確かめてみます。

使用テスト

コンポーネントの使用テストのために、testディレクトリ以下に、次のようなソースを配置します。

/* UseCircle.as */
package
{
  import flash.display.Sprite;
  import octech.*; // ライブラリを使います.
	
  public class UseCircle extends Sprite
  {
    public function UseCircle()
    {
      var redCircle:octech.RedCircle = new octech.RedCircle();
      addChild( redCircle );
      redCircle.x  = 100;
      redCircle.y  = 100;
 
      var blueCircle:octech.BlueCircle = new octech.BlueCircle();
      addChild( blueCircle );
      blueCircle.x = 300;
      blueCircle.y = 100;
    }
  }
}

UseCircle-config.xmlを次のように定義します。compiler.library-pathを定義しているところがポイントです。

<flex-config>
  <output>UseCircle.swf</output>
  <default-size>
    <width>400</width>
    <height>200</height>
  </default-size>
  <default-frame-rate>24</default-frame-rate>
  <default-background-color>0xFFFFFF</default-background-color>
  <use-network>false</use-network>
  <compiler>
    <library-path>
      <path-element>../swc</path-element>
    </library-path>
  </compiler>
</flex-config>

できたswfを実行すると次のようになり、問題なく使えていることがわかります。

以上。

RSLについて

実はいろいろ調べたのですが、いまいち使い方がわからず、実行時にエラーになる（おそらくパスか何かの設定がまずい）ので、これについては今後の課題としておきます。
大規模なFlashサイトになればパフォーマンスを上げるために必要になるのは目に見えているので、必須ですね。