Flash CS4 Timeline Workflow

Beginners in Flash sometimes find it difficult to organize the Timeline well. Look at the example below (click all three buttons) and then examine the Timeline below that.

In Flash -- as in Photoshop, Illustrator, etc. -- building with layers is part of the normal workflow. There is no need to be stingy with layers. In fact, the more layers, the better! Layers help you keep all the parts of your movie organized.

The layer stack order affects what is in front of (or on top of) what -- so here the "foreground plants" are in front of "fishy," and "fishy" is in front of the buttons.

Separation of Tweens into Layers

Note that there are THREE TWEEN LAYERS in this Timeline: "fishy," "crab," and "starfish." These moving objects MUST BE on separate layers. The bright blue spans in the Timeline are the motion tweens.

Layer Breakdown

1. actions -- Always on top. Nothing in this layer except ActionScript. Note the small letter "a" on the keyframes.
2. labels -- Always the second layer, if you have frame labels in your movie. (Some FLAs do not need any labels.) Nothing should ever be in this layer except the frame labels. Putting the labels elsewhere is not a good professional practice.
3. foreground -- This layer is optional. In this example, it has some sea grass in it. The grass is not a symbol; it does not move or change, so it does not need to be a symbol.
4. fishy: tween layer (animation) -- The motion tweens in Flash CS4 MUST BE alone in their layer. If we had multiple tweens of the same symbol (Fishy), they could be in this layer. But NO OTHER symbols can be in this layer.
5. button text -- This layer is optional. In this example, one button symbol is used three times, and so the text is laid on top of the buttons. Putting this text in its own layer makes it easy to position, because you can LOCK the buttons layer below it.
6. buttons -- The best practice is always to keep buttons together in their own layer, with nothing else in the layer. In most FLAs, the buttons would be layer 3, but here I wanted the fishy to swim over top of (in front of) the buttons.
7. crab: tween layer (animation) -- See fishy (number 4).
8. starfish: tween layer (animation) -- See fishy (number 4).
9. background -- This layer is optional. In this example, it has sea grass in it. As in the foreground layer, this grass is not a symbol.

Relationship of ActionScript to Frame Labels

Note that a stop(); action must precede a frame label. That is, if a frame label is on frame 15, then the stop(); action for the previous sequence must be on frame 14. Otherwise, you will have to click twice to make a gotoAndPlay(); work. (That would be a bad result.)

Formatting the Layers

Finally, note that all nine layers have been extended to the same length. Although this is not necessary for any technical reason, it is a good professional practice. As your Flash movies become more complex, keeping your Timeline layers tidy and easy to "read" at a glance becomes more important for your workflow and efficiency.

Symbols in the Library

Above is the Library for this movie. There are three Graphic symbols (as you would expect) and one Button symbol (Pushie).

If you do not need to manipulate a symbol with ActionScript, then it can be a Graphic symbol and not a Movie Clip symbol. Some people make everything a Movie Clip symbol, and there's probably nothing wrong with that.

DOWNLOAD There is no download for this example.

Education use: This package was created as an example for my journalism students. It is not intended to be used commercially.

Use and re-use: How to Use Flash CS4 Timeline Workflow by Mindy McAdams is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Updated 14 March 2010