RSS feed Home
Search:

Using the Timeline and Frames

Getting Started The Basics Animation ActionScript Video Publishing

the flash timeline

The timeline contains layers, and each layer contains frames. The red rectangle at the top of the layers is called the playhead, and if there is more than one frame, is used to move through a timeline. Using the mouse to drag it left or right, scrubs through an animation or presentation on the stage. A solid dot means the frame has objects placed there, the hollow dot means the frame is empty, (no objects on that frame on that layer).

Keyframes

When you have keyframes within a layer, you create the animation between them by creating a classic tween, or a motion tween. You can also apply shape tweening to two separate objects. You can choose between two selection modes in Flash. The default mode is frame-based selection. In this mode, frames are treated as individual elements. When spanbased selection is chosen, Flash treats frames as part of a frame span, which means all of the frames adjacent to a keyframe are selected as a unit.

Top

Using Labels, Comments and Anchors

frame label

Frame labels allow you to refer to a frame by its label instead of its number. Frame comments allow you to write notes, or comments, in frames of your movie and are not exported, so you can include as much information in them as you want.

Anchors

By identifying a keyframe on the main timeline as a named anchor, you make it possible for Web browsers to recognize those points as regular HTML pages. This means that viewers can navigate Flash movies using the Back/Forward buttons of their Web browsers—just as they would a typical Web page. As the viewer interacts with your movie, Flash records his or her navigation path—so that the user can then employ the browser's Back/Forward buttons to move backward or forward in the movie. In addition, named anchors make it possible to bookmark keyframes—which means users can quickly return to a given point in a Flash movie simply by clicking that bookmark .

anchor preferences

When using scenes to separate content within a movie, you can enable Flash to automatically insert a named anchor at the beginning of each new scene. To do this, open the Preferences dialog box (Edit > Preferences...), select the General tab, and then check the Named Anchor on Scene option.

Top

Layers

Layers dictate the stacking order of objects by their own order in the list. Objects on the topmost layer will be in front of objects on lower layers. Within a single layer, each frame can contain one or several object. When you want to animate that object, you insert a new keyframe into the timeline. This new keyframe is where you make the changes.

Create new layers by clicking on the New Layer icon at the bottom left of the timeline. Delete layers by selecting them and then pressing the Trash icon at the bottom of the timeline.

Organize layers using Layer folders, click the folder icon to add a folder layer. Once a folder is made, layers can be put inside to manage your projects.

Each layer has three dots that represent hide, show, lock and outline (for a wire frame version of your objects). Lock the layers by clicking on the dot under the lock icon next to the layer name. Hide layers by clicking the dot under the eye. Lock, or hide, all layers by clicking on the actual lock or eye icon at the top. Locking a layers prevents you from altering the contents, but doesn't prevent you from adding, deleting, or rearranging frames on that layer. You can add ActionScript to a locked layer.

Motion Guide Layers

Create a classic motion guide layer by right-clicking on a layer and choosing Add Classic Motion Guide. The motion guide layer affects any layers indented under it. Anything you draw on a motion guide layer, or a general guide layer, does not export with the final movie.

On the motion guide layer, use the pencil or line tool to draw the path you want something to follow as it moves. For instance, if you wanted to move a bumble bee in spirals across the stage, you would draw a loopy spiral on the guide layer. Once you create the path, lock the layer to prevent messing it up later.

Any layers tucked in below a motion guide layer should contain the symbol(s) you want to move, along with a classic tween that creates the motion. See the section on tweening for more details. If you are using the "new" motion tween, you do not need to use motion guide layers.

Masking Layers

A masked layer affects all layers tucked in underneath it.

To create a mask layer, you must use the layers properties dialogue box: Modify > Timeline > Layer Properties, or double-click the layer icon to open the Layer Properties panel, or Control-click and select Mask from the contextual menu.

Any images you draw on a mask layer become windows or holes through which you can see objects on layers tucked in below it. As those objects move, they appear in the window and then disappear as they move past it. You can see the effect of this on stage by hiding the mask layer, or using Command Return to test the movie.

A masked layer can affect multiple layers, and you can create those links using the layers properties dialog box (or dragging a layer directly beneath the mask layer). Any layer you want to connect to a mask layer needs to be tucked underneath the mask layer: drag it into position or use Modify > Timeline > Layer Properties and specify it as a Masked layer.

Masking With ActionScript

Top

Onion Skinning

The two options for onion skinning (just below the frames at the bottom of the timeline) are Onion Skin which shows previous frame objects in paler colors, or Onion Skin Outlines, which just shows you the wire frame of the objects.

When you select an onion skinning option, Flash indicates the frames being viewed with a grey marker at the top of the timeline. To see more or fewer frames, pull the edges of the indicator in or out.

To move all the objects on a layer, or within a tween to a different location on the stage, click on the Edit Multiple Frames button, and drag the grey bar so it covers the frames you want to affect. Lock the layers you dont want moved. Click on the artboard area to deselect everything. Then press control A to select everything in key or property frames and move or transform them all at once. Deselect the Edit Multiple Frames option when you are done.

Frame Rate

To the right of those is the frames per second indicator; speed up the rate by clicking this icon and sliding your mouse to the right. Good FPS settings for web-based Flash projects is 12-24. If you are working with embedded video, set the fps to 29. The higher the frame rate, the more frames you need for an animation. Use fewer or more frames to speed up or slow down the animation

Timeline and Frames with Actionscript

Top