Adding Sounds to FlashBang! Buttons
by Joseph Lowery

Adding sound to a navigation button used to be a difficult, near-impossible task - but that was before FlashBang! In this tutorial, you'll learn how to attach MP3 sound files that are heard when the user rolls over or click your FlashBang! button.

Sounds used with a FlashBang! button can come from two sources: a FlashBang ! collection or your own MP3 files. This tutorial covers both scenarios.

To see either of the processes demonstrated for you, click the appropriate Demo button. A new window, best viewed at 1024x768 screen resolution, will open to illustrate the procedure.

Pre-requisites

FlashBang! Basics

Getting Ready

Sounds can be added either when creating a new button or while editing an existing button. To keep focused on our topic, we'll start with an existing button.

1. Select any FlashBang! button.
2. From the Property inspector, select Edit.
   1. The FlashBang! Buttons dialog is displayed, with all the parameters of the current button.

Choosing a Sound from a FlashBang! Collection.

Let's first assign a sound from a FlashBang! collection that will be heard when the user's mouse rolls over the button.

1. In the Sound area, click Choose next to the On Rollover label.
   1. 
   2. The FlashBang! Sounds dialog opens.
2. From the tree menu, expand the Woody collection by clicking on the plus sign (Mac users should select the right-pointing triangle).
3. From the Woody collection, choose Flick_m.mp3.
4. Select Play to preview the sound.
   1. 
   2. Now that we have a sound chosen, we need to supply a path and name to store it in the current site.
5. Select the folder icon next to the Save As field to open the Save FlashBang! Sound dialog.
6. Locate (or create, if necessary) the assets folder for your site and, within that folder, enter fb_sound.mp3 in the File name field. When you're done, click Save to close the Save FlashBang! Sound dialog.
7. Click OK to close the FlashBang! Sounds dialog.
   1. You'll notice that the filename you chose for your sound is now visible next to the On Rollover buttons.
8. Move your mouse over the preview area to hear the sound applied to the button.
9. Click OK to close the FlashBang! Buttons dialog.

   Your applied sound may or may not be able to be heard in Dreamweaver if you choose Play Plugins from the Media tab of the Insert bar; this feature is resource dependent. However, you should be able to hear the sound when you preview your page in the browser.

Choosing an Existing MP3 Sound File

If you already have an MP3 file you would like to use - even if it is one previously selected from a FlashBang! collection - you can. Here's how:

1. Select a previously inserted FlashBang! button and from the Property inspector, choose Edit.
2. When the FlashBangs dialog opens, select Choose in the Sound area next to the On Click label.
3. Choose the folder icon next to the Locate field of the FlashBang! Sounds dialog.



4. In the Select MP3 File dialog, locate the fb_sound.mp3 button saved in the previous exercise. Click Open when you're ready; the Select MP3 File dialog closes.
5. Choose Play to preview your selected sound.
6. Click OK to close the FlashBang! Sounds dialog.
   1. The sound file name is displayed next to the On Click buttons.
7. Preview the sound in action by clicking on the button in the Preview area.
8. Click OK to complete the operation and close the FlashBang! Buttons dialog.
   1. As noted earlier, your applied sound may or may not be able to be heard in Dreamweaver if you choose Play Plugins from the Media tab of the Insert bar; this feature is resource dependent. However, you should be able to hear the sound when you preview your page in the browser.
   2. Special note: Be sure to upload your MP3 files to the server when putting your page online. Dreamweaver does not recognize them as dependent files and will not automatically upload them.

Summary

As you can see - or should I say, hear - adding sounds to your buttons is no problem - as long as you're using FlashBang! buttons. If you have any questions about this tutorial, please feel free to drop me a line at jlowery@flashbangmedia.com.