The Slide Show

Creating (and Refining) an Interactive Slide Show

Here's the swf we'll be creating | Right-Click to download the source files for this tutorial
A simpler version and a more developed example, of what you might create with these skills

1 – Set your Stage to 600 x 400, create a physical background layer, lock it, then add and rename layers

2 – Import thumbnails to the Library, position the first and last thumbnails on the thumbs layer, then drag the remaining thumbs onto the Stage and use the Align Panel to set their positions

3 – Select the thumbs, one-by-one, Convert each to Symbol (Button), and name in a consistent manner

4 – Select the first Keyframes on the labels and images layers, Option-Drag to copy Keyframes to Frames 5, 10, 15, 20, 25, 30, 35, and 40 (if you can't master the Option-Drag, Right-Click and Insert Keyframe on successive Frames), and select Frame 5 of the images layer (for the next step)

5 – Import the images to the Library then place and position the images on successive Keyframes (from 5 to 40)

6 – Add Labels to the Keyframes on the labels layer

7 – Convert each of the images to Symbol (Movie Clip)

8 – Select the Keyframe on Frame 1 of the actions layer, press Option-F9 to open the Actions Panel, and add a Stop Action

9 – Select the first button and add a Goto and Stop Action via the Behaviors Panel (as shown), repeat for each successive button, then Control > Test Movie (Command-Return) to see the results (don't forget to click your buttons). Here's the swf you should see at this point

10 – Add a layer above the images layer, name it invis (for invisible button), Insert Keyframe on Frame 5, Draw a small rectangle (without a stroke) off to the side of the images, select the rectangle (with the Selection Tool), change its size and position to match the images with the Info Panel, Convert it to a Symbol (Button) and name it, Double-Click it to edit the Symbol, drag the Keyframe on the Up State to the Hit State, and Click on Scene 1 to return to the Main Timeline

11 – Add a Goto and Stop Action via the Behaviors Panel (as shown) so that the invisible button targets the next image, Option-Drag copies of the button, edit the ActionScript for each in the Actions Panel (make sure the last button leads back to the first label), and Control > Test Movie to see if yours works like this swf

12 – Double-Click on your first image to open the Movie Clip's Timeline (note that you must lock the invis layer first), Convert the Bitmap on Frame 1 to a Symbol (Movie Clip) and name it -- this will enable us to animate the image in one Keyframe on the Main Timeline) -- Insert a Keyframe on Frame 20, Right-Click on the first Keyframe (on Frame 1) and Create Motion Tween, Select the Instance on the Stage (the image), set its Color to Brightness (-100), drag the Playhead to see the animation, Add a new layer, Insert Keyframe on Frame 20, add a Stop Action, test your movie and click on the first button to see how your animation looks

13 – Repeat for each image on the Main Timeline (it shouldn't take more than 10-15 minutes and it's good practice). Refer to the next movie if you don't remember the steps -- and this won't work if you don't get the steps in order!

14 – Just to drive home the point, here's how you animate a Movie Clip on a single Keyframe in the Main Timeline. Control > Test Movie (Command-Return) to see if your slide show looks like this swf

15 – Our buttons need rollover states. Lock and unlock layers as shown, Double-Click on the first button to enter its Timeline, Convert to Symbol (Movie Clip), Insert Keyframe on the Over and Down State, select the Keyframe on the Up State, select the Movie Clip on the Stage, set its Color to Brightness (-80), select the Keyframe on the down State, select the Movie Clip on the stage, set its Color to Brightness (50), and Control > Test Movie to see your rollover

16 – Repeat for each button. The next movie shows the last button's rollover steps and the swf you should wind up with

17 – Insert Keyframe on Frame 2 of the labels layer and name it, Insert Keyframe on Frame 2 of the thumbs layer, select the first Keyframe of the thumbs layer and click one of the buttons to make them active (note the Button is active in the Properties Panel), Modify > Break Apart to remove the Button State and the ActionScript associated with each button (this will make the animation run much smoother), notice that the thumbs are now Movie Clips (the Up State within the buttons), Convert the group of Movie Clips to Symbol, Double-Click to enter the new Movie Clip's Timeline (to animate on a single Keyframe in the Main Timeline), Modify > Timeline > Distribute to Layers (Shift-Command-D), reorder the layers and rename the uppermost layer: actions

18 – Select the Keyframes of each Movie Clip and Option-Drag copies to Frames 15 and 20, select a range of Frames on either side of the Keyframe on Frame 15 and Create Motion Tween, select the first Keyframes and reposition the Movie Clips in the Info Panel, set the Ease to 100 so that the Clips will fly in fast then slow down as they reach Frame 15, change the Color to None, select the Keyframes on Frame 15 and reposition the Clips in the Info Panel so that they overshoot their final resting point, set the Ease to 100, the Color to None, and drag the Playhead to see the animation

19 – Select the m2 layer by clicking on its name and reposition it by Dragging it two Frames down the Timeline, repeat for the rest of the layers, select the Frames directly above the final Keyframe of the m8 layer and Insert Frame, select the last Frame of the actions layer and Insert Keyframe, add a Goto and Stop Action via the Behaviors Panel and be sure to select _root so that the script points to the p0 label on the Main Timeline, then Control > Test Movie to see the final product

20 – Finish early? Here's some more pictures to work with. Build another slide show (try to do it without the movies) and see if you can figure out how to animate the button animation like this.

Next up: Dynamic content! Like this swf (click the NEXT button in the lower right corner to see the first swf load dynamically)

Mac Lab | Digital Art | 3D Design & Animation | Multimedia Production | Tutorials | Students | FAQ | Blog

Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open.