Flash CS3のコンポーネント作成テスト

Flashでコンポーネント周りをやろうやろうとかなり前から思っていたのですが、ようやく踏ん切りがついたので、あれこれ調べつつ試してみました。
調べていて分かったのは、簡単なコンポーネントの作り方がなかなか見つからず、また、CS3ではそれまでのバージョンのコンポーネントとは若干作り方が変わっている、ということ。
一番参考になった「http://www.adobe.com/jp/devnet/flash/articles/67ws_creating_components.html」ですら、なぜか微妙にもっともシンプルなコンポーネントを作ることはしていないですし。
ということで、シンプルなコンポーネントを作って基本的な流れを把握するメモを残しておきます。
ちなみに、コンポーネントを作成するまでのワークフロー、データフローは次のようになります。

まずムービークリップを用意

simpleComp.flaファイルを作成し、その中にsimpleCompMCというムービークリップを作成します。その中にmTextFieldというダイナミックテキストを配置します。（このムービークリップsimpleCompMCをコンポーネントとして使えるようにします）

クラス化の準備

ライブラリタブ内でsimpleCompMCの「プロパティ」を選択して、リンケージの「ActionScriptに書き出し」にチェックを入れ、「クラス」に"simpleComp"と入力します。
次にこのクラスを定義するASファイル"simpleComp.as"を用意します。
simpleComp.flaファイルと同位置に"simpleComp.as"を作成し、中には次のようにコードを書きます。

// simpleComp.as

package{
  // 必要なパッケージの読み込み.
  import flash.display.MovieClip;
  import flash.text.TextField;
  
  
  public class simpleComp extends MovieClip{
    // メンバ変数.
    protected var mText:String	= "Hello, Component.";  // <- Memo #01
    
    // コンストラクタ.
    public function simpleComp(){
      super();
      updateText( "in Constructor" );
    }
    
    // コンポーネントインスペクタで変更可能な変数のsetter.
    [Inspectable(defaultValue="Hello, Component.", name="Text Parameter")]
    public function set text_setter( aText:String ) :void
    {
      // 注：コンポーネントインスペクタで値を変更したときにのみ呼ばれ、
      // デフォルト値のままのときは呼ばれません。
      mText = aText;
      updateText( "in setter" );
    }
    	
    // テキストフィールドを更新.
    private function updateText( optStr:String )
    {
      trace("["+mText+"] "+ optStr +"\n");
      this["mTextField"].text	= mText;  // <- Memo #02
    }
  }
}

// Memo //
/*
#01 インスペクタ[Text Parameter]に対応する値のデフォルト値.
#02 this.mTextField.textと書くと「未定義のパラメータ」と言われエラーになる.
    なので、こんな回避策.
*/

.fla→.swc

simpleCompMCの「コンポーネント定義」を選択して、「クラス」に"simpleComp"と入力。ここで「OK」を押した瞬間にコンポーネントとしてのコンパイルが行われます。このとき、スクリプト等にエラーがあればコンパイルエラーが表示され、エラーが無ければ問題なく使えるようになります。
SWC（コンパイル済みSWFオブジェクト）として書き出します。

.swc + .mxi→.mxp（配布可能なコンポーネント）

最後にコンポーネント化します。
コンポーネントを外部から使えるようにするには.mxpファイルにして、Adobe Extension Managerを使ってFlashにインストールする方法が一般的のようですので、.mxpファイルにコンバートします。
.mxpファイルにするには、.mxiファイルが必要ですので、以下のような内容のファイルをsimpleComp.mxiとして作成します。

<macromedia-extension
  name="Test"
  version="1.0.0"
  type="flashcomponentswc">

<author name="octech" />

<products>
<product name="Flash" version="9" primary="true" />
</products>

<description>
<![CDATA[
ただテキストを表示するだけのコンポーネントサンプルです。
]]>
</description>

<ui-access>
<![CDATA[
(c) octech
]]>
</ui-access>

<license-agreement>
<![CDATA[
このコンポーネントは無保証、無サポートです。
]]>
</license-agreement>

<files>
<file source="simpleComp.swc" destination="$flash/Components/Test" />
</files>

</macromedia-extension>

「ファイル」メニュー→「拡張機能を作成」で.mxiファイルを開き、書き出す.mxpファイル名を指定して書き出します。
これで、配布可能なmxpファイルが完成しました。

コンポーネント使用テスト

最後に読み込んでテストしてみます。
「ファイル」メニュー→「拡張機能をインストール」で、先ほど作成した.mxpファイルを指定すると、インストールが開始されます。インストールが完了したら、Flashを再起動（もしくはコンポーネントパネルのリロード）を行います。
適当な.flaファイルを開き、コンポーネントウィンドウを開くとその中に作成したコンポーネントが見つかります。

これをステージのドロップすると、作成したコンポーネントが使用可能になっていることが分かります。
また、コンポーネントインスペクタウィンドウを表示させ、パラメータがを変更すると、すぐにsetterが呼ばれるのが分かります。

参考URL

• http://www.adobe.com/jp/devnet/flash/articles/67ws_creating_components.html
• http://labs.anthill.jp/2007/01/post_3.html
• http://labs.anthill.jp/2007/04/2_1.html

Flex 3 SDKを使い、無料の環境でswfを生成してみる

Flexの調査をしたとき（Flexで幸せになれるのか - octech）に調べたFlex SDKに含まれているmxmlcというMXMLコンパイラは、.mxmlをビルドできるだけではなく、.asファイルだけでもSWFファイルをコンパイルできる。つまり、MXMLファイルを使わないことにより、純粋にActionScriptだけでSWFファイルを作れるのです。
これの何が便利かって、機能別に作ったクラスのテストが可能になり、それを使いまわすことも出来るようになるのです。（基本的に、複数言語をまたぐと、あらゆるデバッグや実装が行いにくくなるので、一つのプロジェクトに関わる言語数は少ないに越したことはない、と思っています。）

Flex 3 SDKインストール

インストールといっても、ダウンロードして、それを適当な場所に置くだけです。
Flex 3 SDKがリリースされたので、それをダウンロードします。
-Download Creative Cloud apps
のページから下部の「I have read the Adobe Flex 3.0 SDK License, and by downloading the software listed below I agree to the terms of the agreement. 」にチェックを入れると、その下にある「Download the Flex 3.0 for all Platforms (ZIP, 38 MB)」が有効になるので、そこをクリックしてダウンロードします。
（2008-11-16更新）今日確認したらFlexBuilderのページからはFlexSDKのダウンロードが出来なくなっていたので、下記のリンク先からダウンロードしてください。

• http://opensource.adobe.com/wiki/display/flexsdk/Downloads

ダウンロードされたflex_sdk_3.zipを展開し、出来たディレクトリを適当な場所に配置して、その中にあるbinディレクトリにパスを通せば完了。
私の場合、バージョンが上がってもいいように、とか考えて、C:\FlexSDKという位置に配置してパスをC:\FlexSDK\binにパスを通しました。
インストールが完了しているかどうかのテストに、次のようなコマンドを入力してみます。

> mxmlc -version

これで適当なバージョン番号が表示されていれば問題ありません。

サンプルActionScriptファイルをビルド#1

このページを参考に（というか、そのままコピー）して、以下のようなコードを書き、FirstCircle.asとして保存します。

/* FirstCircle.as */
package {
  import flash.display.Sprite;
  import flash.display.Graphics;
  
  public class FirstCircle extends Sprite
  {
    public function FirstCircle()
    {
      var p:Sprite = new Sprite();
      p.graphics.beginFill(0xFF0000);
      p.graphics.drawCircle(80,80,60);
      p.graphics.endFill();
      addChild(p);
    }
  }
}

以下のように、mxmlcにファイル名を渡すだけでSWFをビルドしてくれます。

> mxmlc FirstCicle.as

便利ですねー。

サンプルActionScriptファイルをビルド#2

上記のままでは、SWFファイルのサイズや背景色が設定されていません。
その部分は、設定XMLファイルを作成し、同じディレクトリに配置しておくだけで参照してくれます。
こちらもまたこのページを参考に（というか、そのままコピー）して、FirstCircle-config.xmlという名前で保存しておきます。
また、日本語でコメントを入れるときにはファイルの円コーディングをUTF-8にしておく必要があります。

<flex-config>
  <output>FirstCircle.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>
</flex-config>

ビルドすると次のようになります。

> dir /B
FirstCircle-config.xml
FirstCircle.as

> mxmlc FirstCircle.as
Loading configuration file C:\FlexSDK\frameworks\flex-config.xml
Loading configuration file C:\prj\testFlex\FirstCircle-config.xml

> dir /B
FirstCircle-config.xml
FirstCircle.as
FirstCircle.swf

これでビルドの際に基本情報（ビルドオプション）を変更する方法が分かりました。
また、ビルドオプションについては、次のページが詳しいです。

• http://d.hatena.ne.jp/nemu90kWw/20060716/p1

参考URL

• http://www.adobe.com/support/documentation/jp/flex/3/releasenotes_flex3_sdk.html
• http://codezine.jp/a/article/aid/627.aspx
• http://livedocs.adobe.com/flex/3/html/index.html