Flex Component Kit for Flash CS3 を使った Flex コンポーネントの開発

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
    <myComps:BlueBox />
  <mx:Button />
</mx:Application>
 

このとき BlueBox コンポーネントがモーショントゥイーンなどで大きさの変わるアニメーションを表示すると、アニメーションにあわせて Flex アプリケーションのレイアウトも変化します。今回の例では、BlueBox の大きさに合わせてボタンの位置が上下に移動することになります。

大きさの自動認識に関してはいくつかの注意事項があります。例えば、シェイプトゥイーンを使うとキーフレームのタイミングだけでしか大きさが認識されません。また、マスクされたコンテンツの大きさは、マスクされた結果として表示されている領域ではなく、コンテンツ全体の大きさになります。

その他にもレイアウトを固定したい場合など、自動認識されるコンテンツの大きさでは都合の悪い場合には、代理のオブジェクトを指定することが可能です。コンテンツ制作時、ステージに "boundingBox" という名前のオブジェクトを作成すると、そのオブジェクトの位置と大きさがコンテンツ自体の位置と大きさとして使用されるようになります。

boundingBox の visible 属性を false にしておけば boundingBox オブジェクトが表示されることはありません。"Make Flex Component" でも自動的にこの属性設定が行われます。

少し分かりにくいですが、下の図のステージ領域の青い線だけの長方形が boundingBox という名前のオブジェクトになっています。これで、実際に画面上に表示されるのが boundingBox 内の青い四角いオブジェクトでも Flex からは boundingBox の位置と大きさが認識されるようになります。

なお、"boundingBox" という名前は UIMovieClip の boundingBoxName 属性に設定されています。この属性値を変えることで、別の名前のオブジェクトを代理オブジェクトとして指定することも可能です。

ラベルとステート

Flex にはアプリケーションのビューの状態を "ステート" として定義する機能があります。UIMovieClip はラベル名の付いたフレームを Flex のステートと対応付けることができます。

Flex アプリケーション内で Flash コンポーネントの currentState 属性を指定すると （指定された名前のラベルが存在すれば） 同じラベル名のフレームに移動します。gotoAndStop(currentState) のように使えるわけです。

下の図ではタイムラインに "ellipse", "rectangle", "triangle" の３つのラベルが定義されています。

これらのラベルをステートとして Flex のコードから指定しているサンプルです。ボタンを押すと Shapes コンポーネントが該当するラベルのフレームに移動します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComps="*" width="300" height="250">
  <mx:HBox>
    <mx:Button label="Ellipse" click="s.currentState='ellipse'" />
    <mx:Button label="Rectangle" click="s.currentState='rectangle'" />
    <mx:Button label="Triangle" click="s.currentState='triangle'" />
  </mx:HBox>
  <myComps:Shapes id="s" />
</mx:Application>
 

トランジション

トランジションはあるステートから別のステートへの移行時に視覚的な表現を加える Flex の機能です。Flash コンテンツを使った場合、トランジションをタイムライン上のアニメーションとして作成することができます。

トランジションの開始フレームと終了フレームはラベル名を使って指定します。例えば、state1 という名前のステートから state2 というステートに移行する場合、UIMovieClip はアニメーションの開始フレームとして "state1-state2:start" という名前のフレームを探します。同様に終了フレームとして "state1-state2:end" というフレームを探します。

下の図では "state1" がフレーム 1 のラベル名、トランジション開始になる "state1-state2:start" がフレーム 7 のラベル名になっています。隠れていますが、トランジション終了のラベルになる "state1-state2:end" がフレーム 22 にありますので、コンポーネントが state1 のステートのときに state2 にステートを変更するとフレーム 7 からフレーム 22 が再生されてから "state2" のフレームが表示されます。

反対に、ステートが state2 から state1 に変更された場合にはタイムラインが 22 フレームから 7 フレームに逆に再生されます。ただし、"state2-state1:start" と "state2-state1:end" が明示的に定義されていればそちらが優先されます。

トランジションのラベルには "*" も使用することができます。例えば "state1-*:start" のようにして、state1 から全てのステートへの移行開始という意味に使うことができます。同様に "*-state1:start" はどんなステートからでも state1 に移行開始する場合という意味になります。"*" で指定したラベルは逆再生の指定にも有効です。

トランジションのラベルに使用できるパターンは以下の通りです。最後の *-* 以外は逆再生にも使用されます。

• from-to
• from-*
• *-to
• *-*

ツールチップ

UIMovieClip には toolTip という属性があります。この属性に値を設定しておくと、コンテンツ上にマウスが移動したときに Flex 標準のツールチップが表示されます。

<myComps:BlueBox toolTip="MXML Tooltip"/>