This example uses the same idea as the previous one, but here we listen for each transition to be "done" before starting the next transition. To emphasize the effect, we transition each slide "out" using an Iris type transition before transitioning the next slide in. Moreover, we hide the "Next" button during the transition so the user cannot go to the next slide before the incoming transition is complete.
This example uses the events "allTransitionsInDone" and "allTransitionsOutDone", which appears in the AS2 documentation but not in AS3. We are grateful to Adobe for providing the Live Docs site where this sort of thing is discussed. For the full, most-current discussion, see http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/transitions/TransitionManager.html.
Download
Download the well-commented fla file for the swf displayed above.
- Flash CS3 file transitions.fla
The Code
The library for this application contains the same movieclips as the tranistionsEZ.fla file from the previous example. The previous page contains more about the process of putting these movieclips in the library with appropriate linkage properties.
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 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 upper left corner at (50,50)
for (var i=0; i<arrSlides.length; i++) {
arrSlides[i].x = 50;
arrSlides[i].y = 50;
}
Declare the global variables.
var index:int = 0;
var tMgr:TransitionManager;
Place first (IntroClip) clip on the stage.
addChild(arrSlides[index]);
Button btnNext will trigger the goNext function.
btnNext.addEventListener(MouseEvent.CLICK, goNext);
The goNext function makes the NEXT button invisible and then "transition out" the current slide. The nextTransition function, which will show the next slide, is called only when the "transition out" has completed.
function goNext(me:MouseEvent):void {
btnNext.visible = false;
tMgr = new TransitionManager(arrSlides[index]);
tMgr.startTransition({type:Iris, direction:Transition.OUT, duration:2, easing:Regular.easeOut});
tMgr.addEventListener("allTransitionsOutDone", nextTransition);
}
The nextTransition function removes the current slide, increments the index, and starts the transition for the next slide. A listener for the completion of the "transition in" is registered so that we can bring back the NEXT button when the transition is complete. Further explanation is provided through comments within the code below.
function nextTransition(e:Event):void {
tMgr.removeEventListener("allTransitionsOutDone", nextTransition);
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 it to the stage.
// When "transition in" is complete, call makeBtnVisible to make the NEXT button visible again.
tMgr = new TransitionManager(arrSlides[index]);
tMgr.addEventListener("allTransitionsInDone", makeBtnVisible);
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;
}
}
}
The simple function to bring back the NEXT button when the "transition in" is complete.
function makeBtnVisible(e:Event):void {
btnNext.visible = true;
}
On the next page, we make a slideshow from external image files using a transition between slides.
