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 visually smoother 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.

1. Make sure you create at least one view state in addition to the base 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:

   <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 the Adobe Flex 3 Developer Guide.

   To set the properties of effects, see Working with effects in the Adobe Flex 3 Developer Guide.

7. To test the transition, click the Run button in the MXML editor toolbar, then switch states after the application starts.