Adding Sound to a Button

Most short sounds and many long sounds in Flash files are added directly to a Timeline, whether it is a symbol Timeline or the main document Timeline. When sound is added directly to a Timeline, though, it needs to be told how to behave. It can behave as an event sound, it can start or stop at given keyframes, or it can stream.

Event sounds must be completely downloaded before they start to play, and they must play independently of the Timeline after they are told to play. Because of this independence, every time some event causes the sound to play, such as a button being clicked or the playhead entering a keyframe that instructs the sound to play, the entire sound plays. Not only does the entire sound play but it also doesn't care whether it's already playing, it just makes a new instance of the sound and starts playing there, which means that two versions of the same sound are playing at different points in time. Yikes! For these reasons, event sounds are great for short sounds, but not good at all for very long sounds. Event sounds are perfect for button sounds and loops.

Streaming sounds are great for long sounds because they start playing before the file is completely downloaded. When a sound is in a Timeline and is set to stream, the sound must occupy an amount of frames equivalent to the total amount of time it will play over. Then, the animations and visuals on other layers must eventually occupy the same number of frames as the sound. This way, animations and sound can be synchronized.


Synchronization using streaming sounds forces the Flash SWF file to keep up with the sound because sound is processed on a board other than video. Flash accomplishes this task by kicking out frames to force the animations to keep up.

In this exercise, you will import a sound file that will be used to add a click to the buttons. The buttons you want to add sound to reside in the Tech Bookstore itself. You will add sounds to btnProducts, btnCompany, and btnContact, which are present on all the pages.


Open bookstore10.fla from the TechBookstore folder on your hard drive and save a new version of the file as bookstore11.fla.

A new version of the bookstore FLA file is saved into the TechBookstore folder. You will make only minor modifications to the bookstore in this lesson. You can also open bookstore10.fla from lesson07/start.


Find click.wav in the lesson07/assets folder on the book's CD-ROM and save the sound file anywhere on your hard drive.

A WAV file is a commonly used uncompressed audio file format. You will import the WAV file into Flash, in which you can set compression settings for when you export the sound as part of the SWF file. Even though WAV is typically used on the Windows platform, QuickTime can be used to play and import click.wav if you are using a Mac.


You should always try to import uncompressed sounds whenever possible, such as a WAV or AIFF file, so the sound will not be recompressed when it's made into a SWF file.


Import click.wav into Flash by choosing File > Import > Import to Library. Open the library and locate the sound file you imported (which is still called click.wav) and drag it into the library's media folder.

Choose File > Import > Import to Library from the main menu. Locate the WAV file you just saved from the CD-ROM on your hard drive and click Open (or Import to Library on the Mac). After you import the file, open the library in Flash, locate the click.wav file, and drag it into the media folder in the library.


Modify the sound properties by Right-clicking (or Control-clicking on the Mac) and choosing Properties from the contextual menu.

The Properties dialog box opens, in which you can choose how the sound is published when you create a SWF file that includes the WAV. Choose ADPCM from the Compression drop-down list. ADPCM is an excellent compression for playing short sounds on the web. Change the sample rate to 5 kHz, and the ADPCM Bits to 3. For this type of sound, these settings result in a high quality, and a .1K file size.


Select btnProducts from the library and double-click its icon to enter symbol-editing mode. Insert a new layer in the button Timeline and rename it sound.

Double-click the button icon in the library so it opens in symbol-editing mode. The btnProducts symbol opens in symbol-editing mode so you can add the sound to the button. You will see one layer inside the button that has keyframes on each frame. You need to add a new layer to hold the sound for the button because it's always a good idea to keep sounds on their own layer in the Timeline. So click the Insert New Layer button, and then double-click the new layer's name and rename the new layer sound.


Add a new keyframe in the Down frame of the sound layer.

Add a new keyframe to the Down frame by selecting the frame and pressing F6. The down frame is "played" whenever the visitor clicks the button. This means the sound will play only when the button is clicked, not when the visitor rolls over the button.


Select the new keyframe on the Down frame and drag the click.wav sound from the library onto the Stage.

The sound, which is a subtle short click sound, is added to the Down state for the button when you drag it over to the Stage. This means when the button is clicked, the sound will play.

A waveform is seen in the frame, which indicates that a sound is located on the Timeline. You won't see a visual representation of the sound on the Stage, and if there are no frames after the keyframe the sound is in, you will barely see the waveform. This is one of the reasons it is a best practice to keep your sounds on their own layers; as was mentioned previously, it makes them easier to find!


Repeat the process, adding the same sound to the btnCompany and btnContact on the main Stage. When you are finished, lock the buttons layer again.

After you have added the sound to the btnProducts instance, press Scene 1 in the edit bar to return to the main Stage. Double-click each btnCompany and btnContact in the library, then add new layers and drag the click sound onto a new keyframe on the down frame, just as you did for btnProducts.


Test the sound with Enable Simple Buttons.

If you want to test the button to hear the sound you added play, select Control > Enable Simple Buttons. Make sure that the buttons layer is visible and then press btnProducts, btnCompany, and btnContact. Enable Simple Buttons will make your buttons behave mostly as they would in the final SWF, so this is an ideal way to test the button sound.

When you are finished, select Control > Enable Simple Buttons to turn the feature off. You cannot move or select your buttons when Enable Simple Buttons is active. Make sure to hide your buttons layer again.


Save your work.

You have now added the first sound effects to the bookstore.

Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English © 2008-2017.
If you may any questions please contact us: