Adobe® Flex® 4 Language Reference
Show Packages and Classes List |  Packages  |  Classes  |  Index  |  Appendixes
mx.states 
Transition 
Packagemx.states
Classpublic class Transition
InheritanceTransition Inheritance 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 SyntaxexpandedHide 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

See also



Public Properties
 PropertyDefined By
  autoReverse : Boolean = false
Whether the transition should automatically reverse itself when the opposite state transition begins playing.
Transition
 Inheritedconstructor : 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
 Inheritedprototype : 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
Public Methods
 MethodDefined By
  
Constructor.
Transition
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
 Inherited
Returns the primitive value of the specified object.
Object
Property Detail

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.

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>