In the following example, you define an application that
has two view states:
- A.
- Default view state
- B.
- OneOnly view state
To move from the default view state to the OneOnly view state,
you create the following view state definition:
<s:states>
<s:State name="default"/>
<s:State name="OneOnly"/>
</s:states>
To move from the default view state to the OneOnly view state,
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 Wipe 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 Wipe 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 Wipe effect to make
the panel appear, as the following example shows:
<s:transitions>
<s:Transition id="toOneOnly" fromState="*" toState="OneOnly">
<s:Sequence id="t1" targets="{[p2]}">
<s:Wipe direction="left" duration="350"/>
<s:SetAction property="visible"/>
<s:SetAction target="{p2}" property="includeInLayout"/>
</Sequence>
</s:Transition>
<s:Transition id="toAnyFromAny" fromState="*" toState="*">
<s:Sequence id="t2" targets="{[p2]}">
<s:SetAction target="{p2}" property="includeInLayout"/>
<s:SetAction property="visible"/>
<s:Wipe direction="left" duration="350"/>
</s:Sequence>
</s:Transition>
</s: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 actioneffects. The previous
example uses the Spark SetAction action effect to control when to
set the visible and includeInLayout properties
in the transition. The following table describes the action effects:
Adobe recommends that you use the Spark action effects instead
of the MX action effects.
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:
<s:SetAction property="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 <s:SetAction> tag, as the following
example shows:
<s:SetAction property="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.
