Transitions allow you to apply effects to state view changes. Utilizing transitions is very simple. The prerequisite for transitions is that you have two or more states between which you want to apply the transition. Once you have the states defined, you next create the transitions you want to use.
You can create transitions using MXML or ActionScript. First we’ll look at how to create transitions using MXML. Then we’ll look at how to accomplish the same thing using ActionScript.
As shown in Chapter 12, all
applications and components have a states property that you can use to define all
the states they use. Likewise, all applications and components have a
transitions property that is an array
of all the transitions you want to use. In MXML, you can define the
transitions property value using the
following code within an application or component root tag:
<mx:transitions> <!-- All transitions appear here. --> </mx:transitions>
All the elements of the transitions array must be Transition objects. In MXML, you create
Transition instances using the
Transition tag. All Transition objects must define fromState
and toState properties, and these properties should be the names of the states
from and to which the transition should apply. For example, the
following code creates a transition from a state called A to a state
called B:
<mx:Transition fromState="A" toState="B" />
If you want to use a transition for all changes to or from a
particular state, you can use the asterisk (*) as a wildcard that means “all states.” The
following example creates a transition from all states to a state named
B:
<mx:Transition fromState="*" toState="B" />
Transition objects have an effect property that determines what
effect is applied during the state change. The effect property is the
default property when you create the Transition object using MXML, which
means you can simply nest an effect tag within a Transition tag, as in the following
example:
<mx:Transition fromState="*" toState="B">
<mx:Move target="{vbox}" />
</mx:Transition>Notice that in this example, the effect specifies a target.
In most cases, the effect must specify a target or targets
when used as a transition. If you want to specify more than one target,
you can use the targets property of
an effect and specify an array of targets, as in the following
example:
<mx:Transition fromState="*" toState="B">
<mx:Move targets="{[textInput1, textInput2, textInput3, textInput4]}" />
</mx:Transition>In many cases, you don’t need to set the effect properties
specifying things such as alphas or x and y coordinates. When effects
are applied as transitions, the to
and from properties are automatically set to the values of the targets’
properties in the from and to states. For example, when you apply a move
effect as a transition, the xFrom and
yFrom properties are automatically
set to the x and y property values of the target in the from
state, and the xTo and yTo properties are automatically set to the
x and y property values of the target in the to
state. However, if you want to set the effect properties explicitly, you
can do that as you would for any normal effect, and those settings will
override any automatic settings. For instance, the following example
creates a transition that uses a rotate effect with explicit settings
for angleFrom and angleTo:
<mx:Transition fromState="*" toState="B">
<mx:Rotate target="{vbox}" angleFrom="0" angleTo="360" />
</mx:Transition>Now that we’ve had the opportunity to discuss all the fundamentals of working with transitions, let’s look at a working example. Example 13-16 creates four title windows and four states—each state featuring one of the windows larger than the others. This example uses a transition that animates all the state changes so that the windows move and resize.
Example 13-16. Applying transitions between states
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TitleWindow x="23" y="19" width="250" height="200"
layout="absolute" title="A" id="windowA" click="currentState='A'" />
<mx:TitleWindow x="309" y="19" width="250" height="200"
layout="absolute" title="B" id="windowB" click="currentState='B'" />
<mx:TitleWindow x="23" y="260" width="250" height="200"
layout="absolute" title="C" id="windowC" click="currentState='C'" />
<mx:TitleWindow x="309" y="260" width="250" height="200"
layout="absolute" title="D" id="windowD" click="currentState='D'" />
<mx:states>
<mx:State name="A">
<mx:SetProperty target="{windowA}" name="width" value="500"/>
<mx:SetProperty target="{windowA}" name="height" value="300"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
</mx:State>
<mx:State name="B">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="500"/>
<mx:SetProperty target="{windowB}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="C">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="500"/>
<mx:SetProperty target="{windowC}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="23"/>
<mx:SetProperty target="{windowC}" name="y" value="19"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="D">
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="width" value="500"/>
<mx:SetProperty target="{windowD}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="y" value="19"/>
<mx:SetProperty target="{windowC}" name="x" value="373"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Transition>
</mx:transitions>
</mx:Application>Transitions work much the same way in both MXML and ActionScript inasmuch as you must set the same properties and all the properties work in the same way regardless of whether you’re using MXML or ActionScript.
You can construct a new mx.states.Transition instance using the
constructor:
var transition:Transition = new Transition();
You can then set the fromState
and toState properties:
transition.fromState = "*"; transition.toState = "*";
Now you can assign an effect to the effect property:
var move:Move = new Move(); move.targets = [textInput1, textInput2]; transition.effect = move;
Finally, you simply need to add the transition to the transitions property of the application or
component:
transitions = [transition];
There’s no real advantage to using transitions from ActionScript or MXML. You determine which to use based on the type of document for which you are trying to define the states. If you are adding transitions to an MXML document, you should use MXML to define the transitions, and if you are adding transitions to an ActionScript class, you should use ActionScript for the transitions.
When you apply transitions, the effects are applied to all targets all the time. Often that is the correct behavior. However, sometimes you want to make the application of some effects conditional for some targets based on what changes are taking place for the targets. For instance, consider Example 13-17, which is a rewrite of the transition in Example 13-16.
Example 13-17. Adding a blur to the transition
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}">
<mx:Blur blurYFrom="0" blurYTo="10" duration="100" />
<mx:Parallel>
<mx:Move />
<mx:Resize />
</mx:Parallel>
<mx:Blur blurYFrom="10" blurYTo="0" duration="100" />
</mx:Sequence>
</mx:Transition>
</mx:transitions>In this example, first a blur is applied to all the targets, then the move and resize effects are applied, and then the blur is applied again in reverse (essentially removing the blur). This creates a nice effect that depicts a motion blur when the windows are moving. However, there is one problem with this transition: the blur is always applied to all targets even when the target isn’t actually going to move. This is a good case for using transition effect filters.
A filter on a transition effect allows you to make the application of the effect conditional. Table 13-3 shows all the filter values.
Table 13-3. Transition effect filter values
Filter value | Description |
|---|---|
| The target was added
using |
| The target was removed
using |
| The target was made
visible using |
| The target was made
nonvisible using |
| The target’s x and y properties change during the transition. |
| The target’s width and height properties change during the transition. |
Example 13-18 is a rewrite of the transition from the preceding example and corrects the blur problem by applying the blur only to the targets that are moving during the transition.
Example 13-18. Adding filters to the transition
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}">
<mx:Blur blurYFrom="0" blurYTo="10" duration="100" filter="move" />
<mx:Parallel>
<mx:Move />
<mx:Resize />
</mx:Parallel>
<mx:Blur blurYFrom="10" blurYTo="0" duration="100" filter="move" />
</mx:Sequence>
</mx:Transition>
</mx:transitions>