AS3 Transitions

Transitions are another tool that can be used for animating movement in Flash. This demo shows all of the different types of transitions and options that are available for each transition in AS3. Only one line of code is actually used to perform animation in this program:

TransitionManager.start(MovieClip, { Type: TransitionObject, options... })

The TransitionManager class needs a MovieClip object in order to perform a transition. The rest of the code is just setting up the options to be used by the call to TransitionManager, which is used in the doTransition function at the end of this program.

As in the Tween Demo, you can combine different transitions or tweens by pressing CTRL and the mouse button.

Press GO in the lower right corner to watch a transition.

Source Code


package {


import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.filters.GlowFilter;
import fl.controls.List;
import fl.controls.Slider;
import fl.controls.SliderDirection;
import fl.controls.Button;
import fl.controls.NumericStepper;
import fl.transitions.*;
import fl.transitions.easing.*;


public class TransitionDemo extends Sprite {


var planeBD : BitmapData = new Plane(500, 230); // import plane from library
var planeB : Bitmap = new Bitmap(planeBD);
var plane : MovieClip = new MovieClip();
var homeX : int = stage.stageWidth / 2; // starting coords of plane
var homeY : int = 180;
var controlY : int = 380; // starting coords of controls
var transL : List = new List; // different types of transitions
var transS : Array = new Array("Blinds", "Fade", "Fly", "Iris", "Photo", "PixelDissolve", "Rotate", "Squeeze", "Wipe", "Zoom");
var fadeL : List = new List; // fade in or out
var fadeS : Array = new Array("Transition.IN", "Transition.OUT");
var easeL : List = new List(); // list of ease types
var easeS : Array = new Array("easeIn", "easeOut", "easeInOut");
var tweenL : List = new List(); // list of tweens
var tweenS : Array = new Array("None", "Regular", "Strong", "Back", "Elastic");
var durationS : Slider = new Slider; // duration slider
var dimensionL : List = new List(); // list of dimensions
var dimensionS : Array = new Array("Horizontal", "Vertical");
var numStrips : NumericStepper = new NumericStepper; // # of strips
var xSect : NumericStepper = new NumericStepper; // # of x sections
var ySect : NumericStepper = new NumericStepper; // # of y sections
var ccwL : List = new List(); // true/false for counter clockwise
var ccwS : Array = new Array("True", "False");
var degrees : NumericStepper = new NumericStepper; // # of degrees
var shapeL : List = new List(); // Circle or Square shape for iris
var shapeS : Array = new Array("CIRCLE", "SQUARE");
var startL : List = new List(); // list of start points
var startS : Array = new Array("Top Left", "Top Center", "Top Right", "Left Center", "Center", "Right Center", "Bottom Left", "Bottom Center", "Bottom Right");
var goB : Button = new Button; // go button


function TransitionDemo() {

var i : int;

// add plane to the scene
plane.addChild(planeB);
planeB.x = -planeB.width / 2;
planeB.y = -planeB.height / 2;
plane.x = homeX; plane.y = homeY;
addChild(plane);
// add list of transition types
addListBox(transL, transS, 10, controlY, "Transition*", true);
// add fade in or out transition
addListBox(fadeL, fadeS, transL.x + transL.width + 10, controlY, "Fade In/Out", false);
// add duration slider
durationS.minimum = 0.25;
durationS.maximum = 10;
durationS.snapInterval = 0.25;
durationS.direction = SliderDirection.VERTICAL;
durationS.height = 130;
durationS.x = fadeL.x + 90;
durationS.y = fadeL.y + fadeL.height + 20;
durationS.value = 2;
addChild(durationS);
addLabel(durationS.x - 90, durationS.y + 30, "Duration:\n(0.25 to\n10 seconds)");
// add list of tween types
addListBox(tweenL, tweenS, fadeL.x + fadeL.width + 10, controlY, "Tween*", true);
// add list of ease types
addListBox(easeL, easeS, tweenL.x, tweenL.y + tweenL.height + 40, "Ease", false);
// add dimensions listbox
addListBox(dimensionL, dimensionS, easeL.x + easeL.width + 10, controlY, "Dimension", false);
// add numstrips numberbox
addNumBox(numStrips, 1, 100, 5, dimensionL.x, dimensionL.y + dimensionL.height + 25, "Strips");
// add x & y sections numberbox
addNumBox(xSect, 1, 500, plane.width / 20, numStrips.x, numStrips.y + numStrips.height + 25, "X & Y Sections");
addNumBox(ySect, 1, 230, plane.height / 20, xSect.x + xSect.width + 5, xSect.y, "");
// add iris shape
addListBox(shapeL, shapeS, xSect.x, xSect.y + xSect.height + 25, "Shape", false);
// add counter clockwise
addListBox(ccwL, ccwS, dimensionL.x + dimensionL.width + 10, controlY, "Clockwise", false);
// add degrees
addNumBox(degrees, 1, 3600, 360, numStrips.x + numStrips.width + 5, numStrips.y, "Degrees");
// add list of start points
addListBox(startL, startS, ccwL.x, ccwL.y + ccwL.height + 25, "Start Point", false);
startL.rowCount = 5;
// add go button
goB.label = "GO!"; goB.emphasized = true;
goB.filters = [ new GlowFilter(0xFFFF00) ];
goB.x = stage.stageWidth - goB.width - 10;
goB.y = stage.stageHeight - goB.height - 10;
addChild(goB);
goB.addEventListener(MouseEvent.MOUSE_DOWN, doTransition);
// add extra labels
addLabel(10, stage.stageHeight - 20, "* Press CTRL & mouse button to select multiple transitions or tweens.");
addLabel(485, 0, "By: Hooman Row");
}

// prints a label, given x/w coords and string
function addLabel(x : int, y : int, s : String) {

var t : TextField = new TextField;

t.defaultTextFormat = new TextFormat(null, 15, 0x000000, null, null, null, null, null, "right");
t.x = x; t.y = y; t.text = s;
t.autoSize = TextFieldAutoSize.LEFT;
t.selectable = false;
addChild(t);
}

// given a listbox, populates it with array, puts in coords and adds label
function addListBox(L : List, A : Array, x : int, y : int, title : String, allowMultiple : Boolean) {

var i : int;

for (i = 0; i < A.length; i++) {
L.addItem( {label:A[i]} ); }
L.x = x; L.y = y;
L.rowCount = A.length;
addChild(L);
L.allowMultipleSelection = allowMultiple;
L.selectedIndex = 0;
L.width = 108;
addLabel(x, y - 20, title);
}

// given a numeric stepper, sets it up for min, max, x/y coords and title
function addNumBox(N : NumericStepper, min : int, max : int, value : int, x : int, y : int, title : String) {

N.minimum = min; N.maximum = max; N.value = value;
N.x = x; N.y = y;
N.width = 50;
addLabel(x, y - 20, title);
addChild(N);
}

// performs all selected transitions
function doTransition(e : MouseEvent) {

var i : int; var j : int;
var transO, tweenO : Object;

goB.setFocus();

for (i = 0; i < transL.selectedIndices.length; i++) {
switch (transL.selectedItems[i].label) {
case "Blinds": transO = Blinds; break;
case "Fade": transO = Fade; break;
case "Fly": transO = Fly; break;
case "Iris": transO = Iris; break;
case "Photo": transO = Photo; break;
case "PixelDissolve": transO = PixelDissolve; break;
case "Rotate": transO = Rotate; break;
case "Squeeze": transO = Squeeze; break;
case "Wipe": transO = Wipe; break;
case "Zoom": transO = Zoom; break; }
for (j = 0; j < tweenL.selectedIndices.length; j++) {
switch (tweenL.selectedItems[j].label) {
case "None": tweenO = None; break;
case "Regular": tweenO = Regular; break;
case "Strong": tweenO = Strong; break;
case "Back": tweenO = Back; break;
case "Elastic": tweenO = Elastic; break; }
TransitionManager.start(plane, {type : transO, direction : fadeL.selectedIndex, easing : tweenO[easeL.selectedItem.label], duration : durationS.value, dimension : dimensionL.selectedIndex, numStrips : numStrips.value, xSections : xSect.value, ySections : ySect.value, ccw : ccwL.selectedItem.label == "False", degrees : degrees.value, startPoint : startL.selectedIndex + 1, shape : Iris[shapeL.selectedItem.label]});
}
}
}

}

}