Flash のシンボルを Flex コンポーネントに

matsumura

Oct 15, 2009

2009
ar
class
CS4
debug
Flash
flash
Flex
html
kayac
local
MovieClip
png
sion
swc
UI
xml

海賊王をめざす男マツです。こんにちは。

Flex には Flash との連携をサポートするクラスがあります。

・UIMovieClip
・ContainerMovieClip

Flash で基本となる部品を作り、Adobe が無料で提供する機能拡張を使って Flex のコンポーネントに変換して使用します。

Flex Component Kit for Flash CS3 Professional
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

使用例

1. Flex Component Kit for Flash CS3 Professional をインストールします。

2. fla ファイルの動的アセット用のシンボルを作成します。

Test.fla に Circle, Square を用意します。
シンボルは基本的にステージを基準として、左上を中心として整列させて作成します。

3. シンボルを Flex コンポーネントに変換

Flash CS3

Flash CS4

ライブラリにあるシンボルを選択した状態で、
[コマンド]_[Convert Symbol to Flex Component]を実行すると
FlexComponentBase という名前の新しいシンボルがライブラリに追加されます。

シンボルの基本クラスは、mx.flash.UIMovieClip に変換されます。

Command made the following changes to the FLA:
Turned on Permit Debugging
Turned on Export SWC
Imported FlexComponentBase component to library
Symbol "Square" can be used as a Flex component.
Symbol "Circle" can be used as a Flex component.
Select File > Publish to create the SWC file for use in Flex.

[コマンド]_[Convert Symbol to Flex Container]を実行すると
FlexComponentBase の他にさらに FlexContentHolder という名前の新しいシンボルがライブラリに追加されます。
シンボルの基本クラスは、mx.flash.ContainerMovieClip に変換されます。

Symbol "Square" can be used as a Flex component.
Symbol "Circle" can be used as a Flex component.
Add the 'FlexContentHolder' symbol to define the Flex content area.

ContainerMovieClip のサブクラスは、Flex コンテナとして使用したり、子を保持したりできます。
また、このサブクラスを使用すると、Flex コンポーネントと同じ方法で、イベントに対する応答、ビューステートとトランジションの定義およびエフェクトの操作を行うことができます。

4. FLA ファイルを SWC ファイルとしてパブリッシュします。

Test.swc ができます。これを Flex ビルドパス（ライブラリパス）に通します。

5. Flex アプリケーションで、他のクラスの場合と同じようにシンボルのクラス名を参照します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:Square/>
	<local:Circle/>
</mx:Application>