Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Working with the Timeline

As you create the new Flash document, you'll work with the timeline to organize the various elements of the document and plan the content changes over time to create a movie. First, you'll need to organize the project so that you can identify the individual components more easily and work with each discrete element independently to animate them.

If you're new to Flash, you should think of it like any film you might watch. The individual rectangles in the timeline represent frames, and each frame contains information about the appearance of the movie for the instant the frame is active. Then Flash moves on to the next frame and shows its content, and so on, until it gets through the movie.

Flash has two kinds of frames: static frames and keyframes. A keyframe is a frame in which content is able to change. Something can move, be added to, removed from, or change appearance on the stage in a keyframe. In fact, one of the most important things to understand about working in Flash is this axiom: "All changes occur in keyframes." The first frame of every layer in the timeline is a keyframe. A static frame is a frame whose contents are the same as the content in the preceding keyframe (that is, the closest keyframe to its left).

Consider this example. Imagine you wanted a circle to suddenly appear in an animation, but after it appeared, it would just sit on the stage. To make the circle appear, you would create a keyframe and draw a circle on the stage. Now remember, each frameeven keyframeslast only a fraction of a second, before Flash moves on. But you want that circle to last for several seconds. The solution is to add a couple dozen static frames after the keyframe, all of which would show the circle. Now imagine that after these seconds expire, you want the circle to disappear. You could achieve this by creating another keyframe and deleting the circle from the stage.

The following figures show the timeline and stage with two different frames selected: Frame 1 and Frame 12. What do you think the stage would look like with Frame 48 selected?

[View full size image]

The major components of the timeline are layers, frames, and the frame indicator. One way to think of layers is to imagine multiple filmstrips stacked on top of each other, each containing a different image that appears on the stage. Like films, Flash movies divide lengths of time into frames. The frame indicator is the red rectangle above the timeline that represents the active frame. You can drag the frame indicator back and forth to preview an animation.

[View full size image]

This timeline reveals that the document so far has only one layer, named Layer 1. Clicking any frame in the timeline takes you directly to that frame and displays its contents on the stage.

As mentioned earlier, layers allow developers to specify the layer stacking order, which determines the visibility of elements relative to one another. Specifically, if two opaque elements overlap, the one on the higher layer will obscure the one on the lower layer. In addition, isolating elements by organizing them into separate layers is critical when it comes to animating the elements independently.

Clearly, one layer isn't going to be enough. You'll need to add some new layers. After the new layers are created, you'll move elements out of their current layerLayer 1and into one of the new ones.

This step adds a new layer directly above the selected layer (Layer 1 in this case). When you click the button, you see a new layer with a default layer name (most likely Layer 2) appear above Layer 1.

Notice that the new layer has only an empty keyframe in Frame 1.

You'll need nine layers in this timeline to create the Organic Farming Flash movie. You already have two layers (Layer 1 and Layer 2) in the timeline, so you need to add six more. You'll then have layers from Layer 1 to Layer 8.

Tip

You can increase or decrease the space used to render the timeline and the stage. To do so, hover your cursor between the timeline and the Document window, until you see a bidirectional cursor. Press and drag up or down to resize the timeline .

The names of layers are currently not very descriptive. You can rename them so that you can tell which content will go to which layer.

The layer names are descriptive enough that you understand which elements will go where. Some of the layersin particular the actions and labels layersmight not have an immediately obvious purpose now. As you'll see later, the actions layer will be used to hold the ActionScript that will make the button functional. The labels layer will hold bookmark-like frame labels, which will make it easier to write the ActionScript for the button.

The file is saved as a Flash FLA (pronounced "flahh") file.

One aspect of Flash that confuses new users is that two different file types are associated with Flash: the FLA and the SWF file formats. Flash authoring files (FLA files) are used when you're working on the files in Macromedia Flash. When you choose File > Save, Flash will save your document in this file format, adding the extension name, FLA. Flash documents, which have the FLA filename extension, contain all the information required to develop, design, and test interactive content. To open a FLA, you must have Macromedia Flash. You've been working in a FLA ever since you opened Flash and chose Create New Flash document.

Flash Player files (SWF files, pronounced "swiff") are the output files for the free Flash Player that the end user actually sees, often (but not necessarily) in a Web browser. In other words, you work on FLA files, and when you're finished, you publish and distribute them as SWF files.