View states let you vary the content and appearance of an application, typically in response to a user action. To use view states, you define the base view state of an application, and one or more additional view states.

When you change view states, Adobe® Flex® performs all the visual changes to the application at the same time. That means when you resize, move, or in some other way alter the appearance of the application, the application appears to jump from one view state to the next.

Instead, you might want to define a smooth visual change from one view state to the next, in which the change occurs over a period of time. A transition is one or more effects grouped together to play when a view state change occurs.

For example, your application defines a form that in its base view state shows only a few fields, but in an expanded view state shows additional fields. Rather than jumping from the base version of the form to the expanded version, you define a Flex transition that uses the Resize effect to expand the form, and then uses the Fade effect to slowly make the new form elements appear on the screen.

When a user changes back to the base version of the form, your transition uses a Fade effect to make the fields of the expanded form disappear, and then uses the Resize effect to slowly shrink the form back to its original size.

By using a transition, you can apply one or more effects to the form, to the fields added to the form, and to fields removed from the form. You can apply the same effects to each form field, or apply different effects. You can also define one set of effects to play when you change state to the expanded form, and a different set of effects to play when changing from the expanded state back to the base state.

Example: Using transitions with a login form

The topic Using View States contains an example of a login form with two states: a base state and a register state. The following example adds a transition to this form to use a Blur effect and a Resize effect with an easing function to animate the transition from view state to view state:

<?xml version="1.0" ?>
<!-- transitions\LoginFormTransition.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    verticalAlign="middle">
    
    <mx:Script>
        <![CDATA[
            // Import easing classes if you use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>
    </mx:Script>

    <!-- Define the transition to animate the change of view state. -->
    <mx:transitions>
       <mx:Transition>
            <mx:Parallel 
              targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <mx:Sequence target="{confirm}">
                   <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
                   <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
        
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
                <mx:FormItem id="confirm" label="Confirm:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>            
            <mx:SetProperty target="{loginPanel}"
                name="title" value="Register"/>            
            <mx:SetProperty target="{loginButton}"
               name="label" value="Register"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:LinkButton label="Return to Login" 
                    click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel 
        title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off">

    <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>
The executing SWF file for the previous example is shown below:

Comparing transitions to effects

Transitions do not replace effects; that is, you can still apply a single effect to a component, and invoke that effect by using an effect trigger, or the playEffect() method.

Transitions give you the ability to group multiple effects so that the effects are triggered together as part of a change of view states. Transitions are designed to work specifically with a change between view states, because a view state change typically means multiple components are modified at the same time.

Transitions also support effect filters. A filter lets you conditionalize an effect so that it plays an effect only when the effect target changes in a certain way. For example, as part of the change to the view state, one or more components may change size. You can use a filter with an effect so that you apply the effect only to the components being resized. For an example using a filter, see Filtering effects.