In the following example, you define an application that has two view states:

To move from the base view state to the OneOnly view state, you create the following view state definition:

<mx:states>
    <mx:State name="OneOnly">
        <mx:SetProperty target="{p2}" name="visible" value="false"/>
        <mx:SetProperty target="{p2}"             name="includeInLayout" value="false"/>
    </mx:State>
</mx:states>    

You set the value of the visible and includeInLayout properties to false so that Flex makes the second Panel container invisible and ignores it when laying out the application. If the visible property is false, and the includeInLayout property is true, the container is invisible, but Flex lays out the application as if the component were visible.

A view state defines how to change states, and the transition defines the order in which the visual changes occur. In the example shown in the previous image, you play an Iris effect on the second panel when it disappears, and when it reappears on a transition back to the base state.

For the change from the base state to the OneOnly state, you define the toOneOnly transition which uses the Iris effect to make the second panel disappear, and then sets the panel's visible and includeInLayout properties to false. For a transition back to the base state, you define the toAnyFromAny transition that makes the second panel visible by setting its visible and includeInLayout properties to true, and then uses the Iris effect to make the panel appear, as the following example shows:

<mx:transitions>
    <mx:Transition id="toOneOnly" fromState="*" toState="OneOnly">
        <mx:Sequence id="t1" targets="{[p2]}">
            <mx:Iris showTarget="false" duration="350"/>
            <mx:SetPropertyAction name="visible"/>
            <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
        </mx:Sequence>
    </mx:Transition>

    <mx:Transition id="toAnyFromAny" fromState="*" toState="*">
        <mx:Sequence id="t2" targets="{[p2]}">
            <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
            <mx:SetPropertyAction name="visible"/>
            <mx:Iris showTarget="true" duration="350"/>
        </mx:Sequence>
    </mx:Transition>
</mx:transitions>

In the toOneOnly transition, if you hide the target by setting its visible property to false, and then play the Iris effect, you would not see the Iris effect play because the target is already invisible.

To control the order of view state changes during a transition, Flex defines several action effects. The previous example uses the SetPropertyAction action effect to control when to set the visible and includeInLayout properties in the transition. The following table describes the action effects:

When you create a view state, you use the SetProperty, SetStyle, AddChild, and RemoveChild classes to define the view state. To control when a change defined by the view state property occurs in a transition, you use the corresponding action effect. The action effects give you control over the order of the state change.

In the previous example, you used the following statement to define an action effect to occur when the value of the visible property of a component changes:

<mx:SetPropertyAction name="visible"/>

This action effect plays when the value of the visible property changes to either true or false. You can further control the effect using the value property of the <mx:SetPropertyAction> tag, as the following example shows:

<mx:SetPropertyAction name="visible" value="true"/>

In this example, you specify to play the effect only when the value of the visible property changes to true. Adding this type of information to the action effect can be useful if you want to use filters with your transitions. For more information, see Filtering effects.

The action effects do not support a duration property; they only perform the specified action.

Example: Using action effects

The following example shows the complete code for the example in Using action effects in a transition:

<?xml version="1.0" ?>
<!-- transitions\ActionTransitions.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    verticalAlign="middle"
    layout="vertical">

    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="OneOnly">
            <mx:SetProperty target="{p2}" name="visible" value="false"/>
            <mx:SetProperty target="{p2}" 
                name="includeInLayout" value="false"/>
        </mx:State>
    </mx:states>    

    <!-- Define Transition array with one Transition object.-->
    <mx:transitions>
        <mx:Transition id="toOneOnly" fromState="*" toState="OneOnly">
            <mx:Sequence id="t1" targets="{[p2]}">
                <mx:Iris showTarget="false" duration="350"/>
                <mx:SetPropertyAction name="visible"/>
                <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
            </mx:Sequence>
        </mx:Transition>
    
        <mx:Transition id="toAnyFromAny" fromState="*" toState="*">
            <mx:Sequence id="t2" targets="{[p2]}">
                <mx:SetPropertyAction target="{p2}" name="includeInLayout"/>
                <mx:SetPropertyAction name="visible"/>
                <mx:Iris showTarget="true" duration="350"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:Panel id="p1" title="One" 
        width="100" height="100">
        <mx:Label fontSize="24" text="One"/>
    </mx:Panel>
        
    <mx:Panel id="p2" title="Two" 
        width="100" height="100">
        <mx:Label fontSize="24" text="Two"/>
    </mx:Panel>
    
    <mx:Button id="b1" label="Change state" 
        click="currentState = currentState == 'OneOnly' ? '' : 'OneOnly';"/>
</mx:Application>
The executing SWF file for the previous example is shown below: