Simple AS3 Slideshow Widget: Part 3

This is the final post in a three part tutorial detailing the creation of a Flash slideshow widget using ActionScript 3.0. Have a look over Part 1 and Part 2 before moving ahead.

In this post, we are examining the two methods which actually handle image loading and display within our module.

private function switchImage(e:TimerEvent):void {
	imageBitmapData.draw(this);
	imageBitmap.bitmapData = imageBitmapData;
	imageBitmap.alpha = 1;
	if(currentImage < imageArray.length-1){
		currentImage++;
	}else{
		currentImage = 0;
	}
	urlRequ.url = appPath + "path/to/images/" + imageArray[currentImage];
	imageLoader.load(urlRequ);
}

"switchImage" is invoked by the Timer we established previously. The function this method is to set up our eventual transition from one image to the next, grab the next image from our Array and begin to load it into our Loader instance on the Stage, and keep track of what position we are at in our Array. To accomplish this, we first "draw()" the entire Stage to our "imageBitmapData" instance. This data is then assigned to the "imageBitmap" bitmapData property, effectively duplicating the visible data within our Loader instance. This switch from Loader to Bitmap is in no way apparent to the viewer. We also switch the alpha property of out Bitmap to 1, ensuring that it is completely visible.

We then manage our "currentPosition" variable by checking the current value against the Length of the Array. If we have reached the end, we simply revert to a value of "0" causing an infinite loop.

All we have to do then is change the "url" property of our URLRequest object and then invoke another load() upon "imageLoader".

private function imageLoaded(e:Event):void {
	imageTween = new Tween(imageBitmap, "alpha", Regular.easeIn, 1, 0, 2, true)
}

This is the last method we have in our little widget. "imageLoaded" is fired by an Event.COMPLETE when a loading image is finally loaded up. At this point, we simply use Tweener to tween the alpha of our Bitmap (displaying the previous image) down to 0, revealing the freshly loaded image beneath.

I recommend using SWFObject to embed the module into your website.

Here is the full PHP code:

Here is the full ActionScript class:

package {
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	
	public class SlideShow extends Sprite {
		private var appPath:String;
		private var imgDur:int;
		private var currentImage:int;
		private var urlRequ:URLRequest;
		private var urlLoad:URLLoader;
		private var imageArray:Array;
		private var imageBitmap:Bitmap;
		private var imageBitmapData:BitmapData;
		private var imageLoader:Loader;
		private var imageTimer:Timer;
		private var imageTween:Tween;
		
		public function SlideShow():void {
			if (root.loaderInfo.parameters.appPath != undefined) {
				appPath = root.loaderInfo.parameters.appPath;
			} else {
				appPath = "http://yourwebsite.com/";
			}
			if (root.loaderInfo.parameters.imgDur != undefined) {
				imgDur = root.loaderInfo.parameters.imgDur*1000;;
			} else {
				imgDur = 5*1000;
			}
			gatherFiles();
		}
		
		private function gatherFiles():void {
			urlRequ = new URLRequest();
			urlRequ.url = appPath + "gatherFrontImages.php";
			urlLoad = new URLLoader();
			urlLoad.dataFormat = flash.net.URLLoaderDataFormat.TEXT;
			urlLoad.addEventListener(Event.COMPLETE, urlComplete);
			urlLoad.load(urlRequ);
		}
		
		private function urlComplete(e:Event):void {
			imageArray = e.target.data.split(",");
			currentImage = imageArray.length-1;
			imageLoader = new Loader();
			imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			this.addChild(imageLoader);
			imageBitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
			imageBitmap = new Bitmap();
			this.addChild(imageBitmap);
			switchImage(new TimerEvent(TimerEvent.TIMER));
			imageTimer = new Timer(imgDur);
			imageTimer.addEventListener(TimerEvent.TIMER, switchImage);
			imageTimer.start();
		}
		
		private function switchImage(e:TimerEvent):void {
			imageBitmapData.draw(this);
			imageBitmap.bitmapData = imageBitmapData;
			imageBitmap.alpha = 1;
			if(currentImage < imageArray.length-1){
				currentImage++;
			}else{
				currentImage = 0;
			}
			urlRequ.url = appPath + "path/to/images/" + imageArray[currentImage];
			imageLoader.load(urlRequ);
		}
		
		private function imageLoaded(e:Event):void {
			imageTween = new Tween(imageBitmap, "alpha", Regular.easeIn, 1, 0, 2, true)
		}

	}
}