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 180 frames to accommodate the timing of the bark (assuming a frame rate of 12 frames per second), and repeating keyframes for the wagging tail artwork every 60 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 instance, 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) will be 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 19.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 19.1. This figure shows one method of diagramming Flash timelines.

In Figure 19.1, if the Main Timeline has a stop action on the first frame, all three Movie Clips will 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 19-2 shows a more practical diagram of a timeline hierarchy.

Figure 19.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 19.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 Property inspector, shown in Figure 19.3. To see the settings for a particular instance, you must have the instance selected on the Stage before referencing the Property inspector.

Figure 19.3. Among other things, the Property inspector 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.

Earlier in this chapter, you found out how multiple Movie Clip timelines appear on the Stage. It's entirely possible to nest several Movie Clips within another Movie Clip. To understand how Movie Clips communicate with one other by using actions, you need to have a firm grasp on Movie Clip paths. A path is simply that — the route to a destination, an address per se. If you have a Movie Clip instance named mcTailAnim inside a mcDog Movie Clip instance, how is Flash supposed to know? What if there was more than one mcTailAnim in the entire movie, with others nested in other Movie Clips besides the mcDog instance? You can specify a Movie Clip's path in an absolute or a relative mode.

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 Clips have a point of origin: the Main Timeline (that is, Scene 1). Flash CS3 only displays dot notation with absolute and relative paths.

Object.property = value;

Object.method();

mcBallAnim._xscale = 100;

mcBallAnim.gotoAndPlay("start");

Dot notation follows the ActionScript language conventions. With 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 we 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 Clips that contain several nested Movie Clips. 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 Clips 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, mcBarkingAnim, to its parent timeline (the mcDog timeline), and then look for the instance named mcTailAnim 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.

/dog

/dog/tailAnim

../

As with absolute paths, we 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 using dot notation.

Open the pianoKeys_starter.fla file. A keys Movie Clip instance is already on the Stage of the Main Timeline. Double-click the keys instance to enter Edit mode, as shown in Figure 19.9. Note that the Timeline window is docked to the left side of the Document window.

The timeline for the keysClip symbol has several layers for individual Button instances and labels. If you test this movie using Control

on (press, keyPress "a") {
   gotoAndStop ("key_1");
}
on (rollOver) {
   gotoAndStop ("keys_full");
}

These actions don't use any dot notation — they are simple navigation actions that you learned in the last chapter. When the keyButton_1 instance is clicked with the mouse, the Playhead moves to the key_1 label on the current timeline, which is the keysClip timeline.

Figure 19.9. The Timeline window showing the frames of the keysClip Movie Clip symbol

When the timeline goes to the key_1 frame label, a new PNG bitmap of a "pressed" piano key (key_01.png on the keys layer) appears on top of the keys_full.png bitmap that is placed on the bottom keysFull layer. Note that the keys_full.png bitmap is present throughout the entire keysClip timeline. Each Button instance in the keysClip Movie Clip sends the Playhead to the appropriate piano key frame label.

Now that you have an understanding of what's happening in this Movie Clip, let's create some sounds with the Behaviors panel. These sounds will be targeted within the mcKeys instance later in this chapter.

Before you start making sound instances, you need to establish a naming convention for your sounds. A naming convention is simply a way of consistently identifying components in any project, in or out of Flash. To a member of a Web production team, the importance of naming conventions cannot be overemphasized — everyone involved with the project should know how to give names to images, sounds, symbol names, instance names, and so on. Even if you work by yourself, a naming convention provides a system of integrating elements from project to project and enables you to identify elements much more easily when you open old files.

Now that you have behaviors set up for the sounds, you're ready to begin controlling the sounds with additional behaviors attached to keyframes in the keysClip timeline. This section of the exercise shows you how to add behaviors to the keysClip timeline that will target the sound instances.