Learning Flex – Lesson 22, Creating Transitions and Behaviors

Behaviors and transitions allow you to add animation and sound effects to your application. Behaviors are effects that can be applied directly on components, transitions are these effects applied to application states.

Some of the effects available are: fade, dissolve, move/resize, rotate, wipe, glow and play sound.

These effects can be used to draw the user’s attention to items changing on the screen or give cues as to which elements they can interact with.

Behaviors

When applied to components, behaviors are made up of a trigger and an effect.

The trigger is the action taking place on the component such as a button click or gaining focus. It is important to note that triggers are different to events. A component would have a mouseDownEffect trigger as well as a mouseDown event. When you use a trigger, you do not specify an event handler, instead you specify the effect to occur.

You can directly specify an effect class name for a trigger such as:

<mx:VBox showEffect="Fade"/>

but in this case, you are limited to one effect and cannot customize it.

You may define an effect tag and specify desired properties that can then be provided to a trigger using data binding on the effect id such as:

<mx:Fade id="myFade" duration="2000"/>
<mx:VBox showEffect="{myFade}"/>

You can apply multiple effects to the same trigger by using the <mx:Sequence> or <mx:Parallel> tags by nesting effects within them to occur in order (using <mx:Sequence>) or all together (using <mx:Parallel>). You can even nest these tags for more involved effects.

As effect triggers are implemented as CSS styles, you can specify them using an <mx:Style> tag:

<mx:Style>
List {showEffect : myFade;}
</mx:Style>

which will make all lists have the same show effect (unless you override it in a specific list configuration, or:

<mx:Style>
.fadeStyle { showEffect : myFade;}
</mx:Style>

which will display this effect for all components with the styleName property set to fadeStyle.

It’s also possible to play effects at other times by calling the effect’s play() method (you can optionally specify an array of components to perform the effect on and a boolean value which when set to true, will play the effect backwards. There’s also an end() method to end the effect (this is often called immediately before play() to stop any outstanding effects).

Effects can be used for changes in data provided by a dataProvider in a List or TileList. More information about this can be found here.

More control over the animation of an effect may be provided by using an easing function. All effect classes that are children of the TweenEffect or MaskEffect classes support the easingFunction property. Some components have easing function style properties that can be used directly.  More information on easing functions can be found here.

You can play a sound effect by using the <mx:SoundEffect> tag and specifying the url of an MP3 file in the source property. Alternatively, if you’ve already embedded  the sound file, you may use data binding to refer to it’s class object here.  There are also several properties to determine the duration, start point in the file, volume start and end values etc (you can find out the full details here) .

Transitions

Transitions are effects for application states. They must be declared as children of an <mx:transitions> tag (this is a property of the application). Each <mx:Transition> has a fromState – the view state you’re moving from, toState – the view state you’re moving to and the effect object you want to play when the transition occurs. You can specify a target or targets (array of target objects) for the effect either in the effect tag directly or at a higher level within an <mx:Sequence> or <mx:Parallel> tag. An example would be:

<mx:transitions>
<mx:Transition fromState="START" toState="*">
<mx:Dissolve duration="2000"  target="{myContainer}"/>
</mx:Transition>
</mx:transitions>

Once the transitions are declared, they are triggered by changing the application’s currentState property.