Transition

パッケージ	mx.states
クラス	public class Transition
継承	Transition Object

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

Transition クラスにより、ビューステートの変更に応じて再生される一連のエフェクトが定義されます。ビューステート定義がステートの変更方法を定義する一方、トランジションはステートの変更中に表示を変更する順序を定義します。

トランジションを定義するには、アプリケーションの transitions プロパティを Transition オブジェクトの配列に設定します。

Transition クラスの toState プロパティおよび fromState プロパティを使用して、トランジションをトリガーするステート変更を指定します。デフォルトでは、fromState プロパティと toState プロパティの両方が "*" に設定されます。つまり、ビューステートに対するすべての変更にトランジションが適用されます。

変更前のビューステートを明示的に指定するには、fromState プロパティを使用します。変更後のビューステートを明示的に指定するには、toState プロパティを使用します。 1 つのステート変更が 2 つのトランジションに一致する場合は、toState プロパティが fromState プロパティよりも優先されます。複数のトランジションが一致する場合、Flex はトランジション配列の最初の定義を使用します。

effect プロパティを使用して、トランジションを適用するときに再生する Effect オブジェクトを指定します。通常、このオブジェクトには、Parallel エフェクトや Sequence エフェクトなどの複数のエフェクトの組み合わせが含まれます。次に例を示します。

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

MXML シンタックス expanded

MXML シンタックスを隠す

The <mx:Transition> tag defines the following attributes:

  <mx:Transition
    Properties
    id="ID"
    effect=""
    fromState="*"
    toState="*"
    autoReverse="false"
  />

デフォルトの MXML プロパティeffect

例を表示

さらに例を参照

Transitions with Spark skins
Defining transitions
Transition tips and troubleshooting
Example: Creating a transition effect

	プロパティ	定義元
		autoReverse : Boolean = false このトランジションが、正方向と逆方向の両方のビューステートの変更に適用されることを指定するには、true に設定します。	Transition
		constructor : Object 指定されたオブジェクトインスタンスのクラスオブジェクトまたはコンストラクター関数への参照です。	Object
		effect : IEffect このトランジションを適用するときに再生する IEffect オブジェクトです。	Transition
		fromState : String = "*" トランジションを適用する場合に、変更前のビューステートを指定するストリングです。	Transition
		interruptionBehavior : String = "end" 複数のトランジションを同時に再生することはできません。	Transition
		toState : String = "*" トランジションを適用する場合に、変更後のビューステートを指定するストリングです。	Transition

	メソッド	定義元
		Transition() コンストラクターです。	Transition
		hasOwnProperty(name:String):Boolean オブジェクトに指定されたプロパティが定義されているかどうかを示します。	Object
		isPrototypeOf(theClass:Object):Boolean Object クラスのインスタンスが、パラメーターとして指定されたオブジェクトのプロトタイプチェーン内にあるかどうかを示します。	Object
		propertyIsEnumerable(name:String):Boolean 指定されたプロパティが存在し、列挙できるかどうかを示します。	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void ループ処理に対するダイナミックプロパティの可用性を設定します。	Object
		toLocaleString():String ロケール固有の規則に従って書式設定された、このオブジェクトのストリング表現を返します。	Object
		toString():String 指定されたオブジェクトのストリング表現を返します。	Object
		valueOf():Object 指定されたオブジェクトのプリミティブな値を返します。	Object

autoReverse

プロパティ

public var autoReverse:Boolean = false

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

このトランジションが、正方向と逆方向の両方のビューステートの変更に適用されることを指定するには、true に設定します。したがって、ビューステート A からビューステート B および B から A への変更に、このトランジションを使用します。

ビューステート A からビューステート B へのトランジションを再生中に、逆方向のトランジションが発生して、現在のトランジションに割り込む場合があります。逆方向のトランジションは、常に現在のトランジションを現在の場所で停止します。つまり、逆方向のトランジションは、interruptionBehavior の実際の値に関係なく、常に interruptionBehavior プロパティが stop に設定されている場合のように再生されます。

このプロパティがチェックされるのは、新しいトランジションが、現在再生中のトランジションとは正反対の方向に進行している場合のみです。つまり、ステート A とステート B の間でトランジションが再生されている場合に、ステート A に戻るトランジションが開始された場合です。

トランジションが toStateプロパティと fromState プロパティを使用して、ビューステート B から A へのトランジションを明示的に処理する場合、autoReverse プロパティは無視されます。

デフォルト値： false。

effect

プロパティ

public var effect:IEffect

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

このトランジションを適用するときに再生する IEffect オブジェクトです。通常、このオブジェクトには、Parallel エフェクトや Sequence エフェクトなどの複数のエフェクトの組み合わせが含まれます。

effect プロパティは、Transition クラスのデフォルトプロパティです。 MXML タグのシンタックスを使用している場合は、<mx:effect> タグを省略できます。

fromState

プロパティ

public var fromState:String = "*"

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

トランジションを適用する場合に、変更前のビューステートを指定するストリングです。デフォルト値は "*" で、任意のビューステートを意味します。

このプロパティは、基本ビューステートに対応する空のストリング "" に設定できます。

デフォルト値： "*"。

interruptionBehavior

プロパティ

public var interruptionBehavior:String = "end"

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 4.5

ランタイムバージョン:

Flash Player 10.2, AIR 2.5

複数のトランジションを同時に再生することはできません。トランジションを再生中に新しいトランジションが発生すると、現在のトランジションは割り込まれます。このプロパティは、割り込み時の現在のトランジションの動作方法を制御します。

デフォルトでは、現在のトランジションは終了します。つまり、トランジション内のすべてのエフェクトが終了値にスナップします。これは、end のプロパティ値に対応しています。このプロパティの値が stop の場合、現在のトランジションは現在の場所で停止します。新しいトランジションは、前のトランジションの停止位置から再生を開始します。

stop の値を指定すると、割り込まれたトランジションの外観を滑らかに処理できます。これは、新しいトランジションが始まる前に、現在のトランジションが終了状態にスナップするのがユーザーに表示されないためです。

一部のケースでは、割り込むトランジションが、現在のトランジションの逆方向の場合もあります。例えば、ビューステート A からビューステート B へのトランジションを再生中に、逆方向のトランジションが発生して現在のトランジションに割り込む場合があります。トランジションインスタンスの autoReverse プロパティを true に設定すると、同じトランジションを使用して、正方向と逆方向の両方のトランジションを処理できます。割り込むトランジションが、現在のトランジションの逆方向のトランジションで、autoReverse が true に設定されている場合、割り込むトランジションは、interruptionBehavior の実際の値に関係なく、interruptionBehavior プロパティが stop に設定されている場合のように実行されます。

mx.states.InterruptionBehavior クラスは、このプロパティの想定される値を定義します。

デフォルト値： end。

toState

プロパティ

public var toState:String = "*"

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

トランジションを適用する場合に、変更後のビューステートを指定するストリングです。デフォルト値は "*" で、任意のビューステートを意味します。

このプロパティは、基本ビューステートに対応する空のストリング "" に設定できます。

デフォルト値： "*"。

コンストラクターの詳細

()

コンストラクター

public function Transition()

言語バージョン:

ActionScript 3.0

製品バージョン:

Flex 3

ランタイムバージョン:

Flash Player 9, AIR 1.1

コンストラクターです。

例この例の使用方法

TransitionExample.mxml

<?xml version="1.0" ?>
<!-- Simple example to demonstrate the Transition class. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" currentState="Login">
 
    <!-- Define the view states -->
    <s:states>
        <s:State name="Login" />
        <s:State name="Register" />
    </s:states>

    <s:transitions>
        <!-- Define the transition from the base state to the Register state.-->
        <s:Transition id="toRegister" fromState="*" toState="Register">
            <s:Sequence targets="{[loginPanel, registerLink, confirm, loginLink]}">
                <s:RemoveAction />
                <s:Fade />
                <s:SetAction target="{loginPanel}" property="title" />
                <s:SetAction target="{loginButton}" property="label" />
                <s:SetAction target="{loginButton}" property="color" />
                <s:Resize target="{loginPanel}"/>
                <s:AddAction />
                <s:Fade />
            </s:Sequence>
        </s:Transition>

        <!-- Define the transition from the Register state to the base state.-->
        <s:Transition id="toDefault" fromState="Register" toState="*">
            <s:Sequence targets="{[loginPanel, registerLink, 
                    confirm, loginLink]}">
                <s:RemoveAction/>
                <s:SetAction target="{loginPanel}" property="title"/>
                <s:SetAction  target="{loginButton}" property="label"/>
                <s:SetAction target="{loginButton}" property="color"/>
                <s:Resize target="{loginPanel}"/>
                <s:AddAction/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <!-- Define a Panel container that defines the login form. The title of the Panel
         changes depending on the state. -->
    <s:Panel title="Login" title.Register="Register" id="loginPanel" 
            width="75%" horizontalCenter="0" verticalCenter="0">
    <s:controlBarLayout >
        <s:BasicLayout />
    </s:controlBarLayout>
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10" />
    </s:layout>
        <s:Label color="blue" width="100%"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <!-- The following form has  two TextInputs in the Login state and three TextInputs
             in the Register state. -->
        <s:Form id="loginForm" >
            <s:FormItem label="Username:">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem label="Password:">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem id="confirm" label="Confirm:" includeIn="Register" includeInLayout="false" includeInLayout.Register="true">
                <s:TextInput/>
            </s:FormItem>
        </s:Form>
       
        <!-- The controlBar includes two visible items in each state. Which LinkButton is visible is determined
             by the state -->
        <s:controlBarContent>
            <mx:LinkButton id="registerLink"  label="Need to Register?" top="10" bottom="10"
                click="currentState='Register'" left="10" includeIn="Login" />
            <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''" includeIn="Register" left="10"  top="10" bottom="10"/>
            <s:Button label="Login" label.Register="Register" id="loginButton" right="10" color.Register="0x0000FF"  top="10" bottom="10"/>
        </s:controlBarContent>
    </s:Panel>
</s:Application>

法律上の注意 | プライバシーポリシー

Transition - AS3 Flex

パッケージx

言語エレメント

付録

パッケージ mx.states

autoReverse

effect

fromState

interruptionBehavior

toState

Transition