mx.states.Transition - Adobe® Flex® 4 Language Reference (Flex 4)

Package	mx.states
Class	public class Transition
Inheritance	Transition Object

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

The Transition class defines a set of effects that play in response to a change of view state. While a view state definition defines how to change states, a transition defines the order in which visual changes occur during the state change.

To define a transition, you set the transitions property of an Application to an Array of Transition objects.

You use the toState and fromState properties of the Transition class to specify the state changes that trigger the transition. By default, both the fromState and toState properties are set to "*", meaning apply the transition to any changes to the view state.

You can use the fromState property to explicitly specify a view state that your are changing from, and the toState property to explicitly specify a view state that you are changing to. If a state change matches two transitions, the toState property takes precedence over the fromState property. If more than one transition match, Flex uses the first definition in the transition array.

You use the effect property to specify the Effect object to play when you apply the transition. Typically, this is a composite effect object, such as the Parallel or Sequence effect, that contains multiple effects, as the following example shows:

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

MXML Syntax expanded

Hide MXML Syntax

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

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

Default MXML Propertyeffect

View the examples

	Property	Defined By
		autoReverse : Boolean = false Whether the transition should automatically reverse itself when the opposite state transition begins playing.	Transition
		constructor : Object A reference to the class object or constructor function for a given object instance.	Object
		effect : IEffect The IEffect object to play when you apply the transition.	Transition
		fromState : String = "*" A String specifying the view state that your are changing from when you apply the transition.	Transition
		prototype : Object [static] A reference to the prototype object of a class or function object.	Object
		toState : String = "*" A String specifying the view state that you are changing to when you apply the transition.	Transition

	Method	Defined By
		Transition() Constructor.	Transition
		hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined.	Object
		isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.	Object
		propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable.	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations.	Object
		toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions.	Object
		toString():String Returns the string representation of the specified object.	Object
		valueOf():Object Returns the primitive value of the specified object.	Object

autoReverse

property

public var autoReverse:Boolean = false

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

Whether the transition should automatically reverse itself when the opposite state transition begins playing.

Flex does not currently play multiple transitions simultaneously. This means that when a new state transition occurs, if there is already one playing it is stopped by calling end() on it, which snaps it to its end values. The new transition then starts playing from that state.

The autoReverse flag allows the developer to control whether the default snap-to-end behavior occurs, or whether, instead, the previous effect is stopped in place and the new effect is played from that intermediate state instead. Internally, the transition code calculates how much of the previous effect has been played and then plays the next effect for the inverse of that time.

This flag is only checked when the new transition is going in the exact opposite direction of the currently playing one. That is, if a transition is playing between states A and B and then a transition to return to A is started, this flag will be checked. But if the application is going from state A to B and a transition to state C is started, then the default behavior of snapping to the end of the A->B transition, then playing the B->C transition will occur.

The default value is false.

effect

property

public var effect:IEffect

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

The IEffect object to play when you apply the transition. Typically, this is a composite effect object, such as the Parallel or Sequence effect, that contains multiple effects.

The effect property is the default property of the Transition class. You can omit the <mx:effect> tag if you use MXML tag syntax.

fromState

property

public var fromState:String = "*"

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

A String specifying the view state that your are changing from when you apply the transition. The default value is "*", meaning any view state.

You can set this property to an empty string, "", which corresponds to the base view state.

The default value is "*".

toState

property

public var toState:String = "*"

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

A String specifying the view state that you are changing to when you apply the transition. The default value is "*", meaning any view state.

You can set this property to an empty string, "", which corresponds to the base view state.

The default value is "*".

Constructor Detail

Transition

()

Constructor

public function Transition()

Language Version:

ActionScript 3.0

Product Version:

Flex 3

Runtime Versions:

Flash Player 9, AIR 1.1

Constructor.

Examples How to use this example

TransitionExample.mxml

<?xml version="1.0" ?>
<!-- Simple example to demonstrate the Transition class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}" 
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <!-- Define the transition from the base state to the Register state.-->
        <mx:Transition id="toRegister" fromState="*" toState="Register">
            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>

        <!-- Define the transition from the Register state to the base state.-->
        <mx:Transition id="toDefault" fromState="Register" toState="*">
            <mx:Sequence targets="{[loginPanel, registerLink, 
                    confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction  target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <!-- Define a Panel container that defines the login form.-->
    <mx:Panel title="Login" id="loginPanel" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
    
        <mx:Text width="100%" color="blue"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <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>