AS3 Tutorial: Creating a Slideshow

Loading the XML

The XML file structure is very simple:

<slideshow>
   <item src="file1.jpg" title="Description"/>
   <item src="file2.jpg" title="Description"/>
   <item src="file2.jpg" title="Description"/>
</slideshow>

To load it, lets change the class a bit to load the XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
 
	public class Slideshow extends Sprite
	{
		private var xmlLoader:URLLoader;
		private var datasource:String;
 
		public function Slideshow(datasource:String)
		{
			this.datasource = datasource;
 
			xmlLoader = new URLLoader(new URLRequest(datasource));
			xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded);
		}
 
		private function onDataLoaded(e:Event):void
		{
			if (!xmlLoader.data)
			{
				trace("XML Load failed");
				return;
			}
 
			trace("XML loaded");
		}
	}
}

If you were used to the simple getURL method in AS2, things are slightly more complicated now, but not much. The Loader and URLLoader classes now replace all the different loadMovie, getURL, loadVariables, sendAndLoad methods and the MovieClipLoader class, so it’s a good thing.

The event model has also been changed from the ground up. A thorough explanation of how events work in AS3 exceeds the scope of this tutorial; suffice to say that xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded) adds the onDataLoaded function as a listener of the xmlLoader “complete” event.

Parsing XML

In AS2 I used to have an XML-to-Object recursive function that served me well over the years, since I found navigating the XML DOM rather unpleasant.

AS3 has an XPath-style navigation, so parsing the XML is simply fun.

However, before parsing the actual data, lets consider the functionality a bit. What we want is for the images to load in background and for the slideshow to start working when the first image has finished loading and then wait if needed for the next image to become available; for this, we’ll need a FIFO (first in, first out) queue.

public class Slideshow extends Sprite
{
	private var queue:Array = [];
	...

the XML parsing will then be done like this:

1
2
3
4
5
6
7
8
9
10
11
12

private function onDataLoaded(e:Event):void
{
	if (!xmlLoader.data)
	{
		trace("XML Load failed");
		return;
	}
 
	var dataXml:XML = XML(xmlLoader.data);
	for each (var item:XML in dataXml.item)
		queue.push({url:item.@src, title:item.@title})
 }

In theory, we don’t even need the queue array, but it demonstrates how easily you can iterate trough nodes and read attributes.

One potential source of confusion is the var dataXml:XML = XML(xmlLoader.data) part. xmlLoader is an instance of the URLLoader class, which has a .data property that simply keeps whatever was loaded from the server. The data property is untyped, so we must cast is as XML (constructs like xmlVar = XML(someVar) or num = Number(var) are called casts, a way of saying “treat this data as a Number” ).

dataXml.item returns all item nodes in DataXml. With for each we then go through each of these nodes; For every item node, we get its attributes using @src and @title and place them in the queue.

Next, we’ll see how to load the images in the slideshow

Pages: 1 2 3 4 5 6 7