Adobe Flex 3 Help

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:

Three Panel containers and three view states

A. Base view state B. One view state C. Two view state

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

<?xml version="1.0" ?>
<!-- transitions/DefiningTrans.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" >

    <!-- Define the two view states, in addition to the base state.-->
    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="200"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="200"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

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

    <!-- Define the Canvas container holding the three Panel containers.-->
    <mx:Canvas id="pm" width="100%" height="100%" >
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100"
                click="currentState='One'" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
        
        <mx:Panel id="p2" title="Two" 
                x="0" y="110" width="100" height="100"
                click="currentState='Two'" >
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
        
        <mx:Panel id="p3" title="Three" 
                x="110" y="0" width="200" height="210" 
                click="currentState=''" >
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx: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 Move and Resize 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 Move and Resize 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 Move and Resize 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 base 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:

<mx:transitions>
    <!-- Play for a change to the login view state from any view state. -->
    <mx:Transition id="toLoginFromAny" fromState="*" toState="login">
        ...
    </mx:Transition>

    <!-- Play for a change to the login view state from         the details view state. -->
    <mx:Transition id="toLoginFromDetails"         fromState="details" toState="login">
        ...
    </mx:Transition>

    <!-- Play for a change from any view state to any other view state. -->
    <mx:Transition id="toAnyFromAny" fromState="*" toState="*">
        ...
    </mx:Transition>
</mx:transitions>

<!-- Go to the login view state, transition toLoginFromAny plays. -->
<mx:Button click="currentState="login";/>

<!-- Go to the details view state, transition toAnyFromAny plays. -->
<mx:Button click="currentState="details";/>

<!-- Go to the login view state, transition toLoginFromDetails plays because you transitioned from the details to the login view state. -->
<mx:Button click="currentState="login";/>

<!-- Go to the base view state, transition toAnyFromAny plays. -->
<mx: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 <mx: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:

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

<mx:Parallel id="t1" targets="{[p1,p2,p3]}">            
    <mx:Move targets="{[p1,p2]}" duration="400"/>
    <mx:Resize duration="400"/>
</mx: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:

<mx:Parallel id="t1" targets="{[p1,p2]}">            
    <mx:Move duration="400"/>
    <mx:Resize targets="{[p1,p2,p3]}" duration="400"/>
</mx: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:
    <mx:Transition fromState="*" toState="*">
    <mx:Sequence id="t1" targets="{[p1,p2,p3]}">            
        <mx:Blur duration="100"             blurXFrom="0.0" blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"/>
     <mx:Parallel>
            <mx:Move duration="400"/>
            <mx:Resize duration="400"/>
        </mx:Parallel>    
     <mx:Blur duration="100"             blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>            
    </mx:Sequence>
</mx: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 base 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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" >

    <!-- Define the two view states, in addition to the base state.-->
    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="200"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="200"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

    <!-- Define the single transition for all view state changes.-->
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
                <mx:Blur duration="100" blurXFrom="0.0" blurXTo="10.0"
                blurYFrom="0.0" blurYTo="10.0"/>
                <mx:Parallel>
                    <mx:Move  duration="400"/>
                    <mx:Resize duration="400"/>
                </mx:Parallel>
                <mx:Blur duration="100" blurXFrom="10.0" blurXTo="0.0"
                blurYFrom="10.0" blurYTo="0.0"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

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

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