Transitions and the Transition Manager

in

With Flash CS4 ( and CS3 for that matter ) comes a great utility for simple visual effects, the Transition Manager and accompanying transitions. With this tool you can use some common transitions without much complex coding on your side. The following is a list of the available transitions.

Transitions can be used by themselves or mixed together for an even more professional look. And all this is very easy because of the power and simplicity of the Transition Manager class. Using the class is very simple. The following code performs a simple fade in on an imaginary MovieClip instance named myClip.
import fl.transitions.*;
var transitionMgr:TransitionManager = new TransitionManager( myClip );
var params:Object = new Object();
params.type = Fade;
params.direction = Transition.IN;
var transition:Transition = transitionMgr.startTransition( params );
The above code could also be done with the static start() method, like so:
import fl.transitions.*;
var params:Object = new Object();
params.type = Fade;
params.direction = Transition.IN;
var transition:Transition = TransitionManager.start( myClip, params );
Using the static start() method is a bit cleaner. However, if you need to do multiple transitions to the same movieclip the first method is best.

[ad#Google Adsense]

Using Parameters

The two transition methods both take a parameters object, but you might be wondering what goes in the object. That depends on a few things and here are some options.

  1. The type is required - enter one of the 10 above.
  2. Other common properties for all transitions include
    1. direction - choices are Transition.IN and Transition.OUT ( default is Transition.IN )
    2. duration - this is measured in seconds
    3. easing - This is a function. I believe the default is None.none;
  3. You can add parameters specific to the fade type you are using( i.e. numStrips for a Blinds transition )

When does it end?

When looking at the documentation for the Transition and Transition Manager classes, there appears to be a problem. If you want to do something when the transition(s) are done there doesn't appear to be any events that tell you when this occurs. The truth is there are events that get fired, the documentation is just lacking. The events that get fired are of type flash.event.Event and there are no constants to give you any auto completion help.

For the transitions the following events may be fired:

  • "transitionInDone"
  • "transitionOutDone"
  • "transitionProgress"

The TransitionManager fires the following 2 events

  • "allTransitionsInDone"
  • "allTransitionsOutDone"

Example

With all the above in mind I thought I would show each of the different transitions and the events that fire. Each transition uses all of its defaults, but you do get to choose the direction so you can see the different complete events :)

One Last Thing

The Transition classes unfortunately are only coded to work with MovieClip instances. For many people who don't code in MovieClips you may have to find a different solution but for most users of Flash CS4+ this shouldn't be a problem. [ad#Adobe Banner] If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How's that for alliteration :) Until next time keep on coding.