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:

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 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:

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:

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.