Actionscript 3 XML Slideshow UPDATE

Note - I also posted a blog entry on making a slideshow with back/next buttons and individual buttons that can be found here.

Updates include:

• a preloader movieclip,
• ignore the image file if the path is not defined correctly or the image cannot be found,
• once the image is loaded, the image is cast as bitmap data object, and bitmap data smoothing is applied,
• and now the images will be chosen in a random order, and will only repeat once all images have been seen.

Once again source code (heavily commented) and example is posted below. Let me know if you have any updates, feature requests, or you want me to post the .fla file.

XML Slideshow Viewer

Download the .fla
**Note you need to download and unpack the tweenlite tweening library separately. The gs folder should be in the same directory as the .fla.

Actionscript:

import gs.*;

//hides the description box until the image is loaded
//hides the image until it is loaded
infoBox.alpha=0;
theImage.alpha=0;
loadingBar.visible = false;

//variables to hold the final coordinates of the image tween
var finalX:Number;
var finalY:Number;

//variable to hold the number of images in the XML
var listLength:Number;

//keeps track of what image should be displayed
var currPainting:Number=0;

//arrays to hold the contents of the XML, using this to allow
//for the random order of the images
var imageArray:Array = new Array();
var painterArray:Array = new Array();
var titleArray:Array = new Array();
var dateArray:Array = new Array();

//Loader event for the XML
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

var xml:XML;

loader.load(new URLRequest("paintings.xml"));

function onLoaded(e:Event):void {
	//load XML
	xml=new XML(e.target.data);
	var il:XMLList=xml.images;
	listLength=il.length();
	
	populateArray();
}

function populateArray():void {
	//takes the properties defined in the XML and stores them 
	//into arrays
	var i:Number;
	for (i = 0; i < listLength; i++) {
		imageArray[i]=xml.images[i].pic;
		titleArray[i]=xml.images[i].title;
		painterArray[i]=xml.images[i].painter;
		dateArray[i]=xml.images[i].date;
	}
	beginImage();
}

function beginImage():void {
	//grabs a random number between 0 and the number
	//of images in the array
	currPainting=Math.floor(Math.random()*imageArray.length);
	trace("currPainting = " + currPainting);

	//load description
	infoBox.theArtist.text=painterArray[currPainting];
	infoBox.theTitle.text=titleArray[currPainting];
	infoBox.theDate.text=dateArray[currPainting];

	theImage.scaleX=1;
	theImage.scaleY=1;

	var imageLoader = new Loader();

	//catches errors if the loader cannot find the URL path
	imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, catchFunction);
	//actually loads the URL defined in the image array
	imageLoader.load(new URLRequest(imageArray[currPainting]));
	//adds a listener for while the image is loading
	imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgLoading);
	//adds a listener for what to do when the image is done loading
	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);


	function catchFunction(e:IOErrorEvent) {
		trace("Bad URL: " + imageArray[currPainting] + " does not exist");
		//take out the bad URL from the array
		imageArray.splice(currPainting,1);
		titleArray.splice(currPainting,1);
		painterArray.splice(currPainting,1);
		dateArray.splice(currPainting,1);

		//check to see if there are images left,
		//else restart the slideshow
		if (imageArray.length==0) {
			populateArray();
		} else {
			beginImage();
		}
	}
	
	function imgLoading(event:ProgressEvent):void{
		//show the loading bar, and update the width
		//based on how much is loaded
		loadingBar.visible = true;
		loadingBar.bar.width = (event.bytesLoaded/event.bytesTotal)*100;
	}

	function imgLoaded(event:Event):void {
		loadingBar.visible = false;
		
		//add the image and get the dimensions to center the image
		theImage.addChild(imageLoader);
		theImage.x = (stage.stageWidth/2) - (imageLoader.content.width / 2);
		theImage.y = (stage.stageHeight/2) - (imageLoader.content.height / 2);

		finalX = (stage.stageWidth/2) - (imageLoader.content.width * .8 / 2);
		finalY = (stage.stageHeight/2) - (imageLoader.content.height * .8 / 2);

		//start tween function
		easeIn();
	}
}



function easeIn():void {
	TweenLite.to(theImage, 8, {scaleX:.8, scaleY:.8, x:finalX, y:finalY, onComplete:hideStuff});
	TweenLite.to(theImage, 1, {alpha:1, overwrite:0});
	TweenLite.to(infoBox, 1, {alpha:1, delay:5});
}

function hideStuff():void {
	TweenLite.to(theImage, 1, {alpha:0, onComplete:nextImage});
	TweenLite.to(infoBox, 1, {alpha:0});
}

function nextImage():void {
	//take out the image that was just displayed
	imageArray.splice(currPainting,1);
	titleArray.splice(currPainting,1);
	painterArray.splice(currPainting,1);
	dateArray.splice(currPainting,1);

	//remove the picture
	theImage.removeChildAt(0);

	//start over
	if (imageArray.length==0) {
		populateArray();
	} else {
		beginImage();
	}
}

XML

<xml>
        <images>

                <pic>../files/slideshow/ad_reinhardt_abstract_34.jpg</pic>
		<painter>Ad Reinhardt</painter>
		<title>Abstract Painting #34</title>
		<date>1960 (1964)</date>

        </images>

        <images>

		<pic>../files/slideshow/agnes_martin_white_flower.jpg</pic>
		<painter>Agnes Martin</painter>
		<title>White Flower</title>
		<date>1960 (1960)</date>

        </images>

        <images>

		<pic>../files/slideshow/agnes_martin_untitled_6_1989.jpg</pic>
		<painter>Agnes Martin</painter>
		<title>Untitled 6</title>
		<date>1990 (1989)</date>

        </images>
</xml>