Getting Started with Flex 2 > Lessons > Use View States and Transitions > Create a transition

Create a transition

When you change the view states in your application, the check boxes immediately appear on the screen. You can define a Flex transition that uses the WipeDown and Dissolve effects, which make the check boxes appear gradually rather than immediately.

  1. In Source mode, create a Transition object and specify the change in state that triggers it by adding the following <mx:transitions> tag immediately after the closing <mx:states> tag:
    <mx:transitions>
    <mx:Transition id="myTransition" fromState="*" toState="Advanced">
    </mx:Transition>
</mx:transitions>

    The code defines one Transition object called myTransition. (You can define more than one transition in the <mx:transitions> tag.)

    The code also specifies that the transition will be performed when the application changes from any view state (fromState="*") to the Advanced view state (toState="Advanced"). The value "*" is a wildcard character specifying any view state.

  2. Specify the targeted component for the transition, and how you want the effects to play--simultaneously or sequentially--by entering the following <mx:Parallel> tag (in bold) between the <mx:Transition> tags:
    <mx:Transition id="myTransition" fromState="*" toState="Advanced">
    <mx:Parallel target="{myVBox}">
    </mx:Parallel>
</mx:Transition>

    The targeted component for the transition is the VBox container named myVBox.

    Because you want two effects to play simultaneously during the transition, you use the <mx:Parallel> tag. If you wanted the effects to play sequentially, you would use the <mx:Sequence> tag instead. In that case, the second effect would not start until the first effect finished playing.

  3. Specify the effects to play during the transition by entering the following <mx:WipeDown> and <mx:Dissolve> tags (in bold) between the <mx:Parallel> tags:
    <mx:Parallel target="{myVBox}">
    <mx:WipeDown duration="2000"/>
    <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>

    You want to play two effects, a WipeDown effect that causes the targeted container to appear from top to bottom over a period of 2000 milliseconds, or 2 seconds, and a reverse Dissolve effect that causes the contents of the container to gradually come into focus in 2 seconds.

    The completed application should look like the following example:

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="Advanced">
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
                    <mx:CheckBox label="Regular expression"/>
                    <mx:CheckBox label="Case sensitive"/>
                    <mx:CheckBox label="Exact phrase"/>
                </mx:VBox>
            </mx:AddChild>
            <mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=''"/>
        </mx:State>
    </mx:states>
    <mx:transitions>
        <mx:Transition id="myTransition" fromState="*" toState="Advanced">
            <mx:Parallel target="{myVBox}">
                <mx:WipeDown duration="2000"/>
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:Panel id="panel1" x="5" y="5" width="300" height="400" layout="absolute">
        <mx:Label x="20" y="70" text="Search"/>
        <mx:TextInput x="20" y="90"/>
        <mx:Button x="185" y="90" label="Go"/>
        <mx:LinkButton x="20" y="120" label="Advanced Options" click="currentState='Advanced';" id="linkbutton1"/>
    </mx:Panel>
</mx:Application>
  4. Save the file, wait until Flex Builder finishes compiling the application, and click the Run button in the toolbar.

    A browser opens and runs the application.

  5. Click the LinkButton control to view the advanced search options.

    The WipeDown and Dissolve effects play simultaneously, causing the advanced search options to appear gradually from top to bottom.

In this lesson, you used view states and transitions to create a more flexible user interface that provides users with more options on request. To learn more, see Adding View States and Transitions and the following chapters in Flex 2 Developer's Guide:

Flex 2.01

Take a survey