Transition

(Preview)

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

More examples

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

Related API Elements

mx.effects.AddChildAction
mx.effects.RemoveChildAction
mx.effects.SetPropertyAction
mx.effects.SetStyleAction

Public Properties

Hide Inherited Public Properties

Show Inherited Public Properties

	Property		Defined By
		autoReverse : Boolean = false Set to true to specify that this transition applies to both the forward and reverse view state changes.	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
		interruptionBehavior : String = "end" Flex does not support the playing of multiple transitions simultaneously.	Transition
		toState : String = "*" A String specifying the view state that you are changing to when you apply the transition.	Transition

Public Methods

Hide Inherited Public Methods

Show Inherited Public Methods

	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

Property Detail

interruptionBehavior

property

public var interruptionBehavior:String = "end"

Language Version:

ActionScript 3.0

Product Version:

Flex 4.5

Runtime Versions:

Flash Player 10.2, AIR 2.5

Flex does not support the playing of multiple transitions simultaneously. If a transition is currently playing when a new transition occurs, the current transition is interrupted. This property controls how the current transition behaves when interrupted.

By default, the current transition ends, which snaps all effects in the transition to their end values. This corresponds to a property value of end. If the value of this property is stop, the current transition halts at its current location. The new transition start playing from the halt location of the previous transition.

The value of stop can smooth out the appearance of an interrupted transition. That is because the user does not see the current transition snap to its end state before the new transition begins.

In some cases, the interrupting transition can be the reverse of the current transition. For example, while the transition from view state A to view state B is playing, the reverse transition occurs to interrupt the current transition. If you set the autoReverse property of a transition instance to true, you can use the same transition to handle both the forward and reverse transitions. When the interrupting transition is the reverse transition of the current transition and has autoReverse set to true, the interrupting transition runs as if the interruptionBehavior property was set to stop, regardless of the real value of interruptionBehavior.

The mx.states.InterruptionBehavior class defines the possible values for this property.

The default value is end.

Related API Elements

Transition.autoReverse
mx.states.InterruptionBehavior

Constructor Detail

Examples How to use this example

TransitionExample.mxml

Copy

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

[an error occurred while processing this directive]

Legal Notices | Online Privacy Policy

Transition - AS3 Flex

Packagesx

Language Elements

Appendixes

Package mx.states

autoReverse

effect

fromState

interruptionBehavior

toState