Flash Explained

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.

If you don't happen to have a WAV sound file nearby, download the sound file for this tutorial.

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!

After this, learn to do the same thing (and more!), but with ActionScript. Continue to the lesson which explains how to add sound to buttons dynamically.

Comments

Submit a comment