Make your users' experience even more engaging by adding sounds to your
interface. You'll see, this is really easy to do. For starters, click on the
buttons below to hear what I mean.
Creating the button
1. Open a new Flash document. Select the Rectangle tool (R)
and draw a rectangle with rounded corners on stage. You can do it by clicking
and dragging the mouse. With the mouse button still pressed, press the down
arrow on your keyboard and the rounded corners will start to appear. Once
satisified with the shape, release the mouse button.
Draw a simple button, it doesn't have to look like the one above for the
purpose of this tutorial. However, if you still wish to learn how to make one
like it, I suggest you go and check the
tutorial on making an aqua gel button in flash.
2. Select the shape you just made and press
F8 to create a symbol out of it. In the Convert to Symbol
dialog box that appears, choose Button as type and call it my blue
button or whatever you like and click OK.
Your button is now stored in the library.
Importing the sound
3. Now, you'll have to import a sound into flash that you'll
use with this button. Since this is an event sound - a sound that is heard when
something happens, like a button clicked, as in this case - it has to have a
small file size and good quality. The WAV format is excellent for this
purpose.
Now, once you unzipped the sound, do the following:
In flash, select File > Import > Import to Library,
find your wav file and select it, click Import to Library. Open the library
(Window > Library), and you'll see your sound in it. Select
the sound, and you'll see that you can hear it if you press the little play
button in the preview window of the library.
4. Right-click on the clicking.wav sound and select
Export Settings. In the Sound settings dialog box that appears, choose ADPCM as
the Compression setting and click OK. This option is ideal for a short WAV sound
like this one.
Inserting the sound into the button
5. Double-click on your button (my blue button) in
the library, and you will enter inside it - you'll see the button's timeline
with its four states: Up, Over, Down and Hit. Lock every layer with graphics in
it (you'll probably have just one if you didn't make a complex button like me).
Right-click on the Hit frame of every layer and select Insert Frame from the
pop-up menu.
6. Create a new layer and call it sound.
Right-click on its Down keyframe and select Insert Keyframe. After that,
right-click on its Hit keyframe and select Remove Frames. You should have the
exactly same situation as shown in the image below.
You had to remove the Hit keyframe of the sound layer, otherwise, the button
wouldn't work. The Hit keyframe defines the clickable area of a button. If
there's a sound in it, flash won't be able to make it clickable.
7. Now, go to the library, and drag the
clicking.wav sound into the Down keyframe of the sound layer.
If you have problems doing it, first select the keyframe, then drag and drop the
sound in it.
In this way, when the user clicks the button, the sound will be heard. If you
placed the sound in the Over keyframe, it would be heard when the user placed
the mouse over the button without clicking it. When the sound is placed in the
Up keyframe,it is heard when the user moves the mouse over the button and moves
it back outside.
Cool. Now, go back to the main scene by double-clicking anywhere on the empty
portions of the stage. Test your movie. Click the button - the sound should be
heard!
