In this example we demonstrate our lack of creativity by using individual clips that do no more than explain the transition type and parameters needed to make a transition of the type that just happened. The six transition types (in the order of appearance below) are Wipe, Photo, Blinds, Iris, Fly, PixelDissolve and Zoom. You will notice that some (like Blinds, Iris, and PixelDissolve) require extra parameters. For each, the duration attibute is a time in seconds that the transition takes to complete. The easing attribute can easily be set to anything you like (see the help file for fl.transitions.easing to see your choices) -- obviously, None indicates that we are not using easing at all in the transitions shown here.
Download
Download the well-commented fla file for the swf displayed above.
- Flash CS3 file transitionsEZ.fla
The Code
It is important to notice how the stage is set up in the fla file before reading the code. Within the Flash authoring environment we constructed on the stage several movieclips by drawing a rectangle, adding static text (conveying information about the transition), converting it to movieclip symbol, and setting the Linkage property so that the library object can be instantiated in the script. Open the transitionsEZ.fla file and look at the library (Ctrl+L) to see the result of this process. To see more about setting "Linkage" for a library object, see the tutorial "Drawing with the Mouse in ActionScript 3..." in the Basic section of this site.
All of our examples require the following two import statements. These will allow us to create all types of TransitionManager types in our script and allow them use fancy easing functions for starting and/or stopping.
import fl.transitions.*;
import fl.transitions.easing.*;
The variable arrSlides will be an array of movie clips that we created directly in the library (and linked) for this demonstration.
var arrSlides:Array = new Array(7);
arrSlides[0] = new IntroClip();
arrSlides[1] = new Slide0Clip();
arrSlides[2] = new Slide1Clip();
arrSlides[3] = new Slide2Clip();
arrSlides[4] = new Slide3Clip();
arrSlides[5] = new Slide4Clip();
arrSlides[6] = new Slide5Clip();
Each clip will have its upper left corner at (50,50).
for (var i=0; i<arrSlides.length; i++) {
arrSlides[i].x = 50;
arrSlides[i].y = 50;
}
Declare global variables. Note that tMgr does not really need to be global here, but it will be in our improved version on the next page. The variable index will keep track of which clip (i.e., which element of arrSlides) is currently being displayed.
var tMgr:TransitionManager;
var index:int = 0;
Place first (IntroClip) clip on the stage.
addChild(arrSlides[index]);
Button btnNext will trigger the goNext function. Documentation of the goNext function is given through comments within the code below.
btnNext.addEventListener(MouseEvent.CLICK, goNext);
function goNext(me:MouseEvent):void {
// Get rid of the previous slide
removeChild(arrSlides[index]);
// Increment slide index with appropriate "wrap-around."
// Note that we never show slide 0 (IntroClip) again.
index++;
if (index == arrSlides.length) {
index = 1;
}
// Set up TransitionManager for the current slide and add the slide to the stage
tMgr = new TransitionManager(arrSlides[index]);
addChild(arrSlides[index]);
// Each slide will use a different type of transition, depending on the index value.
// Look at the help files for the particular transition type to read more about its parameters.
switch (index) {
case 1: {
tMgr.startTransition({type:Wipe, direction:Transition.IN, duration:3, easing:None.easeOut});
break;
}
case 2: {
tMgr.startTransition({type:Photo, direction:Transition.IN, duration:0.5, easing:None.easeOut});
break;
}
case 3: {
tMgr.startTransition({type:Blinds, direction:Transition.IN, duration:3, easing:None.easeOut, numStrips:20, dimension:0});
break;
}
case 4: {
tMgr.startTransition({type:Iris, direction:Transition.IN, duration:2, easing:None.easeOut, startPoint:5, shape:Iris.CIRCLE});
break;
}
case 5: {
tMgr.startTransition({type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeIn, xSections:40, ySections:40});
break;
}
case 6: {
tMgr.startTransition({type:Zoom, direction:Transition.IN, duration:1, easing:None.easeOut});
break;
}
default: {
break;
}
}
}
On the next page, we repeat this same idea but we add a "transition out" for each slide. This requires that we use two undocumented events (allTransitionsInDone and allTransitionsOutDone) that tell us when one transition is complete before allowing the next transition to begin.
