Flash Explained

Learn Flash easily.

Adding sound to your buttons

October 12th, 2008 | Author: Luka | Category: Sound


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.

A button with rounded corners.

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.

Listening to a sound in 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.

The button timeline.

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.

Setting up the button's sound layer.

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.

The sound placed in the Down keyframe of the button.

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.

Be Sociable, Share!

Comments

Submit a comment

  • WJK Nov 4, 2008 at 1:22 pm

    Your tutorial is great!, It did work, however how do I add this button with sound to my Dreamweaver page. Or what do I initially have to do when I create the Dreamweaver page to “accept” this button. Use a basic HTML Template, Actionscript Template, etc… I went to the insert graphic tab and all that shows is the “f” logo, no actual pic of the button w/sound that I just created. Thank you for your help.

  • Luka Nov 6, 2008 at 1:25 am

    WJK: In Dreamweaver, select Insert > Media > Flash.

  • Stas Dec 9, 2008 at 1:58 pm

    Thank you! Im search this!

  • Smickey May 9, 2009 at 7:22 pm

    GREAT tutorial. Get on twitter! I need to follow you.

    Question: Is there anyway to get the sound to stop?

  • Player Profiles Oct 30, 2010 at 12:43 am

    Maybe you could edit the blog name Adding sounds to buttons | Flash Explained to something more suited for your webpage you write. I loved the blog post yet.

  • Mukund Apr 20, 2011 at 1:15 am

    Everything was fine but when i was draging a sound file from library to timeline it was giving me some problem. do you no what was that problem
    thank you

  • n Sep 4, 2011 at 6:17 am

    i did This tutorial and was not done until in properties , sync Put on the
    Event

You must log in to post a comment.