A slideshow is a series of images that appear one after another. A basic slideshow can be completed very easily in the timeline in Flash. With additional Flash design skills, you can further dress up any slideshow to enhance the visual experience of the user. Here, the focus is on providing the steps to make the slideshow functional. This recipe is for a looping slideshow.
Following this recipe are additional instructions on how to stop the slideshow on the last image/frame.
If you would like a preview of a sample slideshow, open the slideshow_timeline.fla file in the Chapter 3 folder.
Getting ready
Have a sequence of images available to you. JPG files will work well. This will work best if the images you use are named sequentially (i.e. - pic_01.jpg, pic_02.jpg, pic_03.jpg, and so on). There are images available to you in the Chapter 3 images folder if you prefer that.
How to do it...
1. Create a new file: File | New. Select Flash File (ActionScript 3.0).
2. Rename Layer 1 to images.
3. Select the key frame on the images layer.
4. Go to File | Import | Import to Stage (Ctrl/Cmmd R).
5. Navigate to and select only the first file in the sequence.
6. Hit Import. You should get the following dialog box. Select Yes. The images will all be placed into the selected layer, one key frame after another:
7. Modify | Page Properties (Ctrl/Cmmd J) to adjust the stage size as desired. Check the box for Match: Contents if you want the stage to exactly match the size and position of the placed image file.
8. Save the Flash file.
9. Use Control | Test Movie (Ctrl/Cmmd Return) to generate and view the .swf. This will most likely be a slideshow that is much too fast.
10. To change the rate of the slideshow, you have a few options:
First off, see if changing the frame rate will make it slow enough.
Secondly, you can add more frames/more time to each of your slides.
We suggest a combo.
11. Go to Modify | Page Properties (Ctrl/Cmmd J). Change the Frame Rate, for instance, to 10 fps (frames per second). Hit OK.
12. Add 10 frames to each key frame on the images layer if you want each slide to show up for 1 second. Add 20 frames for 2 seconds, and so on.
13. To add frames, either select each key frame in turn, and hit F5 the desired number of times, or select the key frames you want to move, and then drag them to the right in the timeline the desired amount of frames. With the second option, you will need to add more frames for the last slide by hitting F5 either the desired number of times or on the appropriate frame. The end result in the timeline should look something like this:
14. Continue to test the movie (Ctrl/Cmmd Return), and tweak the frame rate and number of frames for which the images are visible.
15. Save the Flash file.
Images can also be converted into symbols and have filters applied to them and/or be animated as part of the slideshow presentation. You can also add a layer above the images layer to hold a watermark. For animation techniques, please see Chapter 9: Flash Animations.
How it works...
By default, Flash creates looping animations. All you have to do for a basic slideshow is create a sequence of images in the timeline. From there, add enough time to each image so that the viewer has enough time to see and enjoy each image. Changing the frame rate is another way to adjust how long an image is viewable. The lower the frame rate, the longer it takes an SWF to go from one frame to the next. The faster the frame rate, the more quickly the transition from one frame to the next occurs. Basically, 10 frames per second is like going 15 miles per hour. 24 frames per second is like going 60 miles per hour. You can absolutely travel the same distance and see the same things—one method simply takes less time than the other.
There's more...
If you would a slideshow that does not loop, as this one does by default, continue on to the next steps.
Stopping the loop
With any looping slideshow or animation, the following steps apply in order to stop the looping default function of a SWF:
1. Have any looping FLA file open in Flash.
2. Create a new layer at the top of the timeline. Name it actions. 3. In that layer, select the frame that lines up with the last frame of the
slideshow/animation.
4. Insert | Timeline | Blank Key Frame (F7).
5. With that new blank key frame selected, go to Window | Actions (F9/Option F9).
6. In the resulting Actions panel, type the following:
this.stop();
The code applies to this current timeline. It stops the animation at the frame the code is applied to. Merely typing stop(); is also adequate.
7. Save and test (Ctrl/Cmmd Return). The SWF should no longer loop. Make sure you like your last frame.
Swapping your slides
If you want to edit your timeline-based slideshow by changing the images in it, you can!
1. Open your slideshow file, if not already open.
2. Go to File | Import | Import to Library.
3. Import any image file(s) you need.
4. Select the key frame for the image you want to replace. This should in turn select the image.
5. Hit the Swap button in the Properties panel:
6. Select the image you want to use instead. Hit OK. The images are swapped.
7. Repeat as many times as necessary.
8. Save and test (Ctrl/Cmmd Return).
See also
f Creating effects in Flash
f Using Flash to create watermarks
f Chapter 9: Flash Animations