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

The next step in our project is to add the text labels fore each. This process is very similar ot showing the image, we need to create multiple instances of the TextField Class for each labeel, we need store them in a separate array, create a separate container to display them, and then use the same nextImage() function to display on the screen.

Here is the basic outline of this section:

Creating the textfields for the labels, retrieving label values, and adding them to an array.
Creating the labels container.
Displaying the labels using the nextImage() function.

Creating the TextFields, Retrieving the Labels, and Adding then to an Array

We are going to create a separate textfield for each label, set the text of that textfield to the label, and then add it to a separate array to be able to refer to them easily. We can do this by using our existing loadImages() function as that function cycles through the XML elements using the loop.

Start off by creating a new textfield instance called my_label:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

var my_url:String = my_images[i].@URL;
var my_loader:Loader = new Loader();
my_loader.load(new URLRequest(my_url));
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
my_loaders_array.push(my_loader);

var my_label:TextField = new TextField();

}
}

You can now retrieve the label of each our images by using the @ operator to retrieve the value of the TITLE attribute and directly set it as the value for the .text property of the textifield:

We now need to configure our textfield to accommodate any label size by using the .autoSize property to make our textfield expand automatically:

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

Our final step here is to add our textfield to an specific array for our labels. We need this array to be able to easily refer to our labels later. Create this array first at the top of your code so that it remains in a permanent reference:

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

var my_loaders_array:Array = [];
var my_labels_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 easily insert our labels in this array by using the .push() method:

That should do it. We will create the display container next.

Creating the Display Containers for the Labels

We need a separate container for our labels so to have an organized structure for our visual objects. We have one for our images and we need another one for our text labels. Simply define one 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_labels_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_label_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 add this to the display list by using the .addChid() method in our startShow() function:

function startShow():void{

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

nextImage();

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

}

That should do it. We now need to actually add specific labels in turn using the nextImage() function.

Displaying the Labels on the Screen

Displaying the labels on the screen will be done in the same exact way the images were done. Start off by retrieving the relevant textfield from the array by using the playback counter then instantly add it to the display list:

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

var my_label:TextField = TextField(my_labels_array[my_playback_counter]);
my_labels_slides.addChild(my_label);

}

That should display your textfields on the screen, but they are not in the right position. Their horizontal place has the be the same as the images, while their vertical position has to be at the bottom of the image. The way to calculate this is as follows:

You can add the fade-in effect to the text labels as well by using the Tween Class:

You can test your movie now to see your labels fading in and appearing at the right position. However, you will notice a big problem as the previous text fields do not disappearing when the new ones appear making the whole thing look like a mess.

AS3 Slideshow Problem

If you use images of different sizes you would also notice that they remain in the background while the new ones appear. We will solve this problem in the next page of this tutorial by creating a new hidePrev() function to take care of this.

Summary of This Page

Created textifleds and retrieving the labels using the loop.
Creating a separate display container for the labels.
Updated the nextImage() function to show the labels.

In the next page of our tutorial we will fix the slideshow bugs and polish the project.