Using Flex Builder 2 > Developing a Flex Application User Interface > Adding View States and Transitions > Creating a transition

Creating a transition

When you change the view states in your application, the components appear to jump from one view state to the next. You can make the change smoother visually for users by using transitions. A transition is one or more effects grouped together to play when a view state changes. For example, you can define a transition that uses a Resize effect to gradually minimize a component in the original view state, and a Fade effect to gradually display a component in the new view state.

This section describes the general steps in creating a basic transition.

To create a basic transition:

1. Make sure you create at least one view state in addition to the base state.

   For more information, see Creating a view state.

2. In the MXML editor's Source mode, define a Transition object by writing a <mx:transitions> tag and then a <mx:Transition> child tag, as shown in the following example:

   <mx:transitions>
       <mx:Transition id="myTransition">
       </mx:Transition>
   </mx:transitions>
   

   To define multiple transitions, insert additional <mx:Transition> child tags in the <mx:transitions> tag.

3. In the <mx:Transition> tag, define the change in view state that triggers the transition by setting the tag's fromState and toState properties, as in the following example (in bold):

   <mx:transitions>
       <mx:Transition id="myTransition" fromState="*" toState="checkout">
       </mx:Transition>
   </mx:transitions>
   

   In the example, you specify that you want the transition to be performed when the application changes from any view state (fromState="*") to the view state called checkout (toState="checkout"). The value "*" is a wildcard character specifying any view state.

4. In the <mx:Transition> tag, specify whether you want the effects to play in parallel or in sequence by writing a <mx:Parallel> or <mx:Sequence> child tag, as in the following example (in bold):

   <mx:Transition id="myTransition" fromState="*" toState="checkout">
       <mx:Parallel>
       </mx:Parallel>
   </mx:Transition>
   

   If you want the effects to play simultaneously, use the <mx:Parallel> tag. If you want them to play one after the other, use the <mx:Sequence> tag.

5. In the <mx:Parallel> or <mx:Sequence> tag, specify the targeted component or components for the transition by setting the property called target (for one target component) or targets (for more than one target component) to the ID of the target component or components, as shown in the following example (in bold):

   <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}">
   </mx:Parallel>
   

   In this example, three VBox containers are targeted. The targets property takes an array of IDs.

6. In the <mx:Parallel> or <mx:Sequence> tag, specify the effects to play when the view state changes by writing effect child tags, as shown in the following example (in bold):

   <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}">
       <mx:Move duration="400"/>
       <mx:Resize duration="400"/>
   </mx:Parallel>
   

   For a list of possible effects, see Available effects in Flex 2 Developer's Guide.

   To set the properties of effects, see Working with effects in Flex 2 Developer's Guide.

7. Test the transition by clicking the Run button in the MXML editor's toolbar, and then switching states after the application starts.

Related topics

• About view states and transitions
• Use View States and Transitions in Getting Started with Flex 2
• Using Transitions in Flex 2 Developer's Guide

Flex 2.01