jump to navigation

Using the TransitionManager Class in AS3 August 14, 2010

Posted by Tournas Dimitrios in Actionscript.
trackback

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. These are the transition effects : Fade , Rotate , Fly , Squeeze , Iris , Wipe , Photo , Zoom , Binds , PixelDissolve .

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.

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.

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.

  • None – No easing is used, the animation flows at constant regular speed.
  • Regular – Normal easing means that the animation will gradually increase or decrease in speed depending on the way it is used.
  • Strong – A more emphasized gradual increase or decrease in the animation speed.
  • Back – The animation will exceed the final or initial target and then go back (almost like a bounce effect).
  • Elastic – A mixture of strong and back easing together.

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})

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.

Until now we  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.

Relax a bit , have a cold beer and continue reading if your self-confidence is at the greatest level 🙂 🙂

The first section of this tutorial taught you the basic usage of the TransitionManager Class and how to use the common parameters for all the transition types. This section will show you the ten different transition types and the special parameters available for each of these transition types and which can be used to further customize each of these effect.

We are going to go through these transition one by one in the following order:

  • Blinds
  • Fade
  • Fly
  • Iris
  • Photo
  • PixelDissolve
  • Rotate
  • Squeeze
  • Wipe
  • Zoom

It is worth noting that all of these transitions share the common parameters explained in the first section, namely: Direction, Duration, and Easing. Refer to the first section to learn how to use these attributes.

Blinds

The Blinds transition uses vertical or horizontal strips masks to show or hide an image. In addition to the commonly shared parameters it has two additional parameters for specifying the number of strips to use in the transition and whether to use vertical or horizontal strips:

  • Additional Parameters:
    • numStrips: accepts any positive number.
    • dimensions: accepts 0 or 1. 0 uses horizontal strips while 1 uses vertical strips.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Blinds, direction:Transition.OUT, duration:3, easing:None.easeOut, numStrips:50, dimension:1});
}

Fade

The Fade transition simply fades in or fades out a movie clip. It has no parameters other than the commonly shared parameters.

Usage Example:

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

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

Fly

The Fly transition moves a movie clip in to or out of stage. It has one additional parameter to specify the position from which the movie clip flies from or to.

  • Additional Parameters
    1. startPoint: accepts any number between 1 to 9 to specify the direction from which the the movie clip will fly from or to:
      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = NA
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:7});
}

Iris

The Iris transition uses an animated circle or square mask to reveal or hide a movie clip. In addition to the commonly shared parameters it has two additional parameters for specifying the direction from which the mask shows up and whether to use a circle or square as the shape of the mask.

  • Additional Parameters
    1. startPoint: accepts any number between 1 to 9 to specify the position from which the mask starts growing or shrinking.
      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = Center
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right
    2. shape: specifies whether to use a circle or a square for the shape, use Iris.CIRCLE for circle, and Iris.SQUARE for square:

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Iris, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1, shape:Iris.CIRCLE});
}

Photo

The Photo transition uses a camera flash-like effect to fade in or fade out movie clips. It has no parameters other than the commonly shared parameters.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Photo, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
}

Pixel Dissolve

The Pixel Dissolve transition uses randomly appearing rectangles to show or hide a movie clip. In addition to the commonly shared parameters it has two additional parameters for specifying the number of vertical and horizontal rectangles at which the shape will be divided.

  • Additional Parameters:
    • xSections: accepts any positive number, determines the number of horizontal divisions.
    • ySection: accepts any positive number, determines the number of vertical divisions.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:PixelDissolve, direction:Transition.OUT, duration:3, easing:None.easeOut, xSections:35, ySections:35});

Rotate

The Rotate transition simply rotates an object. It can be customized by setting the rotation direction and the amount of rotation.

  • Additional Parameters:
    • ccw: this parameters specifies whether to rotate clockwise or counter-clockwise, set this as true to rotate counter-clockwise or set it as false to rotate clockwise.
    • degrees: Specify the number of degrees to rotate to, you can use any number.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, direction:Transition.OUT, duration:3, easing:None.easeOut, ccw:false, degrees:720});

Squeeze

The squeeze transition squeezes (scales down) or expands (scales up) an object horizontally or vertically. It has one additional parameter to specify whether to have a horizontal or vertical squeeze.

  • Additional Parameters:
    • dimensions: accepts 0 or 1. 0 squeezes the object horizontally while 1 squeezes the object vertically.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Squeeze, direction:Transition.OUT, duration:3, easing:None.easeOut, dimension:1});

Wipe

The wipe transition uses a mask to show a movie clip or wipe it out. It has one additional parameter to specify the position from which the animation ends or starts.

  • Additional Parameters
    1. startPoint: accepts any number between 1 to 9. If used as an ‘IN’ transition, this specifies the position at which the animation ends, if uses as an ‘OUT’ transition, this specifies the starting point of the wipe effect.
      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = NA
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Wipe, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1});

Zoom

The Zoom transition simply scales up or down a movie clip. It has no parameters other than the commonly shared parameters.

Usage Example:

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.OUT, duration:3, easing:Strong.easeOut});

Combo Usage

It is possible to use a combination of transitions at the same time on a single object. This does not work with all transitions, especially ones that involve using a mask, such as Iris, PixelDissolve, and Wipe because they are not compatible with each other, however, they will still work in combination with any other transitions.

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

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.IN, duration:7, easing:Strong.easeOut});
myTM.startTransition({type:Rotate, direction:Transition.IN, duration:7.5, easing:Bounce.easeOut});
myTM.startTransition({type:PixelDissolve, direction:Transition.IN, duration:5, easing:Strong.easeOut});
myTM.startTransition({type:Fly, direction:Transition.IN, duration:4, easing:Strong.easeOut});

This concludes our tutorial. I hope that you’ve learnt something new about the TransitionManager Class and its various transitions types

Comments»

1. Kevin - July 14, 2011

Hi,

Can you have a loop on the Pixel Dissolve effect? I love this but need it to keep pixel dissolving over and over.

Thanks for your help!

Kevin

tournasdimitrios1 - July 15, 2011

@Kevin
Of course , you can react to events ( read the paragraph ” Transition Events ” ) .
A very primitive example would be :

import fl.transitions.*;
import fl.transitions.easing.*;
var myTM:TransitionManager = new TransitionManager(mc_disolve);
myTM.startTransition({type:PixelDissolve , duration:2 });
myTM.addEventListener("allTransitionsInDone" , doneTrans );
function doneTrans(e:Event):void {
   myTM.startTransition({type:PixelDissolve , duration:2 });
}

Read also my other article : Tweenlite

Kevin - July 15, 2011

Worked like a charm! I forgot to change the movie clip name.

Thanks so much for you help!!!

2. tournasdimitrios1 - July 15, 2011

@Kevin
I’m glad you made it .


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s