Using the TransitionManager Class in AS3

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner | Page 1, 2

The TransitionManager Class provides ActionScript developers with 10 ready-made transition effects that can be applied directly onto any MovieClips. The 10 available transitions can be used either as an 'in' or an 'out' transition and can also be further customized to suit the needs of the particular project in which the transitions are used in. This tutorial will teach you everything you need to know about using the TransitionManager in ActionScript 3.0. Check the example below to see the ten transitions in action.

This tutorial is divided into the following sections:

  1. Basic Usage of the TransitionManager Class.
  2. The Common Parameters for The 10 Transitions.
  3. Events of the TransitionManager Class.
  4. The 10 Transitions Explained in Detail.

Basic Usage of the TransitionManager Class

The TransitionManager Class is used to apply ready-made transition effects to any MovieClip object. These transitions are Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, and Zoom. Transitions are different from Tweens because tweens manipulate single properties while a transition manipulate an entire object. The TransitionManager is used in circumstances where you wish to, for example, dissolve an image into another as a transition effect between two sections in your Flash website. It is not the only way for creating such effects, but probably one of the quickest methods for doing so. Each transition type has a varying level of customization that allows you tailor the transition effect to the specific needs of your project.

We are going to start off by creating a simple example in Flash to show the TransitionManager Class in action. We need to create a Flash movie with at least one MovieClip object on stage to use the TransitionManager on it.

Open up Flash and create a new Flash movie in ActionScript 3.0 format. Insert an image onto stage, then select it, press F8 to convert it to a symbol, select Movie clip as the symbol Type. The Name of the symbol does not matter so you can put anything you want there.

AS3 - Transition Manager

In order to easily refer to our object using ActionScript we need to assign an Instance Name to our object. To do this, simply select the MovieClip on stage, then access the Properties Inspector and set the Instance Name in specified field. Use my_mc as the instance name for our MovieClip.

AS3 TransitionManager Class - Properties Inspector

It is possible to refer to any object placed on Stage by using the .getChildAt() method, but that will require guessing the position of the object on the Display List. Using Instance Names is the easiest method for referring to manually created objects on stage.

We can now start coding, right-click the only frame you have on the timeline and select Actions. This will open up the Action Panel on which all of our code will reside.

Using the TransitionManager Class requires importing its class into our current movie. The TransitionManager makes use of the easing classes to specify the flow of the transition so it must also be imported. We can import all the required classes at the start of our code by using the import directive.

import fl.transitions.*;
import fl.transitions.easing.*;

Using the TransitionManager Class - Method 1

The transition Class can be used in two different ways, the shortest way of doing this is by using the .start() method on the class directly without creating an instance of the class. This method can be used in the following generalized code:

TransitionManager.start(target_movie_clip, transition_parameters);

Where the target_movie_clip is replaced with the instance name of the MovieClip, while the transition_parameters field is to be replaced with a set of parameters specifying the transition to be used. For example, to create a simple Fly transition for our image on stage we can use the following code:

import fl.transitions.*;
import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

Where my_mc is the name of the target movie clip and the parameters between the curly brackets are the transition parameters. You can test the movie now (Ctrl+Enter) to see the effect.

Each transition has a number of optional parameters that can be used to customize it. You may use as many of these as you want, not specifying any of them will simply revert the effect to its default settings. The only parameter that you have to specify is the type (which is obvious as you cannot do a transition before deciding what transition it is). So for example, the code below will still work even though it will look a bit different than the previous one:

import fl.transitions.*;
import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Fly})

You can at this moment try all the possible transitions by replacing the word Fly with any of the following: Blinds, Fade, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, or Zoom.

Using the TransitionManager Class - Method 2

The alternative method for using the TransitionManager Class is by creating an instance of it and then executing the transition by using the .startTransition() method. The difference between this method and the previously used .start() is that the .startTransition() method does not require setting the target movie clip because it is specified when instantiating the class. This method is one line longer than the previous method. It can be used in the generalized code below:

var identifier:TransitionManager = new TransitionManager(target_movie_clip);
identifier.startTransition(transition_parameters);

In the example above the identifier can be replaced with any name you choose while the target_movie_clip and transition_parameters are to be used in the same way shown in method 1. So in order to do a trick similar to the ones we used above we can write something similar to this:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

This method might look longer, but it allows us to listen to transition completion events - we will discuss this later in this page. The next section will show you the different ways in which you customize any of transitions.

Customizing the Ten Different Transition Types

It is possible to pass a number of optional parameters to each transition to customize it when executing the transition. However, all of these transitions are optional and a transition can still be made without specifying anything other than the type of the transition.

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom})

However, you would usually like to customize the transition to a certain extent to make it fit your project. All the transitions share a number of common parameters that can be used with any of them. Some transitions also have unique parameters that can only be applied to them. We are going to discuss the common parameters which are shared by all the transitions. The unique parameters for each of transitions will be discussed in the second page of this tutorial.

The three common shared parameters are Direction, Duration, and Easing. It is important to note that all of these parameters are optional, you are not required to specify them in any order, and you may use as many of them as you choose or use none at all.

Common Parameter 1 - Direction

The Direction parameter specifies whether this is an intro or an outro transition. An intro transition is one which is used to introduce the movie clip to the scene, while an outro transition is one that removes an object from the scene.

There are only two possible values for this parameter, Transition.IN and Transition.OUT. The naming conventions are pretty self-explanatory, you can use parameter easily in the manner shown below:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.OUT})

Common Parameter 2 - Duration

The Duration of any transition is the time period required for the transition to complete. You need to specify this value in seconds. It can be easily incorporated in the manner shown below:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, duration:50})

Common Parameter 3 - Easing

The Easing parameter determines the flow of the speed of the transition animation. It is pretty hard to explain in words, but is easy to understand once you see it. There are five easing Classes that can be used to determine how the animation flows.

Each of these easing types mentioned above can be further customized by using its easing at the start of the animation (easeIn), at the end of the animation(easeOut), or both at the start and end of the animation (easeInOut). This parameter can be incorporated this way:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, easing:Back.easeOut})

It is pretty hard to understand how easing works without looking at a visual example. Note that the difference between Regular and None easing can be too subtle to notice.

Using the Three Common Parameters Together

The three mentioned above parameters can be used for all the transition types. You may use any of them in any specific order you choose. For example, if you want to have a fly In-Transition, that lasts for 3 seconds and uses a Back easing you would write that using a code similar to the one below:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:3 , easing:Back.easeOut})

Reacting to Transition Events

Say you wanted to open a link or move to another section in your movie once a transition completes, to do this you will have to use an event listener to trigger a listener function.

The TransitionManager Class has two events (1) allTransitionsOutDone and (2) allTransitionsInDone - both of which are not documented by Adobe at the time I am writing this tutorial. The allTransitionsOutDone event is triggered when a transition with a direction parameter set to Transition.OUT finishes, while the allTransitionsInDone event is triggered when a transition with a direction parameter set to Transition.IN finishes.

These events are to be attached to an instance of the TransitionManager Class and are used exactly like all other events in ActionScript 3.0. For example, if we want to output a message saying that the animation is complete we can use the following code:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener("allTransitionsInDone", doneTrans);

function doneTrans(e:Event):void{
trace("The animation has finished!");
}

It is possible to refer to the movie clip that was animated by using the .content property of the event target (which is the instance of the TransitionManager) from within the listener function:

import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener("allTransitionsInDone", doneTrans);

function doneTrans(e:Event):void{
trace("The animation has finished!");
MovieClip(e.target.content).alpha=.5;
}
"MovieClip()" was used on the reference to the target movie clip to 'type-cast' the MovieClip type of that object. This lets Flash know for sure that this object is a movie clip as required by the authoring tool if it is used in strict mode.

Using the technique above makes it possible to reuse the listener function for various objects and lets us use the listener without necessarily knowing the name of the target object.

Summary

This page explained the basic use of the TransitionManager Class, the common parameters that can be used to customize a transition, and how to react to the end of a transition by using events. The next section will talk about the ten available transitions and the different attributes available to customize each one of these transitions specifically. Click here to go to the next page.

- Next Page