AS3 Tutorial: Creating a Slideshow

The code is AS3 and the tutorial assumes some general knowledge of flash and actionscript 1 and 2.

The table of Contents is as follows:

1. Class usage
2. Loading and parsing the XML
3. Loading the images
4. Adding to Stage
5. Animating
6. Finishing Touches
7. Complete Code and Downloads

Class usage

We’re aiming for simplicity here, so reducing the code to minimum, to create a new slideshow, you’d write this in a new .fla frame:

var slideshow:Slideshow = new Slideshow("list.xml");
addChild(slideshow);

The first line should create an instance of the Slideshow class, while the second one would simply add it to the Stage (no more attachMovie!).

Therefore, the barebone structure of our class will look like this:

package
{
	public class Slideshow extends Sprite
	{
		import flash.display.*;
 
		public function Slideshow(datasource:String)
		{
 
		}
	}
}

Doesn’t really do much for now, does it?

As you can see, in AS3 we need to specify the package for the class. If you’ve worked with packages in AS2, instead of writing something like

class com.widgets.Slideshow
{
...

you now write

package com.widgets
{
	class Slideshow
	{
...

In this tutorial we won’t be using fancy packages, because the Slideshow is not part of a bigger framework – although you’re free to integrate it in one.

Note how we’re importing the flash.display package so we can extend the Sprite class. By the way, Sprite is a new kind of MovieClip without timeline (technically MovieClip extends Sprite by adding timeline functionality) but the point is that if you don’t need your clip to have multiple frames, you’re better off with a Sprite as it uses less RAM.

On the next page, we’ll see how to load and parse the xml that contains the image list.

Pages: 1 2 3 4 5 6 7