Reference: https://www.cnblogs.com/wonderKK/archive/2012/08/22/2650475.html

TransitionManager

Contains the following 10 transition types:

1. Blinds
--------Uses gradually disappearing or appearing rectangles to display a movie clip object.
(Parameters: numStrips - number of strips in the blinds effect, recommended range 1-50; dimension - integer indicating vertical (0) or horizontal (1) strips.)

2. Fade
--------Fades in or out a movie clip object.

3. Fly
--------Slides in a movie clip object from a specified direction.
(Parameters: startPoint - integer indicating starting position, range 1-9: 1=top-left, 2=top-center, 3=top-right, 4=center-left, 5=center, 6=center-right, 7=bottom-left, 8=bottom-center, 9=bottom-right.)

4. Iris
--------Uses a scalable square or circular animated mask to show or hide a movie clip.
(Parameters: startPoint - integer 1-9 as above; shape: Iris.SQUARE or Iris.CIRCLE.)

5. Photo
--------Makes a movie clip appear or disappear like a photo being developed.

6. PixelDissolve
--------Uses randomly appearing or disappearing checkerboard rectangles to show/hide a movie clip.
(Parameters: xSections, ySections - integers for number of rectangles along horizontal/vertical axes, recommended 1-50.)

7. Rotate
--------Rotates a movie clip object.
(Parameters: ccw - boolean: false for clockwise, true for counterclockwise; degrees - integer for rotation, recommended 1-9999.)

8. Squeeze
--------Scales a movie clip horizontally or vertically.
(Parameters: dimension - integer: 0 for horizontal, 1 for vertical.)

9. Wipe
--------Uses a horizontally moving animated mask shape to show or hide a movie clip.
(Parameters: startPoint - integer 1-9 except 5: 1=top-left, 2=top-center, 3=top-right, 4=center-left, 6=center-right, 7=bottom-left, 8=bottom-center, 9=bottom-right.)

10. Zoom
--------Scales a movie clip up or down proportionally.

Usage

You can instantiate TransitionManager in two ways. The simplest is using TransitionManager.start():

TransitionManager.start(myMovieClip_mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

Alternatively, create an instance with new and call startTransition():

var transitionManager:TransitionManager = new TransitionManager(myMovieClip_mc);
transitionManager.startTransition({type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

The second method is recommended for better control.

Easing Methods

Six easing classes are available:

Each easing class provides four methods: easeIn, easeOut, easeInOut, easeNone (only in None).

Parameter Details

type: Transition type (as listed above).

direction: Transition.IN (appear) or Transition.OUT (disappear).

duration: Time in seconds.

easing: Easing mode, e.g., None.easeNone, Regular.easeIn, Strong.easeOut, Back.easeInOut, Elastic.easeIn.

Easing modes from left to right (None to Elastic) represent increasing weight/virtual mass:

• None: very light, moves instantly.
• Regular: normal weight.
• Strong: heavier, requires more force.
• Back: moves backward before starting.
• Elastic: oscillates back and forth before moving.

Easing direction:

• easeNone: no easing (only None class).
• easeIn: easing at start.
• easeInOut: easing at start and end.
• easeOut: easing at end.

Each transition may have additional parameters. Examples:

// Blinds: numStrips=15, dimension=0 (horizontal)
{type:Blinds, direction:Transition.IN, duration:3, easing:None.easeNone, numStrips:15, dimension:0}

// Fade
{type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone}

// Iris: startPoint=5 (center), shape=Iris.CIRCLE
{type:Iris, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:5, shape:Iris.CIRCLE}

// PixelDissolve: xSections=50, ySections=50
{type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeNone, xSections:50, ySections:50}

// Rotate: clockwise, 180 degrees
{type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:180}

// Zoom
{type:Zoom, direction:Transition.IN, duration:3, easing:Back.easeOut}

// Wipe: startPoint=1 (top-left)
{type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1}

Wipe start points (1-9, excluding 5) correspond to positions in a 3x3 grid:

1 (top-left)   2 (top-center)   3 (top-right)
4 (center-left)                  6 (center-right)
7 (bottom-left) 8 (bottom-center) 9 (bottom-right)

For detailed documentation and interactive demos, visit: http://www.republicofcode.com/tutorials/flash/as3transitionmanager/

Demo Code

var transitionConfigs:Array = [];
function initTransitions():void {
    transitionConfigs.push({
        type: PixelDissolve,
        direction: Transition.IN,
        duration: 1,
        easing: None.easeNone,
        xSections: 50,
        ySections: 50
    });
    transitionConfigs.push({
        type: Iris,
        direction: Transition.IN,
        duration: 3,
        easing: None.easeNone,
        startPoint: 5,
        shape: Iris.CIRCLE
    });
    transitionConfigs.push({
        type: Blinds,
        direction: Transition.IN,
        duration: 3,
        easing: None.easeNone,
        numStrips: 15,
        dimension: 0
    });
    transitionConfigs.push({
        type: Rotate,
        direction: Transition.IN,
        duration: 3,
        easing: Strong.easeInOut,
        ccw: false,
        degrees: 180
    });
    transitionConfigs.push({
        type: Zoom,
        direction: Transition.IN,
        duration: 3,
        easing: Back.easeOut
    });
    transitionConfigs.push({
        type: Fade,
        direction: Transition.IN,
        duration: 3,
        easing: None.easeNone
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 1
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 2
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 3
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 4
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 6
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 7
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 8
    });
    transitionConfigs.push({
        type: Wipe,
        direction: Transition.IN,
        duration: 2,
        easing: None.easeNone,
        startPoint: 9
    });
}

Cancelling a Transition

To cancel a running transition, start a new transition on a dummy object. The old transition will be replaced and its completion event will not fire. Example:

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.MovieClip;

var transitionManager:TransitionManager;
var targetClip:MovieClip = a; // assume 'a' is a movie clip

transitionManager = new TransitionManager(targetClip);
transitionManager.addEventListener("allTransitionsInDone", onTransitionComplete);

// Replace with a dummy transition to cancel
transitionManager = new TransitionManager(new MovieClip());
transitionManager.addEventListener("allTransitionsInDone", onDummyComplete);
transitionManager.startTransition({
    type: Zoom,
    direction: Transition.IN,
    duration: 1,
    easing: Bounce.easeOut
});

function onTransitionComplete(event:Event):void {
    trace("allTransitionsInDone");
}

function onDummyComplete(event:Event):void {
    trace("animationComplete__2");
}

Output:

• (Only the dummy transition's event fires.)