The Timeline


The timeline, shown in Figure 8.15, is basically a visual navigation tool and storage device that provides access to all the elements in your Flash project. It is basically a graph in two dimensions. Time (expressed in frames running from left to right) is placed along one axis, and content (stored in layers stacked on top of each other) is placed along another axis. You can access any particular point in time and space of your movie by clicking on that point in the timeline.

Figure 8.15. The timeline.


To understand the timeline, a basic understanding of animation is helpful. Animation works by showing a series of visuals that change over time. Slight differences in each image can make it appear as though the drawn object is moving. In Flash, each change in the visual information occurs at a certain time that is referred to on the timeline as the frame number. The visual change that occurs on that frame number can occur on one or many different layers in the document in a storage device called a keyframe.

So, much like a music score, the change over time is graphed on the horizontal scale with frame numbers, and the visual (or code) elements in the document are stored on the vertical axis as keyframes. Every keyframe in every layer at a certain frame number is played simultaneously. This is discussed more in Chapter 10, which covers animation and the basic elements of Flash.

As important as the timeline is to organizing the overall project, it can consume precious screen real estate that can often be dedicated better to creating the content of each keyframe during author-time. In previous versions of Flash, you could collapse the timeline. In Flash 8, you can now completely hide the timeline in the authoring environment with a button interface under the tab with the filename at top of the document panel (see Figure 8.16).

Figure 8.16. Button for collapsing the timeline.


Layers and Layer Folders

You can think of a movie as a stack of transparent sheets that you have painted with the elements of your animation (see Figure 8.17). If you were to look through the stack of sheets, you would see the painted areas of the sheets below, as long as they were not covered by an area where the sheet above it is painted. In Flash, rather than use sheets of transparent paper, you use layers.

Figure 8.17. A stack of transparent sheets with artwork.


One thing that often confuses new Flash authors is the stacking order of layers in a Flash movie. In a Flash movie, the stacking order matches the spatial orderin other words, the closer the layer is to the top, the more above the stage it will be. The bottom layer on the timeline is always the closest layer to the stage visually. You can think of the stage as a desk on which the stack of sheets is sitting. The sheet on top of the stack is the farthest from the surface of the desk.

Dragging one layer above another changes the stacking order of layers. You can also select several layers and drag them at once.

To add a new layer, click on the Add Layer button at the bottom-left corner of the timeline. You can also add a new layer by right-clicking on the name of an existing layer, and selecting the Insert layer from the context menu. To delete a layer, you can click on the Delete button or right-click on the layer's name and select Delete Layer.

Layer folders can help keep layers organized when a project gets big or complex. You can use them to group related layers into a folder that can be expanded or collapsed as you work (see Figure 8.18). You can drag any layer into or out of any folder after the folder has been created. If you select multiple layers into a folder, their order before being moved is maintained in the folder.

Figure 8.18. Timeline with folders, open and closed.


Frames and Keyframes

Sometimes the references to frames in Flash can get a bit confusing. As mentioned previously, frame numbers on the timeline tell you where you are in terms of time in an animation. Frames are represented visually on the timeline as rectangular boxes with nothing in them. Frames add time for the content of a keyframe to play. Their only function is to play whatever the previous keyframe (to their left) contains.

A keyframe is a frame that stores a reference to content on the stage that occurs at that frame number and on that layer. Keyframes that include graphic content are represented by a filled circle on the timeline.

A blank keyframe is represented by an open circle in a frame (see Figure 8.19). This is a keyframe without any visual content. Blank keyframes also serve as a place for code to be attached so that it runs when the playback reaches that particular frame. A blank keyframe therefore is a good place to store your frame-based code. Keyframes with code attached always have a small letter a above them to let you know they contain code.

Figure 8.19. Frames and keyframes (filled and empty) on the timeline.


Onion Skinning and Multiple Frame Editing

Onion skinning is a viewing mode that lets you see the previous frame while drawing in a new frame. The term comes from traditional animation techniques, which used "onion skin" paper that was thin, like the layers of skin on an onion. The paper allowed the animator to see through the layers of drawings as they worked on them.

This sounds a lot like working with layers, so what's the difference between layers and onion skinning? With layers, you see everything that is on all the layers at a certain point in time as if looking through a single stack of transparent sheets. With onion skinning, you view the visuals in keyframes for more than one frame at a time.

Onion skinning is not visible when you publish your .swf file; it's just an author-time tool. You can toggle any of the onion skinning options on and off at any time in the authoring environment with buttons on the bottom of the timeline. Figure 8.20 shows onion skinning turned on for a short animation. The position of the circle at each frame is visible on the stage at once. If you use the outline option for onion skinning, just the outlines of the visual elements for each frame are visible, except for the frame currently being edited. If you'd like to have more than one frame available for editing at once, set the Edit Multiple Frames option, which makes all keyframes within the onion markers. To set the onion markers (the brackets on the number line of the timeline) drag the brackets along the timeline.

Figure 8.20. Onion skinning toggle buttons.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net