Package | mx.states |
Class | public class Transition |
Inheritance | Transition ![]() |
Language Version: | ActionScript 3.0 |
Product Version: | Flex 3 |
Runtime Versions: | Flash Player 9, AIR 1.1 |
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

The <mx:Transition>
tag
defines the following attributes:
<mx:Transition Properties id="ID" effect="" fromState="*" toState="*" autoReverse="false" />
Default MXML Propertyeffect
More examples
Defining transitions
Transition tips and troubleshooting
Example: Creating a transition effect
Related API Elements
mx.effects.RemoveChildAction
mx.effects.SetPropertyAction
mx.effects.SetStyleAction
Property | Defined By | ||
---|---|---|---|
![]() | constructor : Object
A reference to the class object or constructor function for a given object instance. | Object |
Method | Defined By | ||
---|---|---|---|
![]() |
Indicates whether an object has a specified property defined. | Object | |
![]() |
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter. | Object | |
![]() |
Indicates whether the specified property exists and is enumerable. | Object | |
![]() |
Sets the availability of a dynamic property for loop operations. | Object | |
![]() |
Returns the string representation of this object, formatted according to locale-specific conventions. | Object | |
![]() |
Returns the string representation of the specified object. | Object | |
![]() |
Returns the primitive value of the specified object. | Object |
<?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>
Wed Nov 21 2018, 06:34 AM -08:00