Working with Movie Clips
Using targets and paths
Exploring absolute and relative paths
Using dot syntax
Controlling animated sequences with ActionScript
Unlike most multimedia authoring applications, Flash has the capability to use multiple simultaneous timelines in its movies. So far, most of the examples in this book have only one timeline. You've seen how to add basic actions to your movies to make them interactive. Now you begin exploring the world of multiple movie timelines by using the Movie Clip symbol.
A powerful piece to the Flash movie format is the Movie Clip symbol, introduced in Flash Player 3. Movie Clips enable Flash developers to create complex behaviors by nesting self-contained sequences of animation or interactivity inside each other. These sequences can then be placed as discrete, self-playing modules on the Main Timeline (that is, Scene 1). Initially, the key to the power of Movie Clips was their capability to communicate with and control each other via the tellTarget
action.
In Flash Player 4, the role of Movie Clips was expanded — they could be used with ActionScript. That capability put Movie Clips at the foundation of advanced interactivity in Flash. In Flash Player 5, when ActionScript matured into a full-blown scripting language that mirrored JavaScript, Movie Clips became the central object of programming. In Flash Player 6, Movie Clips could utilize more compiler directives, which enabled them to become full-blown user-interface components. In Flash Player 7, Movie Clips and components continued to evolve and play a vital role in the organization of a Flash movie's content and interactivity.
In Flash Player 8, Movie Clips gained new filter effects, blend modes, and bitmap-caching optimizations. With Flash Player 9, Movie Clips received a new sibling, the Sprite class, which is available only in ActionScript 3.0. (A sprite instance is essentially a single-frame Movie Clip instance, and is discussed more in the note that follows). With the release of Flash Player 10, the role of Movie Clips remains unchanged. In this chapter, you look at several key features of the Movie Clip symbol.
If you're planning on building projects written in ActionScript 3.0, the role of the MovieClip
class has changed dramatically. MovieClip
instances should be used only for multiple-frame timeline-based animations. In ActionScript 3.0, several new classes, including the Sprite
class, have been introduced to take over most of the functionality that was previously assigned to the MovieClip
class. Regardless of which version of ActionScript you plan to use, you should understand the fundamentals of the MovieClip
instances discussed in this chapter and throughout the book. This edition of the Flash Bible includes more coverage of ActionScript 3.0 (AS3). For more comprehensive coverage of ActionScript 3.0, refer to ActionScript 3.0 Bible (Wiley, 2008).
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:
During playback as a Flash .swf file, a Movie Clip instance placed on a timeline begins to play as soon as the frame on which it occurs is reached, whether or not the Main Timeline (or the clip's parent timeline) is playing.
A Movie Clip plays back autonomously, meaning that as long as it is present on the Stage it is not governed by the playing or stopping of the Main Timeline.
Movie Clips can play when the Main Timeline is stopped, or stay halted when the Main Timeline plays.
Like a Graphic or a Button symbol, Movie Clips can be manipulated on the Stage — you can size them, skew them, rotate them, place effects such as alpha blending on them, or tween them, all while the frames within them continue to play.
Movie Clip instances can use filter effects and blend modes. You create these effects in real time and set them in the Properties panel or with ActionScript code.
All timelines play at the frame rate specified by the Document Properties dialog box (Modify
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").
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.
The suffix Anim
is the naming convention I use to designate a symbol name (in the library) containing an animation. As you can see in Figure 16.3 I name the instance dog
, without any naming convention for the data type. You can derive your own naming convention if you'd like as long as you don't use spaces or special characters. You learn more about these concepts later in the chapter.
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.
If you already studied Movie Clips in Chapter 6, "Symbols, Instances, and the Library," you probably know that they provide the solution to our animated dog problem. However, you might not have guessed that Movie Clips can also add logic to animation and Flash interfaces. Let's take our animated dog example a little further: When dogs bark, their tails may stop wagging. Our hypothetical dog may look strange if it is barking and wagging at the same time. Suppose I wanted to stop the tail wagging during every bark. We'd have to have some way for the barking head Movie Clip to control the tail Movie Clip so that I could tell the tail to stop wagging when the dog barks, and then tell the tail to return to its wagging loop again when the bark is over.
Well, you have a few ways to control the tail Movie Clip from the barking head Movie Clip. In Flash Players 3 and 4, the tellTarget
action was used to let actions on any timeline (including Movie Clip timelines and the Main Timeline) control what happens on any other timeline. How? tellTarget
simply provided a mechanism for extending basic actions such as play
and stop
, enabling them to specify (or target) the timeline upon which they should be executed. Targets are any Movie Clip instances that are available at the current "state" of a Flash movie — you can't target a Movie Clip that isn't displayed (or existing) on the Stage. For example, suppose you had two Movie Clips, one on frame 1 and another on frame 10 of the Main Timeline. If the Main Timeline was stopped on frame 1, you couldn't target the Movie Clip on frame 10 because the instance is not on the current frame.
Since Flash Player 5, developers have been able to direct actions to specific timelines by attaching the same actions as methods to a MovieClip
object (I define methods in the sidebar, "What Is Dot Syntax?"). As such, the tellTarget
action is a deprecated action; it's still supported in current Flash Players, but it's been replaced with more versatile actions and syntax that make its use outdated. For an overview of deprecated actions, see the sidebar on deprecated actions in Chapter 17. In this chapter, you work exclusively with the preferred ActionScript dot syntax to control Movie Clip instances. First, however, you need to understand how targeting works in Flash movies.
If you're new to scripting, read the "What Is Dot Syntax?" sidebar.
If you're building Flash movies for mobile devices with Flash Lite 1.0/1.1, you need to use the tellTarget
action to control Movie Clip instances. Flash Lite 1.0/1.1 is based on the Flash Player 4 specification.
Earlier in this chapter, you found out how multiple Movie Clip timelines appear on the Stage. It's entirely possible to nest several Movie Clip instances within another Movie Clip instances. To understand how Movie Clip instances communicate with one another 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 tailAnim
inside a dog
Movie Clip instance, how is Flash supposed to know? What if there was more than one tailAnim
in the entire movie, with others nested in other Movie Clip instances besides the dog
instance? You can specify a Movie Clip instance'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 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 and dot syntax are synonymous terms and are used interchangeably throughout this book.
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.
You can directly control the Main Timeline by using the reference root
. The root
keyword is specific to ActionScript 3.0. If you're planning to develop with ActionScript 1.0 or 2.0, use the legacy keyword _root
. This edition of the Flash Bible exclusively covers ActionScript 3.0. For information about ActionScript 1.0 and 2.0, refer to past editions of the Flash Bible (Wiley).
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.
In this section, you see how to make Movie Clips interact with one another by using dot notation and ActionScript. Specifically, you're going to create the barking and wagging dog example I discuss at the beginning of this chapter. You begin this exercise with a starter Flash document file (.fla) located on the book's CD-ROM.
Open the stella_starter.fla
file found in the ch16/stella
folder of this book's CD-ROM.
With the starter file open in Flash CS5, test the movie by using Control
bark.wav
: This is the sound file used for Stella's bark. You will find this sound on the bark layer of the barkAnimClip timeline.
BarkAnim: This Movie Clip symbol contains the animation for Stella's barking head. If you double-click this symbol in the Library panel, you'll see that the timeline has two layers, one for the sound and another for the head animation. This symbol is used in the stellaClip symbol.
BodyGraphic: This graphic symbol is artwork of Stella's body and legs. There is no animation on its timeline. The BodyGraphic symbol is used in the Stella symbol.
HeadGraphic: This Graphic symbol is artwork of Stella's head. You'll find a couple of instances of this symbol in the BarkAnim symbol.
Stella: This Movie Clip timeline contains instances of the BarkAnim, BodyGraphic, and TailAnim symbols.
TailAnim: This Movie Clip symbol contains two instances of the TailGraphic symbol. Each instance is rotated differently to create the wagging effect.
TailGraphic: This Graphic symbol contains the artwork for Stella's tail.
Now, you're going to add some behaviors to the movie. First, you'll need to name the instances in the movie. ActionScript can find a Movie Clip instance only by its instance name. Using the Properties panel, you'll add instance names to all the Movie Clip instances.
After the instances are named, you can then target the instances with ActionScript. In this example, you'll target the tailAnim
instance from the barkAnim
instance. When the keyframe containing the barking mouth inside of barkAnim
is reached, the movie tells tailAnim
to go to and stop on a specific frame. When the barking is over, tailAnim
is told to continue playing.
With stella_starter.fla
open in Flash CS5, resave the document as stella_absolute.fla
. In this tutorial, you use absolute paths with your targets.
Select the instance of the Stella symbol on the Stage, on the Main Timeline. Open the Properties panel, and name the instance dog
in the instance name field, as shown in Figure 16.4.
Double-click the dog
instance on the Stage to edit the Stella symbol in the Library panel. Select the BarkAnim
symbol instance, and again, using the Properties panel, name this instance barkAnim
in the instance name field.
Select the TailAnim
symbol instance located on the tailAnim layer. Name the instance in the Properties panel, using the name tailAnim
.
With all the Movie Clip instances named, you can now target actions to specific timelines. Your first goal is to stop the wagging tail while Stella barks. Double-click the barkAnim
instance to edit the BarkAnim symbol's timeline.
On the BarkAnim timeline, create a new layer and rename it actions
. Place this layer at the top of the layer stack. On frame 14 of this new layer, insert an empty keyframe (F7). Frame 14 is the frame just before the stream sound on the bark layer begins. On frame 14, you want to tell the tailAnim
instance to stop playing, so give this keyframe a frame comment that indicates this behavior. With the keyframe selected, open the Properties panel and, in the frame label Name field of the Label section, type stop wagging and choose Comment in the Type menu, as shown in Figure 16.5.
After you have assigned a comment on the frame, you're ready to write the ActionScript to perform the described behavior.
With frame 14 selected on the actions layer, open the Actions panel (F9/Option+F9) Make sure that you are not working in Script Assist mode. Click the Target Path selector icon (see Figure 15.1 in Chapter 15 for its location). The Insert Target Path dialog box opens. Click the plus icon (+) on Windows or the twirl-down arrow on Mac next to the dog
instance to reveal the nested instances, barkAnim
and tailAnim
, as shown in Figure 16.6. Select the tailAnim
instance because it contains the wagging animation that you want to stop. Finally, make sure that the Absolute option is selected in the Mode setting. Click OK.
In the Script pane of the Actions panel, you now see the path to the instance Object(root).dog.tailAnim
.
When you use the Insert Target Path menu, Flash places the word Object before root and wraps root in parentheses. This is called typecasting and is part of the formal best practice for using the root keyword. However, your code will still work without it, so you can consider it optional. For more information about typecasting, see ActionScript 3.0 Bible (Wiley, 2008).
After this name, type .stop();
. As described in the last chapter, the stop()
action halts a playing timeline. When you are finished, the Script pane should contain the following code:
Object(root).dog.tailAnim.stop();
You can see code hints if you use ActionScript 3.0 strong data typing with a variable name. To try this technique, delete the line of code from Step 8, and type the following code:
var mc:MovieClip = Object(root).dog.tailAnim;
After you've declared a variable and its data type, the Actions panel can display code hints for that data type. On line 2, type:
mc.
As soon as you type the period (. ) after the variable name mc
, the Actions panel displays all the properties and methods of the MovieClip
class. You can click the entry you want to use, and the Actions panel adds it to the existing line of code. If there are other parameters for the new code, the Actions panel displays code hints for those parameters as well.
Use this same technique to tell the tailAnim
instance to start playing again after the bark has ended. In the BarkAnim symbol timeline, create yet another actions layer. You can make more than one to prevent overlap of your frame comments. Place this new actions layer beneath the original actions layer. On frame 23 of this second actions layer, insert an empty keyframe (F7). Assign a frame comment of //start wagging in the Label section of the Properties panel for this keyframe.
Repeat Steps 7 and 8 for the action on this keyframe. This time, however, type a .play();
action from the code hints menu in the Actions panel. When you are finished, the following code should be on frame 20 of the actions layer:
Object(root).dog.tailAnim.play();
Test your movie. Save the Flash document, and use Control
This example has shown you how to target Movie Clip instances by using absolute paths built with the Insert Target Path dialog box in the Actions panel. However, you can also try using relative paths to target the instances. In the ch16/stella
folder of the book's CD-ROM, open the stella_relative.fla
file to see an example of relative path addressing. Note that this example also uses a gotoAndStop(4)
action on the //stop wagging
keyframe to make sure that Stella's tail is pointed down during the bark. You can also find a completed example file for the exercise you just completed, stella_absolute.fla
.
Movie Clips are a cornerstone of Flash interactivity for ActionScript projects. Each Movie Clip has its own independent timeline and playback.
Each Movie Clip instance needs a unique name on any given timeline. You cannot reuse the same name on other Movie Clip instances on a timeline. You can, however, use the same instance name on different timelines.
There are two types of target paths for Movie Clips: absolute and relative. Absolute paths start from the Main Timeline and end with the targeted instance name. Relative paths start from the timeline that's issuing the action(s) and end with the targeted instance name.
The Insert Target Path dialog box can help you build the path to a Movie Clip instance to use with another action.