So far, we've assigned one frame action to stop the playback head at the end of a movie. We have also assigned one button script to send the playback head to frame 1. We can send the playback head to any frame but as you develop your movies, you may decide to add or remove frames.

If you send the playback head to frame 162 and delete several frames, the images in frame 162 may no longer be those you intended when you assigned a script on a button to gotoAndPlay(162). We use labels to identify sections of our movie. A frame label allows you to name the frame, or mark a particular location in the timeline. You can then assign an action to go to a specific label, and even if you add or remove frames before that label, the frame and all the contents in all the layers associated with that frame, is still defined by the label. This information on frame labels will become clear as you work your way through this lesson.

If you are doing a movie about insects and have a variety of insects entering the stage at different times, you could use labels to identify each insect's arrival on the timeline. Let's say a butterfly enters at frame 10 and an ant enters at frame 20, followed by a swarm of bees in frame 40. You could still allow the viewer to have a nonlinear approach to each insect's arrival so the user could make the swarm of bees enter before the ant, even though the ant appears earlier on the timeline.

To give the user the option of presenting any of the 3 insects, you would create a button for the butterfly's entrance, a button for the ant's entrance and a button for the swarm of bee's entrance. You can assign those buttons to frame 10 (butterfly), 20 (ant) and 40 (bees) respectively.

Later in your development you decide you want to remove the butterfly and ant and have this movie revolve solely around bees. You could remove the frames between frames 10 and frame 40 and shorten the timeline. Now frame 40 no longer represents the entrance for the swarm of bees. So if you sent the button to frame 40, you would not be sending the user to the entrance of the bees.

Instead of assigning the buttons to frame numbers, you can create labels at each frame that currently represents the entrance of the butterfly, ant, and bees. It helps to name your labels with a short descriptive short name such as butterfly, ant, bees.

Back to Top

Layer Organization

I reserve one layer in each of my movies for actions and one layer for labels. I organize my layers so the actions are the top layer and the labels are below the actions in order to find things easily. Actions and labels don't show on stage so it really doesn't matter where you put then in your layer stack. However, by convention, most Flash designers place the actions at the top of the layer stack and the labels below the actions. Keeping actions and labels in a consistent location in the layer stack enables me to locate my actions and labels throughout all my timelines on all my movies. It also helps when I'm deconstructing or analyzing movies created by other designers.

Let's assign a few labels to our frames and then assign actions to both buttons and frames to send the playback head to these labels.

1. Create a new movie and name it 'shapes.fla'.

2. Set the background color to black and keep the stage the default size.

3. Save your movie.

4. Go to the Insert Menu - Insert>New Symbol. Name it oval and assign a movie clip behavior.

5. You're now in symbol editing mode and not the main timeline. This is the first time we have created a new symbol. Previously, we converted objects to a symbol. Select the oval tool and draw a yellow filled oval on the stage. Use the Info Panel to assign a width of 60 and a height of 100. Use the Align Panel to center to the stage. Save your movie.

6. Go to the Insert Menu - Insert>New Symbol. Name it 'square' and assign a movie clip behavior.

7. Select the rectangle tool and draw a red filled square. Use the Info Panel to assign a width and height of 80 and use the Align Panel to center to the stage. Save your movie.

8. Go to the Insert Menu - Insert>New Symbol. Name it triangle and assign a movie clip behavior.

9. Select the rectangle tool and draw a green filled square. Use the Info Panel to assign a width and height of 80. Use the Line Tool (N) and draw a diagonal through the square. Select one half and delete. Rotate the remaining triangle so the longest side is the base. Use the Align Panel to center to the stage. Remember that in order to separate the triangles formed by the diagonal line you have to first select one. Then, deselect it. Then, reselect it and delete it. Save your movie.

10. Return to Scene 1 by clicking in the text link on the top of the timeline. There should not be anything on your stage yet. Your library should contain 3 movie clip symbols named: oval, square, and triangle.

11. Create 5 layers and name them from top down: actions, labels, triangle, square, oval.

12. Save your movie.

13. Select frame 50 of the actions layer and click-hold-and-drag your mouse down through all the layers so you select frame 50 of all layers at once. Press F5 to add 50 frames to all the layers of your movie. The following illustration shows the selection of multiple frames.

Back to Top

Click here or roll your mouse over the image to display the entire timeline.

14. Select frame 10 of the labels layer and insert a keyframe (F6). Insert keyframes on the labels layer at keyframes 25 and 35. Save your movie.

15. Select the keyframe at frame 10 of the labels layer and open the Frame Panel. Type 'triangle' into the Label field.

In Flash MX2004, make sure that the Label Type Dropdown menu is set to 'Name.'

16. A red flag appears in frame 10 followed by the word 'triangle' which is the name of that label. This is the frame in which our triangle shape will appear. When the frame is selected, the flag appears blue inside a black frame. When you deselect the frame, the flag will be red. If two labels are close to one another you may not be able to see the label name or flag. Spacing frames between labels for organization does not add to the file size and is suggested so that you can clearly see your work when viewing your timeline.

17. Select the keyframe at frame 25 of the labels layer and open the Frame Panel. Type 'square' into the Label field. Select the keyframe at frame 35 of the labels layer and open the Frame Panel. Type 'oval' into the Label field. Save your movie.

18. Select frame 10 of the triangle layer, insert a keyframe and drag an instance of the triangle symbol to the stage. Use the Info Panel to position the triangle at: x = 78, y = 142. Save your movie.

19. Select frame 25 of the square layer, insert a keyframe and drag an instance of the square symbol to the stage. Use the Info Panel to position the square at: x = 213, y = 120. Save your movie.

20. Select frame 35 of the oval layer, insert a keyframe, and drag an instance of the oval symbol to the stage. Use the Info Panel to position the oval at: x = 60, y = 100. Save your movie.

Back to Top

Click here or roll your mouse over the image to display the entire timeline.

21. Play your movie. I don't like the timing or rhythm of my movie. The oval seems to come in before I get a chance to rest on the square. I want to add more space between the square and the oval. I want the same number of frames between the square and the oval as I have between the triangle and the square. Notice that I have 15 frames between the triangle and square but I have only 10 between the square and the oval.

22. To space the symbols more evenly on the timeline, drag the oval label and flag to frame 40 and then click-hold-and-drag the oval keyframe on the oval (circle) layer to frame 40. Then add 5 frames to the end of your movie to give the oval the same amount of time on the stage as the others with a total of 55 frames to all layers on the timeline as in the screenshot below. The shapes are spaced evenly on the timeline.

Click here or roll your mouse over the partial image below to display the entire timeline. Your timeline should now look like the timeline that will display in a new window. Play your movie.

Please continue to the next section of this lesson.

Back to Top

Up » 7.1 Labels & Navigation » 7.2 Scripting the Buttons » 7.3 Storyboarding » 7.4 Final Project