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, the source code (heavily commented) and example is posted below.

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

View

XML Slideshow Viewer

Download

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>