Using the Timeline and Frames

All the content you work with in a SWF file is placed and organized somewhere on a Timeline. Timelines are used to display content over time (hence their name), although you can have a Timeline with only one frame easily enough. Timelines contain frames and keyframes that produce the appearance of animation or other changes and transitions; to achieve this appearance, a playhead moves along a Timeline to display the content of frames for whatever duration your frame rate designates. For instance, at 12 frames per second (fps), each frame is displayed for one-twelfth of a second before the playhead moves to the next. It's a little like feeding film through a projector.

Layers are also used in the Timeline to organize content spatially. Layers stack one on top of the other, and can contain differing amounts of frames without regard to other layers in the same Timeline. You'll learn more about layers in the next exercise.

Keyframes are where changes occur on a Timeline. You might have new content in a keyframe or change part of an animation. A keyframe can also hold ActionScript and sounds. Frames are used between keyframes to fill in parts of an animation or the Timeline and are effectively placeholders. You do not define changes in frames, or else they are turned into keyframes.

Most Flash documents have more than one Timeline. Just as there are many frames, there can be many Timelines in mini-movies that you create within the Flash document. You will find out more about how there can be more than one Timeline nested within another in Lesson 4.

In this exercise, you learn how to use the Timeline and select, move, and delete frames. You can continue using bookstore2.fla for this exercise.


If the Timeline is not already open, select Window > Timeline.

The Timeline panel should already be open. It is located at the top of your document, just below the edit bar. If it is collapsed, choosing Window > Timeline will expand it. You can simply click on the Timeline button to expand and collapse the Timeline as well.

The Timeline is made up of two different panes: the Layers pane, which you use to organize content spatially, and the Timeline itself, made of frames and layers. When you first create a Flash document, one layer is created in the Layers pane and given the default name of Layer 1, and one keyframe is inserted in the Timeline for that layer.

The red playhead is located at Frame position 1 because there are no other frames that follow it. The row numbers running along the top of the Timeline represents the frame numbers along the Timeline itself. Frames can be referenced by number or by name using frame labels, which you will create in the next task.


Lengthen the area to view the layer names by resizing the Timeline.

Drag the bar separating the layer names and frames to resize the area for viewing layer names. When you mouse over the bar, a double-ended arrow cursor appears. When this appears, you can click the bar and drag it to the right to make the layer name area larger, so you can read the entire layer name.


As you add more layers, your Layers pane will become scrollable. You can increase the height of the Timeline by dragging the bar separating the Timeline from the application window vertically if the panel is docked. Otherwise, you can use the lower-right corner of the Timeline to resize the panel. That way, you can see more layers in the pane without having to scroll.


Select a different frame view from the Timeline's frame view pop-up menu, or leave the default view you have been working with.

You can change the way you view frames in the Timeline. Select the frame view pop-up menu in the upper-right corner of the Timeline.

The menu allows you to change the size and appearance of frames in the Timeline. Change the width of frames by selecting Tiny, Small, Normal, Medium, or Large. Selecting or deselecting the Short option changes frame height. The grey shading you see on some frames can be turned off by selecting or deselecting Tinted Frames.

You can even preview content that you have in frames. Preview will display the content of each frame within the Timeline. If you want to display thumbnails of each filled and empty frame, select Preview in Context. This feature is useful when you are creating animations because you can view how the animation progresses over time.

For this project, you will use the default settings of normal sized frames and leave Tinted Frames selected.


Create a new keyframe and a frame on Layer 1 by choosing Insert > Timeline > Keyframe.

A new document has an empty keyframe in Frame 1 of Layer 1. When you added the Button component to the Stage in the previous exercise, the empty keyframe (hollow dot) turned into a keyframe (filled dot).


You can add content to the Timeline only if a frame or keyframe is selected and its layer is unlocked. If there are no frames on the layer you have selected, you must first create a keyframe to add content to.


You can create frames and keyframes using menu commands or keyboard shortcuts. If you Right-click or Control-click on a frame position, you can choose to insert Keyframes, Blank Keyframes, or Frames from the context menu. The keyboard shortcut F6 adds a keyframe, F7 adds a blank keyframe, and F5 adds a normal frame.

When you used the Insert menu to insert a keyframe, it placed the new keyframe in Frame position 2 of Layer 1. It also copied the graphic from the previous keyframe. Even though these keyframes are on the same layer, they are apart from each other. If you edit keyframe 2, the contents of keyframe 1 will be unaffected. When you insert a blank keyframe, the graphics are not copied from one keyframe to the next.

To insert a frame, select Frame position 3 of Layer 1 and use the keyboard shortcut F5. This extends the content in time, but you cannot change the content in a frame. It's a placeholder only.


Select, move, and delete frames on the Timeline by using your mouse and the Shift key.

You have already selected a frame in Step 4 by clicking on the frame. You can select multiple frames in a row by clicking the first frame, holding down the Shift key, and then clicking on the last frame. If you don't want to select continuous frames, hold down the Ctrl or Command keys while clicking individual frames. To select all the frames on the Timeline, Right- or Control-click and select Select All Frames from the context menu.

Select Frames 2 and 3 of Layer 1 (but not Frame 1) and then drag the selection to Frames 4 and 5. You are moving these two frames to a new location (or position in time).

Notice that Frame 1 now extends to Frame 3. If you want to copy and then move a keyframe instead, simply hold down the Alt or Option keys while dragging the selected keyframe to a new frame.


If you select a keyframe on the Timeline, everything on that keyframe is selected on the Stage. If you select an element on the Stage, it highlights the keyframe that it is in on the Timeline.


Delete the Button component and frames.

Because you don't need a button yet, delete the component from the Stage by selecting it with the Selection tool (black arrow) and by pressing either Backspace or Delete on your keyboard. You can also remove things from the Stage by Right- or Control-clicking the item and choosing Cut from the context menu.


Choosing Cut moves the item to the Clipboard, so that it can be pasted somewhere else. If you cut another item right after it, whatever was in your operating system's Clipboard will be purged and replaced with the new item. Deleting something is permanent; you can't paste a deleted item anywhere, but you can always undo to get it back by choosing Edit > Undo or using the keyboard shortcuts control or command+Z, whichever is relevant to your OS.

To delete frames, Delete and Backspace won't work. Using them deletes the contents of frames and keyframes, but not the frames and keyframes themselves. Select all the empty frames on the Timeline except for Frame 1; then Right- or Control-click on the selection and select Remove Frames from the context menu. You can also select Edit > Timeline > Remove Frames or the keyboard shortcut Shift + F5.


Save the changes you made to the document.

Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English © 2008-2017.
If you may any questions please contact us: