Targeting Movie Clips in Flash 8

In this section, you'll 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 we 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.

On the CD-ROM 

Open the stella_starter.fla file found in the ch19/stella folder of this book's CD-ROM.

With the starter file open in Flash 8, test the movie using Control ð Test Movie. You'll see that our dog, Stella, is wagging her tail. At timed intervals, she will bark. Right now, her tail keeps wagging as she barks. In this exercise, we'll show you how to stop her tail from wagging while she is barking. Close the Test Movie window and take a look at the Library panel. You'll find the following assets listed:

• 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.

• barkAnimClip: 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 Movie Clip 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 stellaClip Movie Clip symbol.

• headGraphic: This Graphic symbol is artwork of Stella's head. You'll find a couple of instances of this symbol in the barkAnimClip symbol.

• stellaClip: This Movie Clip timeline contains instances of the barkAnimClip, bodyGraphic, and tailAnimClip symbols.

• tailAnimClip: 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.

Tip 

As you can see by the names of the symbols, you can adopt naming conventions for your symbol types in the Library panel. All Movie Clip symbols use a "Clip" suffix, and Graphic symbols use a "Graphic" suffix. A naming convention can help you quickly identify the type of asset just by looking at its name.

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 Property inspector, you'll add instance names to all of the Movie Clip instances.

Once the instances are named, you can then target the instances with ActionScript. In this example, you'll target the mcTailAnim instance from the mcBarkAnim instance. When the keyframe containing the barking mouth inside of mcBarkAnim is reached, the movie will tell mcTailAnim to go to and stop on a specific frame. When the barking is over, mcTailAnim will be told to continue playing.

1. With stella_starter.fla open in Flash 8, resave the document as stella_absolute.fla. In this tutorial, you use absolute paths with your targets.

2. Select the instance of the stellaClip symbol on the Stage, on the Main Timeline. Open the Property inspector, and name the instance mcStella in the <Instance Name> field, as shown in Figure 19-4. Rename the stella layer to mcStella as well.

3. Double-click the mcStella instance on the Stage to edit the stellaClip symbol in the Library. Select the barkAnimClip symbol instance, and again, using the Property inspector, name this instance mcBarkAnim in the <Instance Name> field. Rename the barkAnim layer to mcBarkAnim.

4. Select the tailAnimClip symbol instance located on the tailAnim layer. Name the instance in the Property inspector, using the name mcTailAnim. Rename the tailAnim layer to mcTailAnim.

5. With all of the Movie Clip instances named, you can now target actions to specific time-lines. Your first goal is to stop the wagging tail while Stella barks. Double-click the mcBarkAnim instance to edit the barkAnimClip symbol's timeline.

6. On the barkAnimClip 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 mcTailAnim instance to stop playing. So, let's give this keyframe a frame comment that indicates this behavior. With the keyframe selected, open the Property inspector and, in the <Frame Label> field, type //stop wagging, as shown in Figure 19-5.

7. 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). Make sure you are not working in Script Assist mode. Click the Target Path selector icon (see Figure 19-5 for its location). The Insert Target Path dialog box will open, as shown in Figure 19-6. Click the plus icon (+) next to the mcStella instance to reveal the nested instances, mcBarkAnim and mcTailAnim. Select the mcTailAnim instance because it contains the wagging animation that you want to stop. Finally, make sure the Absolute option is selected in the Mode setting. Click OK.

8. In the Script pane of the Actions panel, you now see the path to the instance _root.stella_mc.tailAnim_mc. After this name, type .stop();. As you learned in the last chapter, the stop() action will halt a playing timeline. When you are finished, the Script pane should contain the following code:

    _root.mcStella.mcTailAnim.stop(); 

   Tip 

   If you use the _mc suffix naming convention with your Movie Clip instances, the Actions panel displays a code hint menu when you type the period (.) after the _mc suffix. You can also see these same code hints if you use ActionScript 2.0 strong data-typing with a variable name, which we discuss in Chapter 24, "Knowing the Nuts and Bolts of Code." To try this technique, delete the line of code from Step 8, and type the following code:

    var mc:MovieClip = _root.mcStella.mcTailAnim; 

   Once 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 of 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 display code hints for those parameters as well.

9. Use this same technique to tell the mcTailAnim instance to start playing again once the bark has ended. In the barkAnimClip 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 20 of this second actions layer, insert an empty keyframe (F7). Assign a frame comment of //start wagging in the <Frame Label> field of the Property inspector for this keyframe.

10. 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:

     _root.mcStella.mcTailAnim.play(); 

11. Now you're ready to test your movie. Save the Flash document, and use Control ð Test Movie to view your movie. When Stella barks, her tail should stop wagging. When the bark is over, the tail should resume wagging.

Figure 19-4: You can name Movie Clip instances in the Property inspector.

Figure 19-5: You can use frame comments to describe the actions on a keyframe.

Figure 19-6: The Insert Target Path dialog box can help you build the path to a Movie Clip instance.

On the CD-ROM 

This example has shown you how to target Movie Clip instances 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 ch19/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(2) action on the //stop wagging keyframe to make sure 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.