Previous chapters dealt with Flash movies as a single sequence of frames arranged along a single timeline. Whether the playback along that timeline was linear (traditional animation) or nonlinear (where the playhead jumps arbitrarily to any frame), our example movies have normally comprised only the frames of a single timeline. Ostensibly, a single timeline may seem to provide everything you'd need to create any Flash behavior, but as you get more inventive or ambitious, you'll soon find yourself conceiving ideas for animated and interactive segments that are thwarted by the limits of a single timeline.

Suppose that you want to create a looping animation of a dog with its tail wagging. You decide that the tail should wag every 5 seconds and the dog should bark every 15 seconds. On a single timeline, you'd need a loop of 360 frames to accommodate the timing of the bark (assuming a frame rate of 24 frames per second), and repeating keyframes for the wagging tail artwork every 120 frames. Although animating a dog in that manner would be a bit cumbersome, it wouldn't be impossible — until your dog had to move around the screen as an integrated whole. Making the bark and the wagging tail loop while the whole dog moved around complex paths for extended periods of time would quickly become impractical, especially if the dog was only one part of a larger environment.

Now imagine that you could make the dog by creating two whole separate movies, one for the tail and one for the barking mouth and sound. Could you then place those movies as self-contained, animated objects on the Main Timeline, just like a graphic or a button? Well, you can — that's what Movie Clips are all about. Movie Clips are independent sequences of frames (timelines) that can be defined outside the context of the Main Timeline and then placed onto it as objects on a single frame. You create Movie Clips the same way you create a Graphic symbol in Edit mode. Unlike a graphic symbol, a Movie Clip (as the name somewhat implies) acts in most cases just like a fully functional movie or .swf file, meaning, for example, that frame actions in Movie Clip timelines are functional. After you have created a Movie Clip as a symbol, you drop instances of it into any keyframe of the Main Timeline or any other Movie Clip timeline. The following are some general Movie Clip principles:

In our dog wagging and barking example, the tail and head of the dog could be looping Movie Clips, and then those Movie Clips could be nested inside another Movie Clip symbol (representing the entire dog). This "whole" dog clip could then be tweened around the Stage on the Main Timeline to make the dog move. You could use the same principle to move a Movie Clip of a butterfly with flapping wings along a motion path.

Because a Flash movie can have more than one timeline existing in the same space and time, there must be a way to organize Movie Clips within the Main Timeline (Scene 1) of your Flash document. Just as artwork can be placed inside any symbol, symbol instances can be nested within other symbols. If you change the contents of the nested symbol, the parent symbol (the symbol containing the other symbol) is updated as well. Although this may not seem special, it's of extreme importance to Movie Clips and Flash interactivity. Because the playback of each Movie Clip timeline is independent from any other timeline, you need to know how to tell Flash which Movie Clip you want to control.

The Flash movie diagram in Figure 16.1 illustrates multiple timelines. This Flash movie has two layers on the Main Timeline: Layer 1 and Layer 2. Layer 1 has a Movie Clip (instance "A") that exists for 19 frames on the Main Timeline. Layer 2 has a Movie Clip (instance "B") that exists for 10 frames on the Main Timeline, but it also contains a nested Movie Clip (instance "C").

Figure 16.1. This figure shows one method of diagramming Flash timelines.

In Figure 16.1, if the Main Timeline has a stop action on the first frame, all three Movie Clips continue to play unless there are stop actions on their first frames or they are told to stop by actions targeted to them. If the Main Timeline plays to frame 20, instance "A" will no longer be on the Stage, regardless of how many frames it may have on its timeline. Figure 16.2 shows a more practical diagram of a timeline hierarchy.

Figure 16.2. Flash movies can be flow-charted in this fashion. This diagram is similar to the Movie Explorer's method of displaying Flash movie information.

In Figure 16.2, you can see three Movie Clips. Two of them, ballAnim and dog, occupy space on the Main Timeline. The other one, dogTailAnim, is nested within the dog Movie Clip. Each Movie Clip instance on any given timeline must have a unique name — you can't have two or more Movie Clip instances on the same timeline using the same instance name. The instance name is specified in the Properties panel, as shown in Figure 16.3. To see the settings for a particular instance, you must have the instance selected on the Stage before referencing the Properties panel.

Figure 16.3. Among other things, the Properties panel enables you to name each Movie Clip instance that appears on the Stage.

Now that you understand how multiple timelines can exist within a Flash movie, let's see how you can make Movie Clips communicate with one another.

An absolute path is the full location information, or target, for a given Movie Clip instance from any other location (or target). Just like your postal address has a street name and number and a ZIP code so that people can find you on a map, all Movie Clip instances have a point of origin: the Main Timeline (that is, Scene 1). Flash CS5 only displays dot notation with absolute and relative paths.

Dot notation follows the ActionScript language conventions. With ActionScript 3.0 dot notation, the Main Timeline becomes

root

A Movie Clip instance named dog on the Main Timeline (or root) would have an absolute path of

root.dog

Notice that a period, or dot, separates the term root from dog. The dot denotes a parent-child relationship; the dog instance is a "child" of its parent, root. And, following suit, a Movie Clip instance named tailAnim that is nested within the dog Movie Clip would have the absolute path of

root.dog.tailAnim

A relative path is a contextual path to one timeline from another. From a conceptual point of view, think of a relative path as the relationship between the location of your pillow and the rest of your bed. Unless you have an odd sleeping habit, the pillow is located at the head of the bed. You may change the location of the bed within your room or the rooms of a house, but the relationship between the pillow and the bed remains the same. Another example that can illustrate the difference between absolute and relative references is the postal address example I used earlier. An absolute reference to your residence would use your full street address, city, state, and ZIP code. However, if you're giving directions to a friend of yours who lives nearby, you're more likely to tell your friend, "From your house, walk two blocks down A street, and turn right on B street. I'm five houses down on the left side of the street."

With Flash, relative Movie Clip paths are useful within Movie Clip instances that contain several nested Movie Clip instances. That way, you can move the container (or parent) Movie Clip from one timeline to another and expect the inner targeting of the nested Movie Clip instances to work. To refer to a timeline that is above the current timeline in dot notation, use

this.parent

Here, the term this refers to the current timeline from where the action is being called, and parent refers to the current timeline's parent timeline. You can use relative dot notation to refer up and down the hierarchy at the same time. For example, if you have two nested Movie Clips, such as tailAnim and barkingAnim, within a larger Movie Clip named dog, you may want to target tailAnim from barkingAnim. The relative dot path for this task is

this.parent.tailAnim

This path tells Flash to go up one timeline from the current timeline, barkingAnim, to its parent timeline (the dog timeline), and then look for the instance named tailAnim from there.

You can also use successive parent references to travel up in the timeline hierarchy multiple times, such as

this.parent.parent

Using the dog instance example again, if you wanted to control the Main Timeline (which is the parent timeline of the dog instance) from the tailAnim instance, you could use parent.parent in the target path of an action executed from the tailAnim timeline.

As with absolute paths, I recommend that you become familiar with using the dot notation for relative paths.

Okay, that's enough theory. Now, you're going to practice nesting Movie Clips inside of other Movie Clips, as well as target actions at specific instances by using dot notation.