Attaching sounds to buttons dynamically with ActionScript

Add sounds to your interface via ActionScript, thus avoiding the need to put them manually in each button. Click on the button below to hear the sound attached dynamically.

1. Open a new Flash document. Call the first layer button.

2. Using the Oval tool (O) draw a circle on stage. You don't have to draw a complicated button like I did, the purpose of this tutorial is to show how you can attach sounds dynamically. If you wish to learn how to draw cool stuff in flash, go to the section with the tutorials on cool design.

3. Select the circle and press F8 to convert it to a button. In the Convert to Symbol dialog box that appears, choose Button as type and call it whatever you like - button 1, blue button, green button, etc.

4. Now, it is important to give your button an instance name. Otherwise, you wouldn't be able to control the button with ActionScript.

So, with the button still selected on stage, go to the Properties panel. On its left side, in the Instance name field type button01 and press enter.

Importing a sound to library and preparing it for use by ActionScript

5. Import a sound for your button in Flash. If you don't have one handy, download the WAV sound for this lesson. Load the sound into Flash by selecting File > Import > Import to Library, finding your WAV sound file and clicking Import to Library.

6. Open the library (Window > Library), right-click (Mac users CTRL+CLICK) on the sound file you just imported and select Linkage from the menu. The Linkage Properties panel will appear.

In the Identifier field, type buttonSound01. This is the identifier name by which you will call and use the sound with ActionScript.

Flash will by default show the filename of the sound in the identifier field (effect1.wav in my case). Remember that you should use no special characters for the Identifier name - follow the same rules you use for naming movie clips, buttons and variables. That means no special characters (!#$%.,/) should be used, start the name with a letter and don't use any spaces.

Also, check the Export for ActionScript and Export in first frame boxes. What do they mean?

The first one is clear: by checking it, you say to Flash "Listen, I want this sound to be available for dynamic manipulation via ActionScript". Flash says "As you say, mylady/mylord".

The second one, Export in first frame, makes the sound load before any other elements of your movie. That means the sound will load before the first frame of your movie's timeline and anything it contains. So, if your sound has a big file size, visitors to your site will get a blank screen until it loads completely.

If you leave this box unchecked, the sound won't load immediately and your users might not hear anything at all if they clicked the button and the sound hasn't loaded yet.

So, what am I supposed to do, you say sobbing, holding back the tears?

You leave the box checked and you solve the problem by loading your movie with sounds into another movie. You can learn how to do that by looking up the tutorial which explains how to load external flash movies.

Click OK.

7. Make a new layer and call it actions. Select its first frame and open the Actions panel (Window > Actions).

8. Enter the following code in the Actions panel:

clickSound = new Sound();
clickSound.attachSound("buttonSound01");
button01.onRelease = function () {
clickSound.start();
}

Test your movie and click the button. You should hear the sound.

The code behind the sound explained

The first line,

clickSound = new Sound();

creates a variable called clickSound (use any name you like, just stick to naming rules) and creates a new Sound object, assigned to that variable, you could say. From that moment on, every time you "mention" the clickSound variable to Flash, you are in fact talking of that specific instance of the Sound object which is called clickSound.

You have to use this procedure, otherwise you wouldn't be able to call upon your object later and make it do something. In a movie that has an interface where every button has its own sound, how would you make those sounds available via ActionScript? By making a unique and new instance of the Sound object for every button.

NOTE There are exceptions to the rule mentioned above. Like the Mouse and the Math objects, for example. These are objects that DO NOT have the possibility of spawning multiple instances. They are unique and not replicable. You just use them when needed. The Mouse object is used for controlling your mouse cursor on the screen. You can't have two instances of the Mouse object because there exists only one mouse attached to your computer. The same is true for the Math object. You can't make new instances out of it. You use it as you need it. For example, if you need to round a floating point number, you say Math.round(number goes here); and that's it. See? ActionScript makes sense, and is easy to learn :)

The following line of code,

clickSound.attachSound("buttonSound01");

attaches the sound buttonSound01 to the clickSound object you just created in the previous line. From this point on, every manipulation done with the clickSound object will be done to the buttonSound01 sound.

And what is this buttonSound01? It is the imported WAV file you prepared for ActionScript by giving it that exact linkage identifier in the library previously.

So, the attachSound method assigned the buttonSound01 sound to the ClickSound Sound object instance. Now you have a sound that can be controlled dynamically (or at runtime, as is also said in programming jargon) with ActionScript.

The last portion of ActionScript code,

button01.onRelease = function () {
clickSound.start();
}

creates a function assigned to the onRelease event of the button01 button.

That means, when the user releases the mouse button (this is when the onRelease event happens), the function assigned to it will be executed. The execution of a function means the execution of every line of code between the function's { curly braces }.

In this case, you have the clickSound.start(); line of code that will be executed. That line of code tells your sound to start playing.

This method has some nice options to be played with. Between the parenthesis, you can put in two parameters: the delay and the loop. Try this: add a little modification to your code (shown in bold).

clickSound.start(1, 0);

This will make your sound start playing 1 second after its beginning. Let's say that you have a sound that lasts 8 seconds. And you put in the parenthesis the values (4, 0). That sound will start playing from the middle - the first 4 seconds of it won't be heard at all.

The second parameter (0 in the previous example) tells flash how many times the sound should loop - how many times it will be repeated. The values 0 and 1 make it play once.

Make this modification to your code:

clickSound.start(0, 3);

The value of the delay parameter put at zero makes the sound start from the beginning, and the second parameter (loop) put at three makes the sound repeat itself three times. Test your movie and click the button and you'll hear the sound three times.

Ride on!!! You just learned a nice introduction to ActionScript manipulation of sound! Move on to other tutorials explaining the use of sound in Flash. If you want to see how the source file for this sound-enabled button looks like, you can it below.

Download the zipped source FLA file for this tutorial.