Now that we know how to load our data, we can know load also our pictures which is the next logic step in the process.  Let’s start a new Flash document and document class and apply the same setting than in the preceding section.

We start by importing a new class, the Loader class:

import flash.display.Loader;

And of course declare a variable to hold a Loader object:

private var picture_loader:Loader;

And in our completeHandler function we can instantiate it:

picture_loader = new Loader();

We use a loader object to load assets like pictures or swfs so that’s exactly what we’ll do here. Let’s give it a try. We use our XML data to pass a path to our Loader and then add the Loader to the stage:

picture_loader.load(new  URLRequest(xml_pictures.PICTURES.PICTURE_PATH[0].toString()));

Perfect, we now see the first picture! PICTURE_PATH[0] points to the first picture path in our XML data, PICTURE_PATH[1] would point to the second one and so on. We can also use this: PICTURE_PATH.length() to know how many pictures we are dealing with. You can see how easy is to work and access data with XML. Now we need a way to loop through the data and load a picture at a determined interval.


There’s many ways to do this, we could use an ENTER_FRAME event which would tie the slide show to the frame rate, we could also use a Timer which would give us more freedom, it is not very time accurate but we could improve it by using the getTimer() method. I chose the Timer for this tutorial.

We’ll store in a variable how many pictures we have and create also a variable to hold the time each picture will stay displayed, we also create an index variable that we use to pick up a picture path from the xml data, then finally we create a Timer to trigger the loading of picture at a regular interval, we of course import the Timer class

import flash.utils.Timer;//import the class
private var number_of_picture:uint;//will hold how many pictures we  have
private var current_index:uint;//used to pick a picture path
private  var display_time:Number;//how long should a picture stay on the  screen
private var display_timer:Timer;//used to time the dsiplaying of  pictures

Now we should set all these variables only once the XML data is available so we do this in the completeHandler function:

number_of_picture =  xml_pictures.PICTURES.PICTURE_PATH.length();
display_time = 5;//let's set it  to 5 for now
display_timer = new Timer(display_time*1000);//create our timer, 1000 is one second so display_time*1000 sets the timer to the right time

Now all we have to do is call a function to load our first picture and then let the timer call this same function at regular intervals to load the next pictures:

display_timer.addEventListener(TimerEvent.TIMER,  get_next_picture);

Now let’s write our get_next_picture function:

private function get_next_picture(e:TimerEvent = null):void{//set the event default value to null so we can call it without passing an event
if(current_index == number_of_picture){current_index = 0;}//if we looped through all picture paths we go back to 0 (first picture)
picture_loader = new Loader(); //create a new loader to hold our  picture
picture_loader.load(new URLRequest(xml_pictures.PICTURES.PICTURE_PATH[current_index].toString()));//load our picture using current_index
addChild(picture_loader);//display the  picture
current_index++;//increase the current_index so next time we run the  function it will load the next picture

Perfect! It shows all pictures one after another and cycle through. But there’s a lot of things not working well here. We never remove the pictures that are not displayed anymore so they keep adding on top of each other. Our Timer is not very accurate, it triggers the function at more or less 5 seconds so we should make it more accurate, the timer triggers the loading of the picture and not the displaying of the picture so if we really want the picture to show after 5 seconds we should load it first and then display it when the time comes. Let’s address all these issues one by one in the next page.