ビューステートでは、通常はユーザーの操作に対する応答として、アプリケーションの内容や外観を変更できます。ビューステートを使用するには、アプリケーションの基本ビューステートと、1 つまたは複数の追加ビューステートを定義します。

ビューステートを変更すると、アプリケーションに対する視覚的な変更がすべて同時に実行されます。つまり、アプリケーションのサイズの変更、位置の移動、または外観の変更を行うと、アプリケーションがある状態から次の状態に瞬時に変化します。

これに対して、ビューステートを視覚的にスムーズに変化させるため、変更を一定の時間をかけて行う必要がある場合があります。「トランジション」とは、ビューステートを変更するときに再生される、グループ化されたエフェクトのことです。

例えば、アプリケーションでフォームが定義されているとします。このフォームでは、基本ビューステートでは数個のフィールドが表示され、展開されたビューステートではさらに多くのフィールドが表示されます。ここで、基本ビューステートから展開されたビューステートへの変化をスムーズに行うには、Resize エフェクトを使用してフォームを展開し、次に Fade エフェクトを使用して新しいフォームエレメントをゆっくりと画面に表示する Flex トランジションを定義します。

ユーザーがフォームを基本ビューステートに戻すことを選択すると、このトランジションにより、展開状態のフィールドが Fade エフェクトを使用して非表示にされ、フォームのサイズが Resize エフェクトを使用してゆっくりと元に戻されます。

トランジションを使用すると、フォームにも、フォームに追加されるフィールドにも、フォームから削除されるフィールドにも、エフェクトを適用できます。エフェクトは複数適用することもできます。複数のフィールドに同じエフェクトを適用することも、異なるエフェクトを適用することもできます。基本状態から展開状態に移行するときに再生されるエフェクトのセットと、展開状態から基本状態に移行するときに再生されるエフェクトのセットを、別々に定義することもできます。

例：ログインフォームでのトランジションの使用

ビューステートの使用には、基本状態と登録状態の 2 つの状態を持つログインフォームの例があります。次の例では、このフォームにトランシジョンを追加して、ビューステートからビューステートへのトランジションをアニメーション化するイージング関数を持つ Blur エフェクトと Resize エフェクトを使用しています。

<?xml version="1.0" ?>
<!-- transitions\LoginFormTransition.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    verticalAlign="middle">
    
    <mx:Script>
        <![CDATA[
            // Import easing classes if you use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>
    </mx:Script>

    <!-- Define the transition to animate the change of view state. -->
    <mx:transitions>
       <mx:Transition>
            <mx:Parallel 
              targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <mx:Sequence target="{confirm}">
                   <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
                   <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
        
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
                <mx:FormItem id="confirm" label="Confirm:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>            
            <mx:SetProperty target="{loginPanel}"
                name="title" value="Register"/>            
            <mx:SetProperty target="{loginButton}"
               name="label" value="Register"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:LinkButton label="Return to Login" 
                    click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel 
        title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off">

    <mx:Form id="loginForm">
        <mx:FormItem label="Username:">
            <mx:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>
    
    <mx:ControlBar>
        <mx:LinkButton id="registerLink"
            label="Need to Register?" 
            click="currentState='Register'"/>
        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>
    </mx:ControlBar>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

トランジションとエフェクトの比較

トランジションはエフェクトに置き換わるものではありません。トランジションを使用している場合でも、単独のエフェクトをコンポーネントに適用し、エフェクトトリガまたは playEffect() メソッドを使用してこのエフェクトを呼び出すことができます。

トランジションを使用すると、ビューステートを変更したときに複数のエフェクトが同時にトリガされるように、エフェクトをグループ化できます。トランジションは、ビューステート間の変更にのみ作用するように設計されています。これは、ビューステートの変更が、通常は複数のコンポーネントの同時変更を意味するからです。

トランジションではエフェクトフィルタもサポートされます。「フィルタ」を使用すると、あるエフェクトターゲットが特定の方法で変更される場合のみ、そのエフェクトが再生されるように設定できます。例えば、ビューステートへの変更の一部として、コンポーネントのサイズを変更する場合があります。フィルタを使用すると、サイズが変更されるコンポーネントのみにエフェクトが適用されるように設定できます。フィルタの使用例については、エフェクトへのフィルタ適用を参照してください。