If ActionScript is not necessarily your strong suit, you can cut down on the amount of coding you do by utilizing the timeline in Flash's design interface. In this exercise, you will import a sequence of images and create previous and next navigation buttons.
If you would like to see a preview of the completed gallery, open gallery_timeline.fla in the Chapter 3 folder.
Getting ready
Have more than one image ready to use. Ideally, the images should be named sequentially so that import is as easy as possible. Also, it is best if the images have the same dimensions so that the shift between each is not jarring. You may also use the sequential files in the Chapter 3 images folder for this lesson.
How to do it...
1. Create a new file: File | New. Select Flash File (ActionScript 3.0).
2. Rename Layer 1 as images.
3. Select the key frame on the images layer. Create a movie clip symbol. Insert | New Symbol (Alt/Opt F8)). Select Movie clip, name it mc_slides, and hit OK.
4. In the movie clip, name Layer 1 images Select the first key frame:
File | Import | Import to Stage (Ctrl/Cmmd R).
5. Navigate to and select only the first file in your sequence of files.
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. Click on Scene 1 at the top left of the stage to access the main timeline.
8. Select the symbol instance of the movie clip. Name it slides_mc in the Properties panel. You will call this name later in the ActionScript.
9. 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. Remember that buttons are going to be incorporated. If you do not want your buttons to overlap your images, make the stage large enough to accommodate your buttons. The stage can always be resized further later.
10. Position your movie clip containing the images as you like, and save the Flash file.
11. Make a new layer in the timeline. Name this buttons. Use the Type Tool to separately type the words Next and Prev. Position these words where you want them. These are going to become your buttons.
Buttons can be made of almost anything. They can incorporate shapes, text, movie clips, sound, and more. In addition, you can design your image gallery to look any way you want it to look. As your own time allows and need demands, add more layers to hold background and foreground elements to dress the image gallery up a bit.
12. Select the Prev text. Go to Modify | Convert to Symbol (F8). For Name, type b_prev , as is shown in the following screenshot. For Type, select button, and hit OK:
13. With the symbol selected, name it prev_btn in the Properties panel, like the example below:
14. To edit the button so that it has a rollover state and a hit state, double click on it.
This isolates the symbol and shows the timeline for just this one element. By default, there is an Up state that consists of your text.
15. Create an Over state by selecting the frame below the word Over and hitting F6.
Change the color of the text.
16. Create an adequately sized Hit state by selecting the frame below the word Hit and pressing F6. Make a rectangle that is filled with color and completely overlaps the text. This provides an active area for your button that your viewer will be able to reliably hit. No one can see your Hit state. It does not matter what it looks like. The resulting timeline should look like the following:
17. Double click on the stage to go back to Scene 1 and exit the timeline for this button.
18. Select the Next text. Go to Modify | Convert to Symbol (F8). For Name, type b_next. Type needs to be button. Click OK.
19. With the symbol selected, name it next_btn in the Properties panel.
20. Repeat steps 14 – 17 to add Over and Hit states.
Now the fun part. It is time to add ActionScript to make this thing run.
1. Make a new layer at the top of the main timeline, and name it actions.
2. Select the first key frame of the actions layer: Window | Actions (F9/Option F9).
Type the following code into the Actions panel:
slides_mc.stop();
next_btn.addEventListener(MouseEvent.CLICK, goForward);
prev_btn.addEventListener(MouseEvent.CLICK, goBack);
function goForward(event:MouseEvent):void{
if (slides_mc.currentFrame == slides_mc.totalFrames) { slides_mc.gotoAndStop(1);
} else {
slides_mc.nextFrame();
} }
function goBack(event:MouseEvent):):void{
if (slides_mc.currentFrame == 1) {
slides_mc.gotoAndStop(slides_mc.totalFrames);
} else {
slides_mc.prevFrame();
} }
3. Save the file. Test the movie (Ctrl/Cmd Return). The image gallery should go forward, backward, and loop in both directions.
The code for this image gallery allows you to add just about as many images into the timeline as you need. For the sake of load time, you probably want to keep it under hundred images. All you have to do is import additional images into additional key frames in the movie clip. Putting the images into a single movie clip symbol also makes moving and transforming all the slides at once very easy—simply move or transform slides_mc.
How it works...
The ActionScript in the actions layer controls the timeline. The first command the SWF is given is to stop the timeline of slides_mc on frame 1. From there, the rest of the ActionScript applies. When you click on a button with your mouse, the ActionScript that applies to a mouse click on that button is activated. In this case, if someone clicks on the Next button, the SWF will go to and stop on the next frame in the timeline for slides_mc unless it is displaying the last frame in that timeline. If it is displaying the last frame, there is not a next one, so it displays frame 1 instead, just as you told it to do when you wrote in your code. If the user clicks on the Previous button, the SWF will go to and stop on the previous frame in the timeline for slides_mc unless it is on the first frame. Since no frame exists before the frame 1, it loops back and displays the last frame just like you told it to do.
See also
f Image thumbnails, galleries, and watermarking: NextGen gallery plugin