AS3 Tutorial: Creating a Slideshow

Some of my old friends keep asking me for tips and tutorials for flash and actionscript, so I decided to spend a few hours writing a small tutorial for a small slideshow class. The tutorial turned out to be rather long, because I wanted to go in detail and explain the "why", not just the "how".

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

Follow up:

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:

ActionScript 3.0:

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:

ActionScript 3.0:

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