アプリケーションでビューステートを変更すると、コンポーネントはあるステートから次のステートにジャンプするように見えます。トランジションを使用すると、変更がユーザーにとって視覚的により円滑になります。トランジションとは、ビューステートの変更時に再生される、グループ化されたエフェクトのことです。例えば、Resize エフェクトを使用して元のビューステートのコンポーネントを徐々に最小化し、Fade エフェクトを使用して新しいビューステートのコンポーネントを徐々に表示するトランジションを定義できます。

1. ベースステートに加えて少なくとも 1 つのビューステートを必ず作成してください。
2. MXML エディタのソースモードで、次の例に示すように、<mx:transitions> タグ、<mx:Transition> 子タグの順に記述して、Transition オブジェクトを定義します。

   <mx:transitions>
       <mx:Transition id="myTransition">
       </mx:Transition>
   </mx:transitions>
   
   

   複数のトランジションを定義するには、追加の <mx:Transition> 子タグを <mx:transitions> タグに挿入します。

3. <mx:Transition> タグで、次の例（太字）に示すように、タグの fromState プロパティと toState プロパティを設定して、トランジションをトリガするビューステートの変更を定義します。

   <mx:transitions>
       <mx:Transition id="myTransition" fromState="*" toState="checkout">
       </mx:Transition>
   </mx:transitions>
   
   

   この例では、アプリケーションが任意のビューステート（fromState="*"）から checkout と呼ばれるビューステート（toState="checkout"）に変わるときに、トランジションを実行するように指定しています。"*" という値は、任意のビューステートを指定するワイルドカード文字です。

4. <mx:Transition> タグで、次の例（太字）に示すように、<mx:Parallel> 子タグまたは <mx:Sequence> 子タグを記述して、エフェクトをパラレルまたはシーケンシャルに再生するかを指定します。

   <mx:Transition id="myTransition" fromState="*" toState="checkout">
       <mx:Parallel>
       </mx:Parallel>
   </mx:Transition>
   
   

   エフェクトをパラレルに再生する場合は、<mx:Parallel> タグを使用します。エフェクトをシーケンシャルに再生する場合は、<mx:Sequence> タグを使用します。

5. <mx:Parallel> タグまたは <mx:Sequence> タグで、次の例に示すように、target（ターゲットコンポーネントが 1 つの場合）または targets（ターゲットコンポーネントが複数の場合）と呼ばれるプロパティをターゲットコンポーネントの ID に設定して、トランジションのターゲットコンポーネントを指定します。

   <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}">
   </mx:Parallel>
   
   

   この例では、3 つの VBox コンテナがターゲットとなっています。targets プロパティには、ID の配列を指定します。

6. <mx:Parallel> タグまたは <mx:Sequence> タグで、次の例（太字）に示すように、エフェクトの子タグを記述して、ビューステートの変更時に再生するエフェクトを指定します。

   <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}">
       <mx:Move duration="400"/>
       <mx:Resize duration="400"/>
   </mx:Parallel>
   
   

   指定可能なエフェクトの一覧については、『Adobe Flex 3 開発ガイド』の使用可能なエフェクトを参照してください。

   エフェクトのプロパティを設定するには、『Adobe Flex 3 開発ガイド』のエフェクトの操作を参照してください。

7. トランジションをテストするには、MXML エディタツールバーの「実行」ボタンをクリックし、アプリケーションの起動後にステートを切り替えます。