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 |
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 SyntaxHide MXML Syntax
The <mx:Transition>
tag
defines the following attributes:
<mx:Transition Properties id="ID" effect="" fromState="*" toState="*" autoReverse="false" />
Default MXML Propertyeffect
See also
mx.effects.RemoveChildAction
mx.effects.SetPropertyAction
mx.effects.SetStyleAction
Transitions with Spark skins
Defining transitions
Transition tips and troubleshooting
Example: Creating a transition effect
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 | ||
---|---|---|---|
Constructor. | Transition | ||
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 |
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 "*".
Transition | () | Constructor |
public function Transition()
Language Version: | ActionScript 3.0 |
Product Version: | Flex 3 |
Runtime Versions: | Flash Player 9, AIR 1.1 |
Constructor.
<?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>
Fri Mar 19 2010, 02:45 AM -07:00