Simple AS3 Slideshow Widget: Part 2

In Part 1, we had a look at the basic structure of what we are working toward, including a PHP file to read images from a directory and return a list of images to Flash, the setup of our FLA, and the basic construction of our document class. This widget, being so simple, will only require the document class.

We will now go through each method and describe what is happening…

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();
}

There are a few things to set up in our constructor function. These values can be passed in through flashvars or hard-coded into your class. We are being super flexible and allowing the user to input these values upon embed. For a short explanation of what is going on here, have a look at my previous post.

We now assign values to the “appPath” and “imgDur” variables. “appPath” is simply the path to our actual application or website. We will use this to construct both calls to the PHP file and also the images themselves. “imgDur” is a setting that specifies how long each image should persist on the screen before fetching another. We then call “gatherFiles()” after these values are established.

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;

As we step through this and encounter new variables, they will of course need to be defined and datatyped properly at the beginning of our class. We will also need to import any other classes we need within our package. The full list of import statements and variable declarations is included here for the sake of overview.

An important thing to note here, is that we are importing classes that are native to Flash, but are also importing the excellent “Tweener” packages which can be found at Google Code. You could use the build in tween classes, but Tweener is a lot more flexible and provides much more control.

Now, on to our data loading methods!

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);
}

Our goal with this method is to create a connection to the PHP file and establish a handler for the results. In order to do this, we will use the “URLLoader” class. URLLoader has a method called “load” which requires a “URLRequest” object. URLRequest has a “url” property which we set using a combination of the “appPath” variable defined upon initialization and the location and name of our PHP file. We also set the “dataFormat” property of the URLLoader to “flash.net.URLLoaderDataFormat.TEXT”. This will ensure that the data we receive is properly interpreted as text. Finally, we add an event listener to watch for an “Event.COMPLETE” to our URLLoader and invoke the “load()” method.

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();
}

“urlComplete” is the method that fires off once our URLLoader request is returned to Flash. We are doing four main things here for the final setup of our slideshow.

1. First, we use the “split()” method to assign each file name to an Array called “imageArray”. We access the returned data (comma-delimited string) through the data property of the event target. The “currentImage” variable keeps track of which image is being displayed later on. We now set this to the Array length minus one. This provides us with the final index of our Array.
2. Next, we will set up our display objects and add them to the display list. We create a Loader instance “imageLoader” to hold our loaded image and display it upon the Stage. We also add an event listener to the “contentLoaderInfo” property of our Loader instance. This will enable us to detect when the load has completed so that we can safely display the next image.
3. Similar to the Loader instance, we now create a new BitmapData object “imageBitmapData” matching the size of our Stage. This will be used later on during image transitions and will feed a Bitmap object “imageBitmap” that we now create and add to the Stage.
4. Finally, we set up a Timer to run based off of the “imgDur” variable set upon initialization. We just need to add an event listener to the Timer to handle each new image load and then invoke the “start()” method to get things rolling. Note that I am also manually triggering the “switchImage” method so we do not have to wait a full tick before our first image is shown.

Now we have our data imported and arranged nicely. Our structures and display list are all established. Everything is set up to begin actually displaying these images upon the Stage. In Part 3, we will examine the two remaining methods and have a look at the full, completed class structure.