1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： 簡単なユーザインタフェースの作成

目次

• コントロールの使用
• コンテナの使用
• コンポーネントへのスタイルの適用
• エフェクトの追加
• ステートの作成
• ステートのトランジションの定義
• ツールヒントの使用
• カーソルの制御

---

ステートのトランジションの定義

ビューステートを使用して、たとえば、ユーザの操作に応答して、アプリケーションのコンテンツと外観を変化させることができます。 ビューステートを変更すると、Adobe® Flex® によってアプリケーションの視覚的要素がすべて同時に変更されます。 ビューステートの変更はすべて同時に実行されるため、ユーザにはアプリケーションが 1 つのステートから次のステートに一気に切り替わったように見えます。

一定時間内に 1 つのステートから次のステートへ滑らかに切り替えたい場合もあるでしょう。 トランジションを使用して、ビューステートの変化を画面に表示する方法を設定することができます。 トランジションは、ビューステートの変化が起こったときに再生されるエフェクトをグループにまとめたものです。

トランジションによってエフェクトが置き換えられることはありません。したがって、1 つのエフェクトをコンポーネントに適用して、エフェクトトリガーまたは playEffect() を使用してそのエフェクトを呼び出すことができます。■タグのみの部分を開けません■ playEffect()メソッドを使う必要があります。

■訳を後の文節にまとめました■ <mx:Transition> タグを使用してトランジションを作成し、その fromState、toState および effect プロパティを使用してカスタマイズすることができます。■タグのみの部分を開けません■ fromState, toState および effect CSS の編集作業がより快適に行えます。この fromState プロパティを使用して、トランジションを適用したときの変更元のビューステートを指定することができます。 toState プロパティを使用して変更先のビューステートを指定します。 effect プロパティは再生する Effect オブジェクトの参照です。

トランジション内で、 <mx:Parallel> および <mx:Sequence> タグを使用してエフェクトを並行再生または順次再生することができます。

次の例では、ステートが変更されるたびに使用されるトランジションを定義します。 このトランジションは並行エフェクトで構成されます。 並行エフェクトには他のエフェクトが含まれるため、複合エフェクトともいいます。 この例では、並行エフェクトにサイズ変更エフェクトとシーケンスエフェクトが含まれています。 並行エフェクトの子エフェクトはすべて同時に実行されます。

サイズ変更エフェクトは 500 ミリ秒で実行され、easing 関数を使用してパネルのサイズが変更されるときにパネルを飛び跳ねさせます。 シーケンスエフェクトも複合エフェクトです。 並行エフェクトとは異なり、シーケンスエフェクトの子イベントは一度に 1 つずつ、エフェクトを追加した順序で実行されます。 次の例のシーケンスエフェクトには 2 つのぼかしエフェクトが含まれています。 ぼかしエフェクトは対象となるコンポーネントをぼかします。スピード感を出したり、焦点が合ったりはずれたりするようすを表現するために使用することができます。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"
     viewSourceURL="src/DefiningStateTransitions/index.html"
>
    <mx:Script>
        <![CDATA[
            // You need to import easing classes even if 
            // you're going to use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>

    </mx:Script>

    <!-- 
        Use the transitions property (array) of 
        the Application class to store your transitions. 
    -->
    <mx:transitions>
        <!--
            The "*" indicates that the transition should be applied
            to any changes in the view state. You can set either 
            property to "" to refer to the base view state. 
        -->
       <mx:Transition fromState="*" toState="*">
            <!-- Parallel effects execute in unison --> 
            <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <!-- 
                    Sequence effects execute in turn. The effects
                    in this sequence will only affect the confirm FormItem.
                -->
                <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>
        
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
    <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->

            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >
                <mx:FormItem id="confirm" label="Confirm:">

                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
            
            <!-- Set properties on the Panel container and Button control. -->
            <mx:SetProperty target="{loginPanel}"
            name="title" value="Register"/>

            
            <mx:SetProperty target="{loginButton}"
            name="label" value="Register"/>
            
            <!-- Remove the existing LinkButton control. -->

            <mx:RemoveChild target="{registerLink}"/>
            
            <!-- 
                Add a new LinkButton control to change
                view state back to the login form. 
            -->
            <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>
        <!-- 
            Use the LinkButton control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>

    </mx:ControlBar>

    </mx:Panel>
</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

---

詳細情報

ステートのトランジションの設定について詳しくは、『Flex 2 Developer's Guide』の「Using Transitions」を参照してください。

著者について