Flash CS4 Image Slideshow - Flash and Animation

Many of my customers want a small slideshow on the front page of their store, blog or website. This could be a slideshow of the featured products in the store or the latest photos they have added to their blog.

This slideshow can be done in many ways including JavaScript, a gif animation and Flash^R. I like to use Flash because it is an easy and fast way to create a simple slideshow that displays several images one after the other. On the other hand, it is also easy to build a more advanced XML based slideshow with transition effects between the images. In the next few tutorials, we will build an image slideshow in Flash CS4 starting with a plane image display and building up to an advanced version with transition effects.

The only things you will need for this tutorial are three jpg images and Adobe Flash. It is better if the images are all the same size. We will use only three for our tutorial but you may use as many as you wish. Just keep in mind that more images will cause the download time for your Flash swf file to increase.

Open Flash CS4, start a new ActionScript 3 project and let’s get to work.

The first step is to set the stage to the same size as our images. From the Menubar, click Modify – Document. In the Document Properties dialog box, enter the Width and Height in pixels for your images. This will set the stage to match. You may also want to change the background color. Click on the small color box and choose a color. You might want to match your webpage background color.

We will use Frame 1 on the Timeline for the Preloader code, which we will add this later. So for now, we will start building our slideshow on Frame 2.

Each of our images will display for 100 frames. Because our Frames Per Second is set to 24 by default, this will give us about four seconds of display time for each image.
Rename Layer 1 to "Background". On this same layer, right-click on Frame 300 (100 frames x 3 images) and add a blank frame (Insert Frame). This will display the Background layer during the entire animation.
Add a new layer and name it "Image1". This layer will hold our first image. But we don’t want the image to appear on the stage until Frame 2. Remember, Frame 1 will be our preloader. On Frame 2 of this layer, right-click and add a Keyframe.

Now we will add our first image.
From the Menubar, click File – Import – Import to Stage. This should place our first image centered on the stage. To be sure it is aligned as we want, select the image and go to the Properties panel. The X and Y position values should both be set to 0.0.

Save your project file.

Join us in the Flash forum.