Creating an XML Slideshow in Flash Using AS3

By Riyadh Al Balushi | Flash CS4 | ActionScript 3.0| Intermediate | Page 1, 2, 3, 4, 5, 6

In the previous section of the tutorial we downloaded all of our images and stored them inside an array. In this section we are going to create a number of display containers to which an image will be added to in order to be visible on the screen. The commands to display an image on the screen will be placed inside a function called nextImage(). This function will be called repeatedly using a Timer.

Here is the basic outline of this section:

  1. Creating the Container.
  2. Creating the nextImage() Function.
  3. Creating the Timer

Creating the Necessary Containers

The first step in displaying our images would require us to create a number of containers to host the contents on the stage. This is a necessary step in order to make it easily to manipulate all of our slideshow in an organized manner if we wish to do that. We need a main container for the slideshow, inside this container we will have a separate container for the actual images, and another for the text labels which we will be adding at a later stage.

These containers must remain permanently, so we must define them outside any function. Do that at the top of your code:

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_loaders_array:Array = [];
var my_success_counter:Number = 0;

var my_slideshow:Sprite = new Sprite();
var my_image_slides:Sprite = new Sprite();

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
my_xml_loader.addEventListener(Event.COMPLETE, processXML);

Now back to your startShow() function, use the addChild() method to add these Sprites to the display list:

function startShow():void{

addChild(my_slideshow);
my_slideshow.addChild(my_image_slides);

}
You can learn more about the AS3 Display List by reviewing our tutorial on this topic.

Our images will be placed inside the my_image_slides container. We are going to add the first image in this container next.

Creating the nextImage() Function

The nextImage() function will retrieve the necessary image to display from the loaders array and then display it on the screen. In order to track which image is actually currently on the screen, we need to create a variable counter to do this. Again, at the top of your code, define this variable. The initial value of it is zero - which refers to the first image in the array of loaders:

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_loaders_array:Array = [];
var my_success_counter:Number = 0;
var my_playback_counter:Number = 0;

var my_slideshow:Sprite = new Sprite();
var my_image_slides:Sprite = new Sprite();

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
my_xml_loader.addEventListener(Event.COMPLETE, processXML);

We can now create the nextImage() function which will use the my_playback_counter to retrieve the relevant loader and add it to the display list. Type this at the bottom of your code:

function nextImage():void{

var my_image:Loader = Loader(my_loaders_array[my_playback_counter]);
my_image_slides.addChild(my_image);

}

You can call this function from within your startShow() function to have the first image displayed when the show starts.

function startShow():void{

addChild(my_slideshow);
my_slideshow.addChild(my_image_slides);

nextImage();

}

For the first time in this tutorial you can now test your movie (Window>Text Movie) to see your first image display on the screen!

AS3 Slideshow Tutorial

We need our nextImage() function to also center this image on the screen. We can do this by using a very simple formula that uses the width of the image and the width of the stage to determine the right place to position the image to appear in the middle. The same concept is applied to the vertical position as well:

function nextImage():void{

var my_image:Loader = Loader(my_loaders_array[my_playback_counter]);
my_image_slides.addChild(my_image);
my_image.x = (stage.stageWidth - my_image.width)/2;
my_image.y = (stage.stageHeight - my_image.height)/2;

}

We can make our image fade instead of just popping up by using the Tween Class. However, before we use this class we must import the necessary classes for it by using the import command at the beginning of our code:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

Once you do that you can use a simple Tween to animate the alpha property of your image this way:

function nextImage():void{

var my_image:Loader = Loader(my_loaders_array[my_playback_counter]);
my_image_slides.addChild(my_image);
my_image.x = (stage.stageWidth - my_image.width)/2;
my_image.y = (stage.stageHeight - my_image.height)/2;
new Tween(my_image,"alpha",Strong.easeOut,0,1,1,true);

}
You can learn more about the AS3 Tween Class by reviewing our tutorial on this topic.

You can test your movie again to see your first image appear smoothly instead using the Tween.

This method should be sufficient for us to load any image, we just need to execute it repeatedly using the Timer Class while updating our counter. We are going to do this next.

Using the Timer

In order to have our slideshow run, we need to use the Timer Class to have the code executed repeatedly. Our timer will be responsible for the task of updating our playback counter and then call the nextImage() function show the next image.

We need to be able to use our Timer throughout the show, so we need to have its variable defined at the top of our code:

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_loaders_array:Array = [];
var my_success_counter:Number = 0;
var my_playback_counter:Number = 0;

var my_slideshow:Sprite = new Sprite();
var my_image_slides:Sprite = new Sprite();

var my_timer:Timer;

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
my_xml_loader.addEventListener(Event.COMPLETE, processXML);

We can now configure our Timer from our startShow() function. We are going to set the speed at which the Timer intervals are triggered when instantiating the class. We are have this speed stored in the my_speed variable. The Timer receives its speed in milliseconds, so we have to multiply our speed value by a 1000:

function startShow():void{

addChild(my_slideshow);
my_slideshow.addChild(my_image_slides);

nextImage();

my_timer = new Timer(my_speed*1000);

}
You can learn more about AS3 Timer Class by reviewing our tutorial on this topic.

Our timer will run its code through a separate event listener which we will register it with. We are going to define this listener function later.

function startShow():void{

addChild(my_slideshow);
my_slideshow.addChild(my_image_slides);

nextImage();

my_timer = new Timer(my_speed*1000);
my_timer.addEventListener(TimerEvent.TIMER, timerListener);

}

Finally, we need to start the Timer by using the .start() method:

function startShow():void{

addChild(my_slideshow);
my_slideshow.addChild(my_image_slides);

nextImage();

my_timer = new Timer(my_speed*1000);
my_timer.addEventListener(TimerEvent.TIMER, timerListener);
my_timer.start();

}

Our Timer should now start when we test the movie, but we have not yet specified the code that the Timer will execute repeatedly. This will be defined in the timerListener() function. Create this function at the bottom of your existing code:

function timerListener (e:TimerEvent):void{

}

The Timer listener will have two main tasks, the first is to increase the value of the my_playback_counter variable by 1 so that the slideshow moves forward, and then call the nextImage() function to actually show the next image:

function timerListener (e:TimerEvent):void{

my_playback_counter++;
nextImage();

}

You can test your movie (Window>Test Movie) now to see that your slideshow works showing the images in order with a 1 second interval! However, you will also notice that the slideshow gets stuck after showing the final image and a number of errors appear. This occurs because the value of your playback counter eventually exceed the number of images in the slideshow. To amend this we can use a conditional to make sure the counter goes back to zero when it reaches the maximum number of images in the show:

function timerListener (e:TimerEvent):void{

my_playback_counter++;
if (my_playback_counter == my_total){
my_playback_counter =0;
}
nextImage();

}
You can learn more about AS3 Conditionals by reviewing our tutorial on this topic.

That should do it! Test your movie now to see your images looping!

The animation should be smooth if you are using images of the same size, if you are using images of different sizes it might not look as nice, but we will deal with that later.

In the next section we will display the text label for each slide as it appears.

Summary of This Page

  1. Created a Sprite Container for our slideshow.
  2. Created a nextImage() function show an image on the screen.
  3. Created a Timer instance to execute the nextImage() function repeatedly.

In the next page of our tutorial we will display the labels for each slide.

Next Page