Using the TransitionManager Class in AS3 - Page 2

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

The first page 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 page 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:

It is worth noting that all of these transitions share the common parameters explained in page one, namely: Direction, Duration, and Easing. Refer to page 1 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:

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.

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.

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.

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.

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.

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.

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. If you have any questions or comments please post them all at the Oman3D Forum.

End of Tutorial.