A Dynamic Slide Show is quite a simple application but the more dynamic you want it, the more complex it gets. This series of articles will show you how to create a dynamic, flexible, and versatile slide show with AS3. Each new article will be covering a particular subject in the creation of a Slide Show. The articles will be as follow:

1. Loading data (or why everybody uses XML?)
2. Loading Pictures (or How do I time this?)
3. Resizing and Auto resizing (or can the swf resizes itself?)
4. Adding Setup Options (or letting the user take charge)
5. Adding Effects and Create Custom Effects (or Put The BitmapData Class to Work)
6. Randomizing (or Adding Some Life)
7. Adding Texts (or The Advantage of Classes)
8. Adding Sound (or Turn That Off!)
9. Cleaning Up (or Learn How To Take The Trash Out)
10. CMS (or Live And Let Live)

Loading data (or why everybody uses XML?).

Most application must load some kind of data when they start and a Dynamic Slide Show is not different, it must load at least the path of the pictures it’s going to display and maybe additional information like timing, URL paths and so on. This first article shows you how to load data via an XML object.

Why everybody uses XML?

XML has become a standard on the web for passing information from Website to Website, from web application to server side and reverse, and in many other cases. The reason is simple, with XML the data is (or is supposed to be) well organized, already sorted for you. XML nodes are supposed to describe the data they enclose making the work of the programmer easier.

So let’s start building our slide show, create a new Actionscript 3 document, set its width and height to 400, its frame rate to 30 and save. Now let’s create our document class, create a new Actionscript file and save it in the same folder than the Fla file you just created, give it for example a name of “LoadingData.as”. Now back to our Fla file, set the document class as “LoadingData” and save. From now we will be working with the document class only but leave the Fla open anyway as we will need it for compiling the swf. Let’s create a simple XML that we will load in our application:

<SLIDE_SHOW>

<PICTURES>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

</PICTURES>

</SLIDE_SHOW>

SLIDE_SHOW is what we call a root tag, it encloses all the other tags and is required to form a valid XML object. PICTURES is the tag that we will use to pass our picture paths to the application, this tag will enclose all the picture paths. PICTURE_PATH is our final tag and we will add paths inside these tags to point to our pictures. We still did not setup a picture folder but let’s go ahead and pretend we did and add some paths into our XML:

<SLIDE_SHOW>

<PICTURES>

<PICTURE_PATH>mypicture1.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture2.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture3.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture4.jpg</PICTURE_PATH>

</PICTURES>

</SLIDE_SHOW>

Here now there’s something in our tags, let’s save this XML as “slide_show.xml” and save it in the same folder as our Fla and as files.

Now let’s write our document class. Open the actionscript file named “LoadingData.as”. A document class in AS3 must be enclosed in a package so let’s do that first:

package{
}

Quite easy, now inside this package let’s declare our document class (its name must match the actionscript file name):

package {
public class LoadingData
{
}
}

A document class in AS3 must extend either MovieClip or Sprite, use MovieClip when you intend to use timeline-based animation, use Sprite when you won’t use any timeline. We won’t use any timeline-based animation here so let’s go ahead and extend Sprite. We import the Sprite class and extend it:

package {
import flash.display.Sprite;
public class LoadingData extends Sprite
{
}
}

Finally let’s create our constructor. A constructor is a function with the same name as the class, it never returns a value and will automatically run when the document class is called (when the application starts):

package {
import flash.display.Sprite;
public class LoadingData extends Sprite
{
public function LoadingData()
{
}
}
}

I will not describe again how to create a document class in the next sections so if you forget how to do this, come back to this page and review the process.