Flex Component Kit for Flash CS3 が公開されました。 (Flex Component Kit for Flash CS3@Labs) この kit を使うと Flash CS3 で作成した AS3 のムービークリップをそのまま Flex のコンポーネントとして使用できるようになります。まだベータ版ですのでお試し用の環境でのみご使用ください (日本ではまだ CS3 が発売されていませんが念のため)。
Flex Component Kit for Flash CS3 とドキュメントは Adobe Labs からダウンロードできます。
前提となるソフトウェアは以下のとおりです。
また、Flash CS3 と使用する際に必要になる Flex 2.0.1 用のパッチも提供されています。詳細はテックノートをご参照ください。(Flex 2.0.1 patch for Flash CS3 Professional compatibility)
以下がパッチへのリンクです。
ダウンロードして解凍すると以下の3つのファイルが含まれています。
- swfkit.jar
- mxmlc.jar
- fdb.jar
これらのファイルを \plugins\com.adobe.flexbuilder.flex_2.0.155577\lib ディレクトリにコピーして使用します。念のためもとのファイルはバックアップしておきましょう。SDK を使用している場合は lib の下にコピーします。
詳細は下にありますが、このキットの大まかな使用手順は、
- Flash CS3 で AS3 のムービークリップを作成
- Commands メニューから Make Flex Component を実行
- 作成した fla を SWC として書き出す (パブリッシュすると生成される)
- Flex Builder 2 で対象となるプロジェクトのライブラリに SWC を追加する
です。Flex 用に書き出すムービークリップが予め提供されている標準のイベントやメソッド以外を使用しないばあいなら、必要な作業は以上のステップだけです。
Flash CS3 ではムービークリップに対して親クラスを指定するパネルが用意されています。手順の2の後にライブラリパネルからムービークリップの likage パネルを開くと base class つまり親クラスとして UIMovieClip クラスが指定されていると思います。この UIMovieClip クラスが Flex で Flash コンポーネントを使用するために必要な機能を実装しています。
Flash 側の設定
Flash で Flex 用のコンポーネントを作成するにはいくつかの設定が必要です。この作業は "Make Flex Component" コマンドから自動で行うことができますが、手動で行う場合は以下の手順になります。
まず、Publish Settings のダイアログ内の以下の設定を確認します。
- "Version" を "Flash Player 9" に設定(デフォルト値です)
- "ActionScript version" を "ActionScript 3.0" に設定(これもデフォルト地です)
- (後でデバッグが必要であれば) "Permit Debugging" を true に設定
- "Export SWC" オプションをチェック
次にフレームレートを 24fps に設定します。これは Flex の標準フレームレートです。Flex 側のフレームレートを変えると Effect 等に影響が出るためフレームレートは Flex 側にあわせるようにします。
最後に UIMovieClip コンポーネントをコンポーネントパネルからライブラリにドラッグしたら、SWC に書き出すムービークリップの Linkage Properties パネルで以下の設定をします。(注: "Make Flex Component" コマンドを使用した場合以下の設定はライブラリ内で選択されたムービークリップに対してのみ行われます)
- "Export for ActionScript" を選択
- Select "Export in First Frame" も選択
- "Base Class" に "mx.flash.UIMovieClip" を設定
Flex Builder 側の設定
上記の設定後 Flash 側でパブリッシュすると SWC ファイルが作成されますので、次は Flex Builder で Flash コンポーネントの読み込みを行います。
- FlexBuilder 側では Project Properties ダイアログを開き "Flex Build Path" を選択し "Library Path" タブを押す
- "Add SWC..." ボタンを押してダイアログを開く
- "Browse..." ボタンを押してステップ1で作成した SWC ファイルを指定する
- Project Properties ダイアログを閉じる
- 必要な xmlns 属性を追加する。例えば、
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*">
- コンポーネントを使用する。上の例に従えば "<myComps:" と入力することでコードヒントが表示される
開発に関する注意点等はまた次回。
コメントする