Flash Slide Show

Introduction

Image slide shows have become common on the Web—sports and news sites feature photos illustrating stories; commercial sites use slide shows to showcase products; non-profit groups might display photos of the work they're doing; etc. Custom slide shows can be created easily with Flash.

Assignment

Imagine you are a reporter covering an event, or doing a feature story on a place or group of people. Or imagine that you're a PR person, promoting the event, place or group of people; you want to put a slide show images together to put on a Web site. Choose an upcoming event (political rally, sporting event, charitable event, etc.) or an interesting place, or group of people, to feature. Photograph it/them, and then create a simple slide show of 10-20 images using Flash and Actionscript 3 that includes captions/descriptions, a dynamic page counter, and a play/pause option.

Set-Up

Select your subject (event, place, story, etc.).
Photograph your event/subject. Just about any kind of camera will do; best to use a nice digital SLR, but in a pinch you could use a consumer quality camera or even a cell phone.
Put your photos on a hard drive, flash drive or computer.
Before you launch Flash, you may want to resize your photos (preferably in Photoshop) if they're larger than 500 pixels wide or tall. Your images should be no larger than 600 pixels on their longest side. Change their size and re-save the smaller version of the images.
Launch Flash and create a new (Actionscript 3.0) document. Save it as "yourName_slideShow.fla."
Choose Modify > Document. In the Document settings window, change the size of the stage to 800px x 600px. You can change the background color too if you like. Click OK.
Import your images to the library.
Position your first image on stage. You could opt to center it, but you'll need to leave room for controls, title, captions/descriptions and page numbers..
Add a caption and/or block of explanatory text to each page. Note, the more informative, the better. You may also want to place a slide number (page number) on each page (best if it says something like "3 of 12"). Use static text.
Keyframes in layer 1
In frame 2 create a new keyframe. Swap the image on stage for your second image (choose Modify > Bitmap > Swap Bitmap). Change the caption/text to whatever is appropriate.
Continue until you have a keyframe/page for every picture.
Once all of the images and captions are in place, lock the layer.
Create a new layer called Title. Add a title for your slide show (using static text) to the stage. Lock the layer.
Create a new layer called Controls.
Now add some buttons. You need at least 4: next, back, play, and pause button. You may use pre-made buttons from the Common Libraries, but you'll getter a better grade if you create your own from scratch. Regardless, name the next button next_btn, the back button back_btn, the play button play_btn and the pause button pause_btn.
Lock the layer.

Actions

Create an Actions layer.
Select the first frame in the actions layer and open the actions window. Now add the following code:
```
stop();      

var picTotal:int = 10;      
```
The first line—stop();— will keep the slide show from playing endlessly. Then we create a variable, picTotal, which should be equal to the number of photos you have in your show (so if you have 12 photos, change the number to 12).
Now we need to create some functions for our buttons. Add the following code:
```
function nextPage(myEvent:MouseEvent):void
{
    if (currentFrame >= picTotal) {
        gotoAndStop(1);
    } else {
        this.nextFrame();
    }
}

function prevPage(myEvent:MouseEvent):void
{
    if (currentFrame <= 1) {
        gotoAndStop(picTotal);
    } else {
        this.prevFrame();
    }
}
```
The first function uses a conditional to check to see if the current frame is equal to (or greater than) the total number of pictures. If it is, it sends the playhead to the beginning of the timeline. If the currentFrame is less than the picTotal, the playhead is advanced one frame. The second function does essentially the same thing, but in reverse. It counts backwards, and if the playhead reaches the beginning of the timeline, it loops around to the end.
Now we need some listeners for out next and back buttons:
```
next_btn.addEventListener(MouseEvent.CLICK, nextPage);
back_btn.addEventListener(MouseEvent.CLICK, prevPage);
```
A listener is a bit of code (specifically, a method) that is looking for some event to occur. In this case we've attached the listener to our forward and back buttons. Inside the parenthesis we need to supply two pieces of information—what sort of event we're looking for (in this case, a mouse "CLICK"), and the name of the function (written previously) we want to call when that specific event occurs. .
Try it out now, you should be able to go forward and backward.

Auto Play

Most slide shows have an option to play through the slides automatically. We can do the same with the use of a timer object.

First we need to create an instance of a timer object. We'll do that near the top of our code; add the new line (in black):
```
stop();      
var myTimer:Timer;
var picTotal = 10;      
```
Now we need three new functions—one that will start the timer, one that will use the timer to cause the show to play, and one to stop the timer. Place these after the previous functions:
```
function startTimer(myEvent:MouseEvent):void {
    myTimer = new Timer(5000); // 5000 = 5 seconds; 10000 = 10 seconds
    myTimer.addEventListener( TimerEvent.TIMER, gotoNextPage);
    myTimer.start();
}

function gotoNextPage(myEvent:TimerEvent):void {
    if (currentFrame >= picTotal) {
        gotoAndStop(1); 
    } else {
        this.nextFrame();
    }
}

function stopShow(myEvent:MouseEvent):void {
    myTimer.stop();
    myTimer.removeEventListener( TimerEvent.TIMER, gotoNextPage);
}
```
The first function sets the timer amount (here 5000 milliseconds, or 5 seconds) and starts it going. But just as importantly, it adds a new listener to the timer, listening for a timerEvent, basically it's waiting for the timer to hit its setting (5 seconds). As soon as it does, it calls the second function (gotoNextPage). The gotoNextPage function does just that; it looks a lot like the nextPage function above because it does essentially the same thing, the difference is the kind of event that calls it. The last function stops the timer and removes the timer eventListener, to keep everything nice a tidy.
Finally, we need to wire-up the play and pause buttons with a couple of listeners. Add these to the end of your code:
```
play_btn.addEventListener(MouseEvent.CLICK, startTimer);
pause_btn.addEventListener(MouseEvent.CLICK, stopShow);
```
Try it now.

Go above and beyond

Create a cool background/interface for your slide player (you could make something in Photoshop, Illustrator or Flash itself).
Design your own buttons.
Add some animation (to the buttons or interface or both).

Specifications:

Size: 800 x 600 pixels
Frame Rate: 24 fps (default)
Length: about 15-20 slides
Deliverables: completed FLA and SWF files
Due Date: Thursday, March 15

Daniel C. Fergus

Artist & Educator