In this example we use the TransitionManager class in conjunction with the custom ImageLoader class that was discussed in the tutorial, Loading Images and Spinning Them in 3D in Terms of AS3 Custom Classes - Take 2, found in the Bridging the Gap section of the flashandmath site.
The application below shows a basic "Slide Show" structure with DissolvePixel transitions between slides. The names of the image files and the title/information text are provided in the external data file, slides.xml.
We note that this application is not intended to be a robust Flash component. We have kept the functionality minimal in order to highlight the various ideas in the program. Clearly more control over particular transitions (both "in" and "out") and more flexibility in slide controls, size of images, etc. can be added.
Download
To work with the example above, you will need to download the well-commented fla file. You will also need in the same directory the file ImageLoader.as so that the custom ImageLoader class will work correctly. In order to use the slide show, you will need a set of image files whose locations and names are specified in the slides.xml file. The pictures from the slide show above are included for your convenience.
Download all of the files listed below in the compressed folder slideshow.zip, or pull down the individual files from the list below.
- Flash CS3 file: slideshowXML.fla
- ActionScript 3 class file: ImageLoader.as
- XML data file for the example above: slides.xml
- Image files for the example above: pic1.jpg, pic2.jpg, pic3.jpg, pic4.jpg, pic5.jpg, pic6.jpg, pic7.jpg, pic8.jpg.
The Code
The import statements are needed for TransitionManager and all possible options.
import fl.transitions.*;
import fl.transitions.easing.*;
The first two lines below comprise variable declarations for info that will come from xml data file, and the final three lines take care of other global variables used.
var arrImgURLs:Array = new Array();
var stTitle:String;
var numImages:Number;
var index:Number = 0;
var arrClips:Array;
We construct a loader for the XML file along with the functions to be run if there is an IO error and (if not) when the loading is complete. Note that when the XML loading is complete, we automatically start loading the image files using the custom ImageLoader class.
var xmlLoader:URLLoader = new URLLoader(new URLRequest("slides.xml"));
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);
xmlLoader.addEventListener(Event.COMPLETE, initData);
// To respond correctly to an IO error, we simply put an appropriate message on the screen.
function noFile(evt:IOErrorEvent):void {
MsgBox.text = "XML file not found.";
}
// The initData function puts the Title information and the names of the image files into the
// stTitle variable and the arrImgURLs array. Finally we call the custom ImageLoader class to
// load all of the images.
function initData(evt:Event):void {
var dataXML:XML = XML(xmlLoader.data);
var j:int;
stTitle = dataXML.settings.@titleinfo.toString();
numImages = dataXML.slide.length();
for (j=0; j<numImages; j++) {
arrImgURLs[j] = dataXML.slide[j].@filename.toString();
}
imgLdr.loadImgs(arrImgURLs);
}
Next we construct an instance of the ImageLoader class, with appropriate behavior for file IO issues as well as a function (allLoaded) to be run when the loading is complete. The allLoaded function must attach the loaded image data to MovieClips in an array since a transition manager applies to MovieClips. Note: To use the ImageLoader class, the file ImageLoader.as must be in the same directory as this fla file.
var imgLdr:ImageLoader = new ImageLoader();
imgLdr.addEventListener(ImageLoader.LOAD_ERROR,errorLoading);
imgLdr.addEventListener(ImageLoader.IMGS_LOADED,allLoaded);
// Respond correctly to an IO error that results from trying to load the image files.
function errorLoading(e:Event):void {
MsgBox.visible=true;
MsgBox.text="There has been an error loading images. The server may be busy. Try refreshing the page.";
}
// To use the transition class, we must add the loaded images as Bitmaps onto MovieClips.
// We hold the MovieClips in the array arrClips.
function allLoaded(e:Event):void {
var thisBMap:Bitmap;
arrClips = new Array();
numImages = imgLdr.bitmapsArray.length;
for (var i=0; i<numImages; i++) {
thisBMap = new Bitmap( imgLdr.bitmapsArray[i].bitmapData );
arrClips[i] = new MovieClip();
arrClips[i].addChild(thisBMap);
arrClips[i].x = 150;
arrClips[i].y = 25;
}
addChild(arrClips[0]);
txtCounter.text = "Slide 1 of " + String(numImages) + ".";
txtTitleInfo.text = stTitle;
}
The listeners and functions below move forward and back through the clips with appropriate changes to the displayed text. For each slide we use a PixelDissolve "transition in" and no "transition out" (as we did in the first example for this tutorial).
btnForward.addEventListener(MouseEvent.MOUSE_DOWN, stepForward);
function stepForward(mevt:MouseEvent):void {
removeChild(arrClips[index]);
index = index + 1;
if (index > (numImages - 1)) {
index = 0;
}
txtCounter.text = "Slide " + String(index+1) + " of " + String(numImages) + ".";
addChild(arrClips[index]);
TransitionManager.start(arrClips[index], {type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeOut, xSections:50, ySections:50});
}
btnBack.addEventListener(MouseEvent.MOUSE_DOWN, stepBack);
function stepBack(mevt:MouseEvent):void {
removeChild(arrClips[index]);
index = index - 1;
if (index < 0) {
index = arrClips.length - 1;
}
txtCounter.text = "Slide " + String(index+1) + " of " + String(numImages) + ".";
addChild(arrClips[index]);
TransitionManager.start(arrClips[index], {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeOut, xSections:50, ySections:50});
}
The interested reader might like to add "out transitions" to the slide show. This can be done by emulating the second example in this tutorial. Another common feature for a slide show is the ability to "play" it all the way through without mouse clicks. This can be accomplished with a straightforward use of the Timer class or the ENTER_FRAME event.
