Targeting Movie Clips in Flash 5 Flash

With Flash 5’s new ActionScript syntax comes a new way to target and control movie clips. In the last section, you learned about the difference between the Slashes and Dots notations for absolute and relative paths. In Colin’s tutorial, you learned how to use the Slashes notation with the Tell Target action to control movie clips. Now, you’ll see how to make Movie Clips interact with one another with the Dots notation and Flash 5 ActionScript.

The Painting Retrospective from McClelland and Stewart’s

The Painting Retrospective from McClelland and Stewart’s

Using Movie Clips to create Sound Libraries
With Sound Library Movie Clips, you can transport sets of sounds easily between timelines and other Flash movies. In this section, you learn the importance of:

  • Consistent timeline structure
  • Naming conventions for Movie Clip instances
  • Nested Movie Clip instances
  • Streamlining Movie Clip production
  • These production principles are rather straightforward, and relatively simple to learn.

Overview of the pianoKeys Movie Clip
Open the pianoKeys_starter.fla file from the Flash 5 Bible CD-ROM. A pianoKeys Movie Clip instance is already on the Stage of the Main Timeline. Double-click the pianoKeys instance to enter the Symbol Editing Mode, as shown below.

The timeline of the pianoKeys Movie Clip

The timeline of the pianoKeys Movie Clip

The timeline for pianoKeys has several layers, with Button instances and Label layers. If you test this movie using Control➪Test Movie (Ctrl+Enter or Command+Enter), you’ll see that the Button instances over each piano key will tell the playback head of the pianoKeys timeline to go to that key’s frame label. For the first key on the left, the button on layer keyButton_1 has the following action list:

These actions don’t use any Tell Target actions. When the keyButton_1 Button instance is clicked with the mouse, the playback head moves to the key_1 label on the current timeline, which is the pianoKeys timeline. Unless targeting is used, all actions on a Button instance will target the timeline on which the Button exists.

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 pianoKeys_full.png bitmap that is placed on the bottom keysFull layer. Note that the pianoKeys_full.png bitmap is present throughout the entire pianoKeys timeline. Each Button instance in the pianoKeys Movie Clip sends the playback head 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 sound Movie Clips that the pianoKeys instance can target.

Making sound Movie Clips
Before we start making new Movie Clip symbols, we need to establish a naming convention for our sounds. A naming convention is simply a way of consistently identifying components in any project, in or out of Flash. As a member of a Web production team, the importance of naming conventions can not 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.

  1. For each key on the piano, we’ll make a unique sound. Each sound will be on its own timeline where it can be targeted to play. Because there are seven keys on the piano, we need to import seven sounds into Flash. Using File➪Import, locate the ch18 folder on the Flash 5 Bible CD-ROM. Import each of the key sounds (.AIFF or .WAV) into your Flash movie.
  2. Create a new Movie Clip symbol (Insert➪New Symbol) and give it the name sound_1. This Movie Clip’s timeline will be dedicated to the key_1 sound that you imported in the previous step.
  3. The Symbol Properties dialog with the Movie Clip behavior selected

    Symbol Properties dialog with the Movie Clip behavior selected

  4. Flash will automatically move you into the Symbol Editing Mode for the sound_1 Movie Clip symbol. Rename Layer 1 to labels and make a new layer called sound. On the labels layer, we need to establish three “states” or positions for the sound: no sound, initiate sound, and mute sound. Why? Remember that all Movie Clips will try to play as soon as they appear on a timeline. So, we need to make sure there’s nothing on the first frame (no sound state). For the remaining two states, add two frame labels: one called start on frame 3, and another called mute on frame 15 . Make sure that you add these labels to unique keyframes if you try to add a label to a regular frame, the label will be attached to an earlier keyframe. Add an empty frame (F5) on frame 30 for both the labels and sound layers.
  5. Each sound will use the same structure as the sound_1 Movie Clip: an empty first frame and two labels for starting a sound and stopping a sound.

    sound will use the same structure as the sound_1 Movie Clip: an empty first frame and two labels for starting a sound and stopping a sound.

  6. Add an empty keyframe (F6) on frame 3 of the sound layer. With that frame selected, open the Sound Panel (Window➪Panels➪Sound), and select the key_1.aif (or key_1.wav) sound from the Sound drop-down menu. Leave the Sync setting at Event so that multiple instances of the key_1 sound can overlap (play on top of one another). See below for reference.
  7. When the start label is played on the sound_1 timeline, the key_1 sound will play.

    When the start label is played on the sound_1 timeline, the key_1 sound will play.

  8. Repeat Step 4 for frame 15 on the sound layer. This time, however, change the Sync setting to Stop. When this keyframe is played, all instances of the sound key_1 will stop playing.
  9. Whenever the Stop Sync setting is selected, the sound graphic on the timeline will appear as a short blue line.

    Whenever the Stop Sync setting is selected, the sound graphic on the timeline will appear as a short blue line.

  10. Now we need to add some Stop actions to the timeline. Because we want each sound Movie Clip to play each time its respective key is pressed, we need to make sure playback from one action doesn’t run into the timeline space of other labels. Add a new layer called actions and move it above the other two layers. Double-click its first frame to open the Actions Panel. Select the Stop action from the Basic Actions booklet, and drag it to the right pane of the Actions Panel, as shown below.
  11. This Stop action will prevent the sound’s timeline from playing when the Flash movie first loads.

    Stop action will prevent the sound’s timeline from playing when the Flash movie first loads

  12. With the first frame of the actions layer selected, open the Frame Panel and type //stop in the Label text field. Labels that start with // are considered comments and cannot be targeted like ordinary frame labels. The //stop comment gives you a quick indication of what this keyframe does.
  13. Copy the Stop keyframe on frame 1 by selecting the keyframe and pressing Ctrl+Alt+C (Option+Command+C). You can also right-click (Ctrl+click) the keyframe and select Copy Frames from the contextual menu. Then, select frame 10 of the actions layer and press Ctrl+Alt+V (or Option+Command+V) to paste the Stop keyframe. Repeat for frame 20. The placement of these Stop actions is a bit arbitrary we only need to stop the playhead from playing into labels that occur later in the timeline. When you’re finished with this step, your timeline should resemble the one shown below.
  14. These Stop actions will keep each area of the timeline from playing into the others.

    Stop actions will keep each area of the timeline from playing into the others.

  15. Next, we add an icon to this Movie Clip so that it can be seen on the Stage. Make a new layer and name it icon. On its first frame, draw a white rectangle.
  16. Then, use the Text Tool to add the text Sound (with a black fill color) on top of the rectangle. Select both items and align them to the center of the Stage using the Align Panel. With both items still selected, choose Insert➪Convert to Symbol (F8). In the Symbol Properties dialog, name the symbol soundIcon, and select the Graphic Behavior, as shown below. Click OK.

  17. Add keyframes for the soundIcon Graphic instance on frames 3, 10, 15, and 20 of the icon layer, as shown below.
  18. The soundIcon will provide a visual representation for this sound on the Stage.

    soundIcon will provide a visual representation for this sound on the Stage.

    The soundIcon needs to have dedicated instances for each state of the sound_1 timeline.

    soundIcon needs to have dedicated instances for each state of the sound_1 timeline.

  19. Select the instance of soundIcon on frame 3, and open the Effect Panel. Choose the Advanced option from the drop-down menu, and type 255 in the second column text field for the Green color channel .
  20. When the sound_1 timeline reaches the start label, the soundIcon will turn green.

    When the sound_1 timeline reaches the start label, the soundIcon will turn green.

  21. Repeat Step 11 for the instance of soundIcon on frame 15. This time, however, type 255 in the Red color channel . This step completes the first sound Movie Clip.
  22. Now, we need to repeat this process for key sounds 2 through 7—but don’t worry! Because we created a coherent structure for the sound_1 timeline, creating the other Movie Clips will be relatively painless.

  23. Open the movie’s Library (Ctrl+L or Command+L). Right-click (Ctrl+click) the sound_1 Movie Clip and choose Duplicate from the contextual menu .
  24. Name the new Movie Clip copy sound_2, and make sure that the Movie Clip behavior is selected. Click OK.
  25. Double-click the sound_2 Movie Clip in the Library to edit this symbol’s timeline. Remember that we’re no longer working on the sound_1 timeline.
  26. When the sound_1 timeline reaches the mute label, the soundIcon will turn red.

    When the sound_1 timeline reaches the mute label, the soundIcon will turn red.

    You can access many options by right-clicking (Ctrl+clicking) Symbols in the Library.

    You can access many options by right-clicking (Ctrl clicking) Symbols in the Library.

  27. Select frame 3 of the sound layer, and open the Sound Panel . Choose key_2.aif (or key_2.wav) from the Sound drop-down menu. Leave all other settings the same.
  28. In Step 16, you’re changing the sound that will be played back on the sound_2 timeline.

    you’re changing the sound that will be played back on the sound_2 timeline.

  29. Repeat Step 16 for frame 15 of the sound layer.
  30. In Step 17, you’re changing the sound that will be muted to key_2.aif (or key_2.wav).

    In Step 17, you’re changing the sound that will be muted to key_2.aif (or key_2.wav)

    That’s it! You can now easily create the remaining sound Movie Clips (3 through 7) by repeating Steps 13 through 17 and incrementing the Movie Clip’s name by one number each time. When you’ve finished creating all seven sound Movie Clips, you’re ready to create a Sound Library Movie Clip.

Nesting sounds into a Sound Library Movie Clip
We have seven sound Movie Clips all ready to go, but we need somewhere to put them on the Stage. It’s feasible to place each sound Movie Clip on the Main Timeline’s Stage, but your Stage will start to get cluttered if many Symbols populate that space. So, we’ll make a Movie Clip container for all those sounds. We refer to a container for sounds as a Sound Library, or soundLib for short.

  1. Create a new Symbol by choosing Insert➪New Symbol (Ctrl+F8 or Command +F8). Name the symbol soundLib and give it a Movie Clip behavior. Click OK.
  2. The Stage switches to Symbol Editing Mode for the soundLib Movie Clip timeline.
  3. Rename the first layer to sound_1 and drag an instance of the sound_1 Movie Clip to the Stage. Open the Instance Panel and give the name sound_1 to the instance, as shown below.
  4. The sound_1 instance on the soundLib timeline.

    The sound_1 instance on the soundLib timeline.

  5. Create six more layers in the soundLib Movie Clip, named sound_2 through sound_7. Drag an instance of each remaining sound Movie Clip onto its respective layer. Make sure that you name each instance after its symbol in the Library, just as you did in Step 2. Place each instance on the Stage from top to bottom, with the sound_1 instance at the top . Use the Align Panel to center the instances horizontally and to space them evenly.
  6. The soundLib timeline contains all seven sounds as individual instances.

    The soundLib timeline contains all seven sounds as individual instances

  7. Go to the Scene 1 timeline (the Main Timeline). Create a new layer called soundLib. Place an instance of the soundLib Movie Clip on the first frame of the soundLib layer. Give the instance the name soundLib in the Instance Panel, as shown below. You may need to resize the soundLib instance so that it fits on the Stage.
  8. The sound Movie Clips will be accessed from the soundLib instance on the Main Timeline.

    The sound Movie Clips will be accessed from the soundLib instance on the Main Timeline

    Our Sound Library is now complete. All that remains is to add actions to our pianoKeys Movie Clip to target the sounds in the correct order.

Targeting sounds with ActionScript syntax
Now you have a Movie Clip instance called soundLib along with the instance pianoKeys, both located on the Main Timelime. Instead of using the Tell Target action, we show you how to use the Movie Clip Object in ActionScript. The remainder of this exercise shows you how to add Flash 5 actions to the pianoKeys timeline that will target the sounds in the Sound Library.

  1. Enter the Symbol Editing Mode by double-clicking the pianoKeys instance in Scene 1. On its timeline, add a new layer and name it actions. Move this new actions layer underneath the layer that contains the key_1 frame label, as shown below.
  2. Don’t be afraid to keep information separated on actions and labels layers. Separating the information will make it much easier for you to access the appropriate sections of your timelines.

     keep information separated on actions and labels layers

  3. On frame 3 of the new actions layer, we need to add actions that will play the first sound in our Sound Library. Remember that the button Instances on the pianoKeys timeline already move the playback head to each key’s label. Insert a blank keyframe (F7) on frame 3.
  4. Double-click the keyframe to open the Actions Panel. In the panel’s options menu (located in the right corner), switch to Expert Mode (Ctrl+E or Command+E). Click the Actions list area of the panel (on the right side), and type the following ActionScript:
  5. _root.soundLib.sound_1.gotoAndPlay(“start”);

    See the Actions Panel shown below for reference. This code looks at the Main Timeline (_root), and then looks for a Movie Clip named soundLib. Then, it tells the timeline of sound_1 instance inside of soundLib to move the playback head from the stopped first frame to the start label keyframe.

    This one line of ActionScript is equivalent to the three lines of code using Tell Target (as in, tellTarget(“/soundLib/sound_1”){gotoAndPlay (“start”);}).

    ActionScript is equivalent to the three lines of code using Tell Target

  6. Click the Stage, and open the Frame Panel. In the Label text field, type //play sound. Your stage should resemble shows below.
  7. The //play sound comment lets you know what the actions on this keyframe do.

    The //play sound comment lets you know what the actions on this keyframe do

    At this point, you will want to test your movie to see if the action is finding the target and playing the sound. Save your movie, and use Control➪Test Movie to create a .SWF movie. Make sure that the action on the keyframe works, and that you hear a sound. Notice that you’ll also see the soundIcon Graphic change to green when you hit the first key.

  8. Now, we need to enable all the other sounds in the soundLib instance. Create a new layer and name it actions. Place the new layer underneath the label layer that contains the key_2 frame label. Copy the //play sound keyframe from the previous actions layer, using the method described in Step 8 of the “Making Sound Movie Clips” section. Then, paste the copied keyframe to the new actions layer, on frame 5.
  9. Double-click the new //play sound keyframe underneath the key_2 frame label layer. In the Actions Panel, we need to change the sound’s target to sound_2:
  10. _root.soundLib.sound_2.gotoAndPlay(“start”);

    See below for reference.

    This timeline has enabled two sounds from the Sound Library.

     timeline has enabled two sounds from the Sound Library.

  11. Repeat Steps 5 and 6, for each key and sound. Each key_ frame label should have its own actions layer with a //play sound keyframe. When you’re finished with this task, your pianoKeys timeline should resemble the one shown below. Test your movie each time you add a new keyframe with Action Script. If a particular key doesn’t work, then check two things: the target’s name in the ActionScript, and the instance name of the sound in the soundLib Movie Clip. Most errors occur as a result of not naming a Movie Clip instance.
  12. The completed pianoKeys timeline

    The completed pianoKeys timeline

    When you’ve finished adding frame actions for every key, save the movie and test it. After all’s been said and done, you should have a functional Flash piano that plays a sound whenever you click a piano key. If you want to change the sounds, you can either update the sound file in the Flash Library or import new ones.

How Movie Clips can add logic to a movie
A not so obvious yet significant aspect to Movie Clips is that they do not need to have any content in them. They can be used solely as empty devices that instigate interactive behavior. A Movie Clip can be just a string of empty frames with only Labels and Actions. Tell Targets from other timelines can move the playhead of empty Movie Clips in order to achieve basic levels of memory and logic in a Flash movie. We refer to these empty Movie Clips as Logical Movie Clips. An example of interactivity with a Logical Movie Clip is keeping score in a simple game.

Suppose you have a movie consisting of three true-or-false questions with a true button and a false button for each question. The user answers each question by clicking one or the other button. You also have a Logical Movie Clip with four keyframes. The first frame has a Stop action on it. The last frame has a Tell Target action on it that tells the main movie timeline to go to a keyframe that has a congratulations message.

Finally, all the “correct” answer buttons have Tell Target actions that tell the Logical Movie Clip to go to the next frame. Here’s what happens when the user plays and gets all the questions right: question one, the user clicks the correct button, and the Logical Movie Clip moves to frame 2; question two, the user clicks the correct button, and the Logical Movie Clip moves to frame 3 and so on. When the user gets to frame 4, the last frame of the Logical Movie Clip, it tells the Main Timeline to go to the congratulations frame, which says, “Congratulations, you got a perfect score!”

So, what happens if the user gets a question wrong? Well, when the user gets any of the questions wrong, the Logical Movie Clip does not advance, so by the end of the game, the playhead never reaches frame 4, and the Tell Target action that causes the congratulations message to be displayed is not executed.

Tricks such as the score keeper were common tools for Flash 3 developers. Using Logical Movie Clips, inventive developers produced impressive results even a primitive version of Pac Man exists as a Flash 3 movie. However, now that Flash 4 and 5 movies support variables and scriptable Movie Clip properties, those kinds of Movie Clip uses are less important. Nevertheless, conceptually, it’s useful to understand that Movie Clips can serve as more than just devices for embedded animation. They can also serve as containers for meta-information stored in movies.


Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics