Defining transitions

You use the Transition class to create a transition. The following table defines the properties of the Transition class:

Property

Definition

fromState

A String that specifies the view state that you are changing from when you apply the transition. The default value is an asterisk, "*", which means any view state.

toState

A String that specifies the view state that you are changing to when you apply the transition. The default value is an asterisk, "*", which means any view state.

effect

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

You can define multiple Transition objects in an application. The UIComponent class includes a transitions property that you set to an Array of Transition objects. For example, you define an application with three Panel containers and three view states, as the following example shows:

View full size graphic
A.
Default view state

B.
One view state

C.
Two view state

You define the transitions for this example in MXML using the <s:transitions> tag, as the following example shows:

<?xml version="1.0" ?>
<!-- transitions/DefiningTrans.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" width="400" >

    <!-- Define the two view states, in addition to the base state.-->
    <s:states>
        <s:State name="default"/>
        <s:State name="One"/>
        <s:State name="Two"/>
    </s:states>

    <!-- Define Transition array with one Transition object.-->
    <s:transitions>
        <!-- A transition for changing from any state to any state. -->
        <s:Transition id="myTransition" fromState="*" toState="*">
            <!-- Define a Parallel effect as the top-level effect.-->
            <s:Parallel id="t1" targets="{[p1,p2,p3]}">
                <!-- Define a Move and Resize effect.-->
                <s:Move  duration="400"/>
                <s:Resize duration="400"/>
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <!-- Define the container holding the three Panel containers.-->
    <s:Group id="pm" width="100%" height="100%">
        <s:Panel id="p1" title="One" 
                x="0" y="0" 
                x.One="110" y.One="0" 
                x.Two="0" y.Two="0" 
                width="100" height="100"
                width.One="200" height.One="210"
                width.Two="100" height.Two="100"
                click="currentState='One'">
            <s:Label fontSize="24" text="One"/>
        </s:Panel>
        
        <s:Panel id="p2" title="Two" 
                x="0" y="110" 
                x.One="0" y.One="0" 
                x.Two="110" y.Two="0" 
                width="100" height="100"
                width.One="100" height.One="100"
                width.Two="200" height.Two="210"
                click="currentState='Two'">
            <s:Label fontSize="24" text="Two"/>
        </s:Panel>
        
        <s:Panel id="p3" title="Three" 
                x="110" y="0" 
                x.One="0" y.One="110" 
                x.Two="0" y.Two="110" 
                width="200" height="210" 
                width.One="100" height.One="100" 
                width.Two="100" height.Two="100" 
                click="currentState='default'">
            <s:Label fontSize="24" text="Three"/>
        </s:Panel>
    </s:Group>
</s:Application>

The executing SWF file for the previous example is shown below:

In this example:

  1. You use the click event of each Panel container to change the view state.

  2. When the application changes view state, Flex searches for a Transition object that matches the current and destination view state. In this example, you set the fromState and toState properties to "*". Therefore, Flex applies myTransition to all state changes. For more information on setting the fromState and toState properties, see Defining multiple transitions.

  3. After Flex determines the transition that matches the change of view state, Flex applies the effects defined by the transition to the effect targets. In this example, you use the specification of the top-level Parallel effect in the transition to specify the targets as the three Panel containers. For more information on setting the effect targets, see Defining effect targets.

The effects play in parallel on all effect targets, so the three Panel containers move to a new position and change size simultaneously. You can also define the top-level effect as a Sequence effect to make the effects occur sequentially, rather than in parallel.

Flex determines the start and end property values of the Move and Resize effect by using information from any properties that you specified to the effect, the current view state, and the destination view state. In this example, you omit any property specifications in the effect definitions, so Flex uses the current size and position of each Panel container to determine the values of the Move.xFrom, Move.yFrom, Resize.widthFrom, and Resize.heightFrom properties. Flex uses the destination view state to determine the values of the Move.xTo, Move.yTo, Resize.widthTo, and Resize.heightTo properties. For more information, see Defining the effect start and end values.

Defining multiple transitions

You can define multiple transitions in your application so that you can associate a specific transition with a specific change to the view state. To specify the transition associated with a change to the view states, you use the fromState and toState properties.

By default, both the fromState and toState properties are set to "*", which indicates that the transition should be applied to any changes in the view state. You can set either property to an empty string, "", which corresponds to the default view state.

You use the fromState property to explicitly specify the view state that your are changing from, and the toState property to explicitly specify the view state that you are changing to, as the following example shows:

<s:transitions> 
    <!-- Play for a change to the login view state from any view state. --> 
    <s:Transition id="toLoginFromAny" fromState="*" toState="login"> 
        ... 
    </s:Transition> 
 
    <!-- Play for a change to the login view state from         the details view state. --> 
    <s:Transition id="toLoginFromDetails"         fromState="details" toState="login"> 
        ... 
    </s:Transition> 
 
    <!-- Play for a change from any view state to any other view state. --> 
    <s:Transition id="toAnyFromAny" fromState="*" toState="*"> 
        ... 
    </s:Transition> 
</s:transitions> 
 
<!-- Go to the login view state, transition toLoginFromAny plays. --> 
<s:Button click="currentState="login";/> 
 
<!-- Go to the details view state, transition toAnyFromAny plays. --> 
<s:Button click="currentState="details";/> 
 
<!-- Go to the login view state, transition toLoginFromDetails plays because you transitioned from the details to the login view state. --> 
<s:Button click="currentState="login";/> 
 
<!-- Go to the default view state, transition toAnyFromAny plays. --> 
<s:Button click="currentState='';/> 

If a state change matches two transitions, the toState property takes precedence over the fromState property. If more than one transition matches, Flex uses the first matching definition detected in the transition Array.

Defining effect targets

The <s:Transition> tag shown in the section Defining transitions defines the effects that make up a transition. The top-level effect defines the target components of the effects in the transition when the effect does not explicitly define a target. In that example, the transition is performed on all three Panel containers in the application. If you want the transition to play only on the first two panels, you define the Parallel effects as the following example shows:

<s:Transition fromState="*" toState="*"> 
    <!-- Define a Parallel effect as the top most effect.--> 
    <s:Parallel id="t1" targets="{[p1,p2]}"> 
        <s:Move duration="400"/> 
        <s:Resize duration="400"/> 
    </s:Parallel> 
</s:Transition>

You removed the third panel from the transition, so it is no longer a target of the Move and Resize effects. Therefore, the third panel appears to jump to its new position and size during the change in view state. The other two panels show a smooth change in size and position for the 400-millisecond (ms) duration of the effects.

You can also use the target or targets properties of the effects within the transition to explicitly specify the effect target, as the following example shows:

<s:Parallel id="t1" targets="{[p1,p2,p3]}">             
    <s:Move targets="{[p1,p2]}" duration="400"/> 
    <s:Resize duration="400"/> 
</s:Parallel>

In this example, the Resize effect plays on all three panels, while the Move effect plays only on the first two panels. You could also write this example as the following code shows:

<s:Parallel id="t1" targets="{[p1,p2]}">             
    <s:Move duration="400"/> 
    <s:Resize targets="{[p1,p2,p3]}" duration="400"/> 
</s:Parallel>

Defining the effect start and end values

Like any effect, an effect within a transition has properties that you use to configure it. For example, most effects have properties that define starting and ending information for the target component, such as the xFrom, yFrom, xTo, and yTo properties of the Move effect.

Effects defined in a transition must determine their property values for the effect to execute. Flex uses the following rules to determine the start and end values of effect properties of a transition:

  1. If the effect explicitly defines the values of any properties, use them in the transition, as the following example shows:

    <s:Transition fromState="*" toState="*"> 
        <s:Sequence id="t1" targets="{[p1,p2,p3]}">             
            <mx:Blur duration="100" blurXFrom="0.0" blurXTo="10.0" 
                blurYFrom="0.0" blurYTo="10.0"/> 
         <s:Parallel> 
                <s:Move duration="400"/> 
                <s:Resize duration="400"/> 
            </s:Parallel>     
         <mx:Blur duration="100" blurXFrom="10.0" blurXTo="0.0" 
            blurYFrom="10.0"         blurYTo="0.0"/>             
        </s:Sequence> 
    </s:Transition>

    In this example, the two Blur filters explicitly define the properties of the effect.

  2. If the effect does not explicitly define the start values of the effect, Flex determines them from the current settings of the target component, as defined by the current view state.

    In the example in rule 1, notice that the Move and Resize effects do not define start values. Therefore, Flex determines them from the current size and position of the effect targets in the current view state.

  3. If the effect does not explicitly define the end values of the effect, Flex determines them from the settings of the target component in the destination view state.

    In the example in rule 1, the Move and Resize effects determine the end values from the size and position of the effect targets in the destination view state. In some cases, the destination view state explicitly defines these values. If the destination view state does not define the values, Flex determines them from the settings of the default view state.

  4. If there are no explicit values, and Flex cannot determine values from the current or destination view states, the effect uses its default property values.

The following example modifies the three-panel example shown in Defining transitions by adding Blur effects to the transition, where the Blur effect explicitly defines the values of the blurXFrom, blurXTo, blurYFrom, and blurYTo properties:

<?xml version="1.0" ?>
<!-- transitions\DefiningTransWithBlurs.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" width="400" >

    <!-- Define the two view states, in addition to the base state.-->
    <s:states>
        <s:State name="default"/>
        <s:State name="One"/>
        <s:State name="Two"/>
    </s:states>
 
    <!-- Define the single transition for all view state changes.-->
    <s:transitions>
        <s:Transition fromState="*" toState="*">
            <s:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Blur duration="100" blurXFrom="0.0" blurXTo="10.0"
                blurYFrom="0.0" blurYTo="10.0"/>
                <s:Parallel>
                    <mx:Move  duration="400"/>
                    <mx:Resize duration="400"/>
                </s:Parallel>
                <mx:Blur duration="100" blurXFrom="10.0" blurXTo="0.0"
                blurYFrom="10.0" blurYTo="0.0"/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>
    
    <!-- Define the container holding the three Panel containers.-->
    <s:Group id="pm" width="100%" height="100%">
        <s:Panel id="p1" title="One" 
                x="0" y="0" 
                x.One="110" y.One="0" 
                x.Two="0" y.Two="0" 
                width="100" height="100"
                width.One="200" height.One="210"
                width.Two="100" height.Two="100"
                click="currentState='One'">
            <mx:Label fontSize="24" text="One"/>
        </s:Panel>
        
        <s:Panel id="p2" title="Two" 
                x="0" y="110" 
                x.One="0" y.One="0" 
                x.Two="110" y.Two="0" 
                width="100" height="100"
                width.One="100" height.One="100"
                width.Two="200" height.Two="210"
                click="currentState='Two'">
            <mx:Label fontSize="24" text="Two"/>
        </s:Panel>
        
        <s:Panel id="p3" title="Three" 
                x="110" y="0" 
                x.One="0" y.One="110" 
                x.Two="0" y.Two="110" 
                width="200" height="210" 
                width.One="100" height.One="100" 
                width.Two="100" height.Two="100" 
                click="currentState='default'">
            <mx:Label fontSize="24" text="Three"/>
        </s:Panel>
    </s:Group>
</s:Application>

The executing SWF file for the previous example is shown below:

Interrupting and reversing a transition

Flex does not support the playing of multiple transitions simultaneously. If a transition is currently playing when a new transition occurs, by default the currently playing transition stops by calling the end() method on all effects in the transition.

For example, a transition is playing between view states A and B. While it is playing, a transition is triggered because of a change from view state B to view state C. The end() method causes the current transition, from view state A to B, to snap to the B view state. The new transition, from view state B to C, then starts playing.

Use the Transition.interruptionBehavior property of the new transition to control the behavior of the current transition. By default, the interruptionBehavior property is set to end to specify that the current transition snaps to its end view state. Set the interruptionBehavior property of the new transition to stop to halt that current transition instead. The new transition then plays from the halt location in the current transition, rather than having the current transition snap to its end view state. 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 new transition is the reverse of the current transition. For example, a transition is playing between view states A and B. While it is playing, a transition is triggered to change back from view state B to A.

When your application requires a reverse transition, you can either:
  • Defines two transitions. Define one transition for the change from view state A to view state B, and one for the change from B to A. Use the toState and fromState properties of the Transition class to specify the view states for the two transitions, as shown below:
    <s:transitions> 
        <s:Transition id="fromAtoB" fromState="A" toState="B"> 
            ... 
        </s:Transition> 
     
        <s:Transition id="fromBtoA" fromState="B" toState="A"> 
            ... 
        </s:Transition> 
    </s:transitions>

    The interruptionBehavior property controls the behavior of the current transition when the reverse transition starts playing.

  • Define a single transition. Set the autoReverse property of the Transition class to true to specify that this transition applies to both the forward and reverse view state changes. Therefore, use this transition on a change from view state A to view state B, and on the change from B to A.

    <s:transitions> 
        <s:Transition id="fromAtoBtoA" fromState="A" toState="B" autoReverse="true"> 
            ... 
    </s:transitions>
    Note: If a transition uses the toState and fromState properties to explicitly handle the transition from view state B to A, then Flex ignores the autoReverse property.
    While the transition from view state A to view state B is playing, the reverse transition can occur to interrupt the current transition. The reverse transition always halts the current transition at its current location. That is, the reverse transition always plays as if the interruptionBehavior property was set to stop, regardless of the real value of interruptionBehavior.