Scripting Transitions with the Transition Manager

 

PREFACE:
I have noticed in the many Flash forums I frequent, recently there has been an interest in using actionscript to create the transition effects normally achieved using screens/slides in Flash MX 2004 (Professional version). Since this seemed a natural progression from the last tutorial I wrote regarding Flash's Tween and Easing classes (which may come in useful for explaining types of easing available for transitions), I decided to play along. You'll find this is more documentation than tutorial, though, as once the constructor and available parameters are understood, the rest is easy as pie (from the Maori word "pai" meaning "good" for you etymology fans out there). Flash developers may find this information particularly useful as it allows very nice transitional effects to be applied to any movie clip without using screens, slides, behaviors, or timeline effects and without much actionscript.

AVAILABLE TRANSITIONS:
Here is a list of the transitions available for use and a brief description of each. Keep in mind that each transition may be used for "in" (to make a movie clip appear), or out (making the movie clip disappear).

Here is a quick visual example of each (set to transition in):


CONSTRUCTING THE TRANSITION MANAGER:

When instantiating the transition manager, the movie clip to be transitioned must be specified as follows: 

var myTM:mx.transitions.TransitionManager = new mx.transitions.TransitionManager(contentClip_mc);
Or, to save a little typing, the entire contents of the mx.transitions class folder may be imported into the movie. This will add a little extra k to the size of your final .swf, but if you plan on using more than one type of transition, it will pay off in the long run. An example of this method would look like this: 
import mx.transitions.*; 
var myTM:TransitionManager = new TransitionManager(contentClip_mc);

 

GETTING THE TRANSITION STARTED:

Immediately following instantiation, the transition should be whipped into action using the startTransition() method as so:

myTM.startTransition(transParams_obj);

where "transParams" is an object containing all the transition parameters to be applied. Which naturally segues into:

The transParams Object and its Properties:

The transParams object is the heart of the transition manager class as it tells each transition how to behave and what to do. Each type of transition has specific properties governing its behavior all of which are included the transParams object. The following is a list of possible object properties and which types of transitions to use them with:

So, with all that in mind, a complete script for a Blinds transition (in) may look like this, for an example: 

import mx.transitions.*;
var myTransParams:Object = new Object({type:Blinds, numStrips:15, dimension:1, direction:0, duration:1, easing:easing.Strong.easeOut});
var myTM:TransitionManager = new TransitionManager(myClip_mc);
myTM.startTransition(myTransParams);

And that is really all there is to it.

KNOWING WHEN IT'S DONE:

Often you'll find it useful to know when the transition is complete. For this reason, the transition manager class utilizes Flash's event dispatcher to broadcast two events (depending on the direction of the transition). The two broadcast events are, reasonably enough, "allTransitionsInDone" and "allTransitionsOutDone". To make use of these dispatched events, a listener object must be created and added as an event listener to the transition manager. Here is an example:

var myListener:Object = new Object();
myListener.allTransitionsInDone = function() {
 	trace("all transitions in done");
};
var myTM:TransitionManager = new TransitionManager(myClip_mc);
myTM.addEventListener("allTransitionsInDone", myListener);
myTM.startTransition({type:Blinds, numStrips:15, dimension:0, direction:0, duration:1, easing:easing.Strong.easeOut});


PUTTING IT ALL TOGETHER:

Now that we know how to construct, start and calculate the end of a transition, let's put it together and make something marginally useful. Here is a quick image viewing application which will create random transitions between photographs:

And the complete script for the above example:

import mx.transitions.*;
var picArray:Array = new Array("pics/pic1.jpg", "pics/pic2.jpg", "pics/pic3.jpg", "pics/pic4.jpg", "pics/pic5.jpg", "pics/pic6.jpg");
var transArray:Array = new Array(Blinds, Iris, Photo, PixelDissolve, Zoom);
function setUpButtons():Void {
	for (var i = 0; i < picArray.length; i++) {
		var tempMC:MovieClip = this["b" + i];
		tempMC.pic = picArray[i];
		tempMC.onRelease = function() {
			transOut(this.pic);
			this.nextFrame();
		};
	}
}
function loadPic(pic:String):Void {
	attachMovie("pls", "pls", getNextHighestDepth(), {_x:315, _y:200});
	loader_mc.loadMovie(pic);
	counter_mc = createEmptyMovieClip("c", getNextHighestDepth());
	counter_mc.onEnterFrame = function() {
		pls.perc_txt.text = Math.round((this._parent.loader_mc.getBytesLoaded() / this._parent.loader_mc.getBytesTotal()) * 100);
		if (this._parent.loader_mc.getBytesLoaded() > 10 && this._parent.loader_mc.getBytesLoaded() == this._parent.loader_mc.getBytesTotal()) {
			delete this.onEnterFrame;
			pls.removeMovieClip();
			this._parent.loader_mc._visible = false;
			transIn();
		}
	};
}
function transIn():Void {
	var transType:Transition = transArray[Math.floor(Math.random() * transArray.length)];
	var myTM:TransitionManager = new TransitionManager(loader_mc);
	myTM.startTransition({type:transType, direction:0, duration:1, shape:"CIRCLE", startPoint:2, xSections:30, ySections:20, dimension:0, easing:easing.Strong.easeOut, shape:"CIRCLE"});
}
function transOut(pic:String):Void {
	if (loader_mc.getBytesTotal() > 23) {
		var myListener:Object = new Object();
		myListener.allTransitionsOutDone = function() {
			loadPic(pic);
		};
		var transType:Transition = transArray[Math.floor(Math.random() * transArray.length)];
		var myTM:TransitionManager = new TransitionManager(loader_mc);
		myTM.addEventListener("allTransitionsOutDone", myListener);
		myTM.startTransition({type:transType, direction:1, duration:1, shape:"CIRCLE", startPoint:2, xSections:30, ySections:20, dimension:0, easing:easing.Strong.easeOut, shape:"CIRCLE"});
	} else {
		loadPic(pic);
	}
}
setUpButtons();

AND FINALLY:

Some final thoughts: