Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Integration

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

ADC program

Additional resources

Flex Quick Start: Building a simple user interface

Table of contents

Defining state transitions

View states let you vary the content and appearance of an application, typically in response to a user action. When you change view states, Adobe® Flex® performs all the visual changes to the application at the same time. Since all the changes to a view state occur at the same time, the application can appear to the user to jump from state to state.

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

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.

You use the <mx:Transition> tag to create a transition and customize it by using its fromState, toState and effect properties. The fromState property specifies the view state that you are changing from when you apply the transition, the toState property specifies the view state that you are changing to and the effect property is a reference to the Effect object to play.

In transitions, you can cause effects to play in parallel or in sequence by using the <mx:Parallel> and <mx:Sequence> tags.

In the following example, you define a transition that is used whenever a state change occurs. This transition is comprised of a parallel effect. A parallel effect is known as a composite effect as it contains other effects. In this example, the parallel effect contains a resize effect and a sequence effect. A parallel effect's child effects all run at the same time.

The resize effect takes 500 miliseconds to execute and uses an easing function to make the panel bounce when it resizes. The sequence effect is also a composite effect. Unlike a parallel effect, a sequence effect's child events run one at a time, in the order in which they are added. The sequence effect in the following example contains two Blur effects. A Blur effect blurs its target component and can be used to create the sensation of speed or to signify gain or loss of focus.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"
     viewSourceURL="src/DefiningStateTransitions/index.html"
>
    <mx:Script>
        <![CDATA[
            // You need to import easing classes even if 
            // you're going to use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>

    </mx:Script>

    <!-- 
        Use the transitions property (array) of 
        the Application class to store your transitions. 
    -->
    <mx:transitions>
        <!--
            The "*" indicates that the transition should be applied
            to any changes in the view state. You can set either 
            property to "" to refer to the base view state. 
        -->
       <mx:Transition fromState="*" toState="*">
            <!-- Parallel effects execute in unison --> 
            <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <!-- 
                    Sequence effects execute in turn. The effects
                    in this sequence will only affect the confirm FormItem.
                -->
                <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>
        
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
    <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->

            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >
                <mx:FormItem id="confirm" label="Confirm:">

                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
            
            <!-- Set properties on the Panel container and Button control. -->
            <mx:SetProperty target="{loginPanel}"
            name="title" value="Register"/>

            
            <mx:SetProperty target="{loginButton}"
            name="label" value="Register"/>
            
            <!-- Remove the existing LinkButton control. -->

            <mx:RemoveChild target="{registerLink}"/>
            
            <!-- 
                Add a new LinkButton control to change
                view state back to the login form. 
            -->
            <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>
        <!-- 
            Use the LinkButton control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>

    </mx:ControlBar>

    </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

For more information

Using Transitions in the Adobe Flex 3 Help
Using View States in the Adobe Flex 3 Help

About the author

Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.

A–C

D–H

I–Z