Working with Frames

This lesson will show you how to work with frames in Flash 4.0.

1. Run Flash 4.0 from the Start menu by choosing Macromedia Flash 4 and then Flash 4 to obtain a blank stage for the first frame. If you are already in Flash use the New icon from the Tool Bar to create a new project.

2. Click on Modify, then Movie from the pull-down menu to obtain the Movie Properties dialog box. Set the size of the movie to a Width of 400 and a Height of 200. Set the Background color to a Light Green. Click OK to continue.

3. Click on the Add Layer tool from the Layers area to create a second layer.

4. Double-click on the first layer (Layer 2) and change the name to Actions/Labels.

5. Double-click on the second layer (Layer 1) and change the name to Graphics and Text.

It is a good idea to always have this as your first (top) layer. No objects or symbols will go on this layer. The main use will be to control the Actions throughout your movie. Keyframes within this layer can be assigned actions such as Play and Stop. The Keyframe can be named (Label) and used as a reference point that can be navigated to with a button on another frame. You could consider this as a kind of "hyperlink" that would take the user from one "screen" to another. Only now with Flash we can have an animation play upon entering the new "screen". In this respect you can have a "movie within a movie". Your swf file is a movie, but within certain sequences of frames, you can have a movie or animation play. Stops can be used to allow the movie to be paused to get input from the user at any given Keyframe.

6. Click on Frame 1 of the Actions/Labels layer to select it. The first frame is always a Keyframe.

7. Right-click over this frame and choose Properties to obtain the Frame Properties dialog box.

8. In the Name box type: Start.

This will be Step 1 or Part 1 of the movie.

9. Click on the Actions tab and click the arrow.

10. Choose Stop from this pull-down menu.

 11. Click OK to return and note that Frame 1 for the Background Actions/Labels. The small a indicates that an action has been added to this Keyframe. The popup shows the Action (Stop) and the name of the Label (Start).

12. Click in Frame 10 for the first layer, hold the Shift key down and click in Frame 10 for the second layer. Press F6 (Insert Keyframe command) to make Keyframes at this point for both layers. Repeat this at Frame 20 and Frame 30.

13. Right-click over Frame 10 of the Actions/Labels layer, set the Name of the Label to Step 2. Set the Actions to Stop.

 14. Right-click over Frame 20 of the Actions/Labels layer, set the Name of the Label to Step 3. Set the Actions to Stop.

15. Right-click over Frame 30 of the Actions/Labels layer, set the Name of the Label to Stop. Set the Actions to Stop.

Notice that there is now a small red flag at the Keyframes, indicating a Label has been added. In the next lesson, we will create buttons that will go from the Start Keyframe to the Step 2 Keyframe and from Step 2 to Step 3.

16. Lock down the Actions/Labels layer when done by clicking on the small dot beneath the symbol for the lock on that layer.

17. Click on Frame 1 of the Graphics and Text layer (the first Keyframe named Start).

18. Open the Graphics Library and drag the Bird symbol for the Animated Graphics folder to this Keyframe. Note that objects can only be added to Keyframes.

19. Click on Frame 10 of this layer and add the Globe Spinning symbol. Make it larger using the Scale tool.

20. Click on Frame 20 of this layer and add the Rays symbol. Make it slightly smaller using the Scale tool.

Notice now that each of the frame segments (steps) are grey, indicated that all those frames have something in them. Frame 30 is still empty.

21. Use the Control, Test Movie command to test this. Click the Play button for the Controller to move from one Keyframe to the next. Recall that you placed a Stop Action at each Keyframe. This was just to show you how to set Actions. It you had not used a Stop Action the movie would play all the way through. Return to the Main Window when done by clicking the X for the Player Window.

22. Go back and delete this Stop Action by right-clicking over each Keyframe of the Actions/Labels layer and choosing Properties. From the Actions tab, the Stop Action should be highlighted. Click the Minus sign to remove this Action, then click OK. Repeat this for the Keyframe at 10 and 20 of this layer. Add a Play Action to Frame 1 of this layer.

Note now that the small a has been removed from Keyframes 10 and 20 since you removed the actions for 10 and 20. The small red flag is still there, signifying that there is a name for each Label.

23. Use the Control, Test Movie command to test this movie again. The movie should now play continuously up to Frame 30. Note also that it ends with a blank frame since there is nothing in Keyframe 30 of the Graphics and Text layer.

24. Return to the Main Window when done. Click anywhere in Frame 1 and press Enter on the keyboard to notice how the movie plays through from Frame 1 to Frame 30. This is a quick way of testing your animation. Likewise you could click on any frame and then press Enter to play from that point forward.

25. Save this as lesson5 to conclude this exercise. A later lesson will show you how to add buttons to go from one Step to the next (or back).