Home / Design Center / Tutorials

Understanding the Timeline, keyframes and frame rate

Chris Georgenes

This video shows you some of the essential concepts of Flash and how to use the Flash workspace. You learn about the timeline, layers, layer folders, keyframes, frame rate, onion skinning, basic animation, and overall document settings; many of these concepts are central to understanding animation techniques.

Requirements

To follow along with this article, you will need the following software and files:

• Flash CS3 Professional
• Sample file (ZIP, 0.1 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Understanding the Timeline, keyframes, and frame rate

1. In Flash, choose File > Open and open the mudbubble.fla file. Before you modify this file, you will review the Timeline, located above the Stage in the default Flash workspace (see Figure 1).

   

   Figure 1: The Timeline contains layers and frames, and buttons to control them, along the top and bottom.

2. The Timeline can contain a huge number of layers somewhere near 16,000 (probably more than you'll ever need), and about the same number of frames.

3. To create a new layer, click the Insert Layer button in the lower left corner of the Timeline. By default new layers are named non-descriptively, in sequence, as Layer 1, Layer 2, and so on.

   If you can't see the layer name, grab the handle on the lower right of the layer list and drag it to the right to expand the list view.

   Other buttons below the layer list include Add Motion Guide, Insert Layer Folder, and Delete Layer.

4. Click the Insert Layer Folder button at the bottom of the Timeline. Drag new layer directly below the folder to add it to the folder. Layer folders are a great way to organize related layers in your Timeline.
5. Expand or collapse a layer folder by clicking the expander arrow to the left of the folder. Layer folders are particularly useful when you're working with an animation using multiple characters. Each character can have its own folder; when you work on a character, expand just that folder.
6. To delete a layer, select the layer, and then click the Delete Layer button or drag the layer to the trash can icon.

7. Another way to customize the Timeline is by using the Timeline Options menu.

   Click the icon in the upper right corner of the Timeline to display the Options menu, and choose the following:

   • Placement > Below Document to move the Timeline below the Stage.
   • A frame resize option (including Tiny, Small, Medium, Large, and so on; Normal is the default).
   • Short to set the overall height of the layers in the Timeline. This is particularly useful if you have a lot of layers in your document.

8. To resize the Timeline, drag the border between the Timeline and the edit bar, or drag just the edit bar to increase or decrease the height of the Timeline.

   Notice the tools built into the Timeline, which appear as purple icons below the frames: Onion Skin, Onion Skin Outlines, and Edit Multiple Frames tools.

9. Double-click the characters on the main Stage to open the symbol in document-editing mode.
10. Move the playhead in the Timeline to preview the animation.

11. Review the layers that make up this composition (see Figure 2). As you can see, there are a lot as in most animations.

    

    Figure 2: This symbol is made up of many layers, visible in the Timeline.

12. Click the padlock icon at the top of the Timeline until all the layers are unlocked.
13. Choose the Onion Skin button in the frames below the Timeline. Onion skin markers appear around the playhead in the Timeline, representing how many frames in addition to the current frame, represented by the playhead, you can view at one time. You can move these markers out from the current frame.

14. Move the Start Onion Skin marker to the first frame, and the End Onion Skin marker to Frame 15.

    As you can see, several more frames of animation represented by slightly transparent images appear on the Stage (see Figure 3). This ghostly images help animators who like to do frame-by-frame animation. They can draw an image, turn on onion skinning, create a new keyframe, and still see a ghost of the previous frame to use as reference. However, this view can make complex animations appear very busy.

    

    Figure 3: Onion Skin displays all but the current frame as transparent outlines, so that you can view several animation frames at once.

15. Choose the Onion Skin Outlines button in the frame area below the Timeline. Similar to Onion Skin, this option converts all frames except the current frame to outlines, instead of ghost images (see Figure 4).

    

    Figure 4: Onion Skin Outlines converts all but the current frame to outlines.

16. Choose the Edit Multiple Frames button in the frames below the Timeline. This option is useful when you need to edit an object that occurs across several keyframes or other assets in different layers throughout your timeline. It works just like onion skinning: you move the markers to indicate which span of frames are affected when you edit layers.
17. Select the first layer in the Timeline, and choose Edit > Select All to select the rest.
18. Select the characters on the Stage, and move the entire animation to the right. Because Edit Multiple Frames is selected, this moves the characters for all the selected frames in the animation.
19. Deselect Edit Multiple Frames. Click and drag the playhead back and forth to preview the change.
20. Press Ctrl/Cmd and Z to undo the change.

21. Click Scene 1 in the edit bar to return to the main Stage.

    Now you'll look at modifying the document properties.

22. Click the Stage. This lets you change document settings globally from the Property inspector.
23. If the Property Inspector is not open, choose Window > Properties > Properties to open the Property inspector at the bottom of the workspace. Type 30 in the Frame Rate text box to change the frame rate of the animation.
24. Click the Background color box and choose a purple value to change the background color of the Stage.
25. Click the Document Properties button (labeled with the document height and width, e.g. 550 x 400 pixels) to open the Document Properties dialog box (see Figure 5). Here, you can enter a title and description and change the width and height of the document.

26. Enter 800 for the width and 600 for the height. Click OK.

    

    Figure 5: Use the Document Properties dialog box to add a document title and description, and change its dimensions.

    Now you'll finish the animation.

27. Change the view by choosing 50% from the View dropdown at the far right of the edit bar.
28. Because the animation involves the characters running across the Stage, drag the symbol off to the left side of the Stage.
29. To create a keyframe to end the animation, select Frame 50 and then press F6 to insert a new keyframe. (The initial keyframe was already defined.) Keyframes allow you to make a change to the objects in your animation.

30. Change the position of the symbol by dragging it off the right side of the Stage. Remember, you have not affected the position of the first keyframe.

    Next, you'll create a Motion tween to interpolate the difference between the two keyframes.

31. To start, select any frame between the two existing keyframes.
32. Choose the Property inspector and choose Motion from the Tween pop-up menu. This changes the frames between the two keyframes to a light green color and adds a bold horizontal arrow below them.

33. Now move the playhead between the two keyframes to watch the symbol move across the Stage.

    Because the symbol is a movie clip, you won't be able to see the animation play until the clip renders when you export the final movie.

34. Choose Control > Test Movie to render a test movie and preview the complete animation.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.