Assigning a Sound to a Button

The interactive experience can be enhanced by the addition of subtle effects. The addition of sounds to correspond with the various states of a button is perhaps the most obvious example. Although this effect can be abused, it's hard to overuse an effect that delivers such meaningful user feedback. Here, we show how different sounds can be added to both the Over (rollOver) and the Down (press) states of a button.

Cross-Reference 

For more general information about creating the buttons themselves, see Chapter 6, "Symbols, Instances, and the Library," and see Chapter 18, "Understanding Actions and Event Handlers," to learn how to add code to buttons.

Because buttons are stored in the Library, and because only instances of a Button symbol are deployed within the Flash movie, sounds that are assigned to a button work for all instances of that Button symbol. However, if different sounds are required for different buttons, a new Button symbol must be created (see the following Tip note for an exception to this "rule"). You can create a new Button symbol from the same Graphic symbols as the previous button (provided it was built out of symbols) or duplicate it in the Library panel using the Duplicate command in the Library's options menu.

Tip 

With the Behaviors panel, you can quickly assign different sounds to the various instances of the same Button (or Movie Clip) symbol. You'll learn about behaviors related to sound use later in this chapter.

To add a sound to the Down state of a Button symbol, follow these steps:

1. Create a new Button symbol (Insert ð New Symbol) or choose a symbol from the Buttons Library (Window ð Common Libraries ð Buttons).

2. Drag an instance of the button from the Library (or the document's Library) to the Stage.

3. Edit the Button symbol by double-clicking it on the Stage, or by choosing Edit from the Library options menu.

   Both methods transfer the working environment into Edit mode.

4. Add a new layer to the button's timeline, label the new layer sound, and then add keyframes to this layer in the Over and Down columns.

   Your timeline should look similar to Figure 15-2.

5. Select the frame of the button state where you want to add a sound for interactive feedback (such as a clicking sound for the Down state), and then access the Property inspector by choosing Window ð Properties ð Properties (Ctrl+F3 or z+F3).

   An alternative method (with the frame selected) is to simply drag the sound from the Library panel onto the Stage.

   You should now have the Property inspector open, as shown in Figure 15-3. Click the arrow in the lower-right corner of the Property inspector to see all of the options.

6. Choose the sound clip that you want to use from the Sound menu.

   This menu lists all of the sounds that have been imported and that are available in the library of the current movie. In this example, we used the click.wav sound found in the ch15 folder of the book's CD-ROM.

7. Use the Sync menu to choose how you want the sound to play.

   For this lesson, simply use the default, which is the Event option. We'll defer our exploration of the other options in the Sync menu to a later section.

Figure 15-2: The timeline for your button should resemble this one.

Figure 15-3: The Property inspector controls the options for sound usage on a given frame.

You have now added a sound to your button state. Remember that you're still in Edit mode, so to test the button, return to the Scene 1 timeline (that is, the Main Timeline) either by clicking the Scene 1 location label at the upper-left corner of the Document window, or by pressing Ctrl+E (z+E). Then choose Control ð Enable Simple Buttons, or Control ð Test Movie.

To add a sound to the Over state of a Button symbol, simply retrace the preceding steps, referencing the Over state of the button wherever appropriate. Remember that different sounds can be assigned to the Up, Over, and Down states of a Button symbol. A sound that is added to the Up state will play whenever the mouse rolls out of a button's hit area.

On the CD-ROM 

For a completed example of this button, refer to the Flash movie button_sound_100.fla located in the ch15 folder of the Macromedia Flash 8 Bible CD-ROM. This movie has a button with sounds attached and was made with the same technique we describe in this section.