Macromedia Flash 8 Bible

Overview of the pianoKeys Movie Clip

Open the pianoKeys_starter.fla file. A mcKeys Movie Clip instance is already on the Stage of the Main Timeline. Double-click the mcKeys 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.

Figure 19-9: The Timeline window showing the frames of the keysClip Movie Clip symbol

The timeline for the keysClip symbol has several layers for individual Button instances and labels. If you test this movie using Control ð Test Movie (Ctrl+Enter or z+Enter), you'll see that the Button instances over each piano key will tell the Playhead of the keysClip 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:

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.

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.

Targeting the Sounds with More Behaviors

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.

1. Enter Edit mode by double-clicking the mcKeys instance on the Main Timeline (Scene 1). On the keysClip Timeline, add a new layer and name it behaviors. Move this new actions layer underneath the layer that contains the key_1 frame label, as shown in Figure 19-13.

2. On frame 3 of the new behaviors layer, you need to add a behavior that will play the first Sound instance, sndKey_1. Remember that the Button instances on the keysClip timeline already move the Playhead to each key's label. Insert a blank keyframe (F7) on frame 3.

3. With the new keyframe selected, open the Behaviors panel (Shift+F3). Click the Add Behavior (+) button, and choose Sound ð Play Sound. In the Play Sound dialog box, type sndKey_1, as shown in Figure 19-14. Click OK to close the dialog box.

4. Now, open the Property inspector. With frame 3 of the second actions layer selected, type //play sound into the <Frame Label> field. Your Timeline window should resemble Figure 19-15

   At this point, you will want to test your movie to see if the behavior is finding the target and playing the sound. Save your document as pianoKeys_behaviors.fla, and use Control ð Test Movie to create a Flash movie file (.swf). Make sure that the behavior on the keyframe works by clicking the first key on the piano keyboard (from the left), and that you hear a sound.

5. Now, you need to enable all the other sound instances created by your earlier Load Sound from Library behaviors. Create a new layer and name it behaviors. 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, by selecting the keyframe and choosing Edit ð Timeline ð Copy Frames. Then, paste the copied keyframe to frame 5 of the new behaviors layer. Select frame 5 and choose Edit ð Timeline ð Paste Frames.

   Tip

   You can also copy and paste frames by selecting the frame(s), right-clicking (or Ctrl-clicking on Mac) the frame(s), and choosing Copy Frames or Paste Frames from the contextual menu. Frames are copied to a separate Clipboard than other elements in a Flash document that you use with the standard Edit ð Copy and Edit ð Paste commands. As such, you can have two types of elements in Clipboard storage simultaneously.

6. Select the new //play sound keyframe in the behaviors layer underneath the key_2 frame label layer. Open the Behaviors panel (Shift+F3). You need to change the copied Play Sound behavior to point to the sndKey_2 instance. Double-click the Play Sound item in the Action column of the panel. In the Play Sound dialog box, change the target to sndKey_2, as shown in Figure 19-16.

7. Repeat Steps 5 and 6 for each key and sound. Each key_ frame label should have its own behaviors layer with a //play sound keyframe. Test your movie each time you add a new keyframe with ActionScript. If a particular key doesn't work, check the target's name in the Play Sound settings.

8. When you've finished adding a behavior for every key, save the document and test it. After all's been said and done, you should have a functional Flash piano (well, at least seven keys' worth!) 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 Library or import new ones.

Figure 19-13: Don't be afraid to keep information separated on actions, labels, and behaviors layers. Separating the information will make it much easier for you to access the appropriate sections of your timelines.

Figure 19-14: The Play Sound behavior can play a sound set up by the Load Sound from Library behavior.

Figure 19-15: The //play sound comment lets you know what the behavior on this keyframe does.

Figure 19-16: This Play Sound behavior targets the sndKey_2 instance.