Flash Explained

Learn Flash easily.

Attaching sounds to buttons dynamically with ActionScript

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


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 design section.

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.

Giving the button an instance name.

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.

Naming the sound for ActionScript linkage.

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).

Selecting the first frame of the actions layer.

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.

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.

Download the zipped source FLA file for this tutorial.

Be Sociable, Share!

Comments

Submit a comment

  • WJK Nov 7, 2008 at 3:07 am

    Luka,
    Can you recommend a site where you get all your cool sounds… I’m looking for royalty-free .wav files. Thanks

  • Luka Nov 7, 2008 at 9:31 am

    WJK: It is in the RESOURCES section on top of this page is the link. But here it is: WAV and mp3 loops.

  • priya Nov 29, 2009 at 5:28 pm

    thankyou, it worked very perfectly….so 4 stopping it i just add onrelease.stop or something…thakyou….

  • rahul agarwal Jun 21, 2010 at 4:24 am

    hi,,,,,,,,,,this way is great……….plz tell me onething…..if i wanna insert multiple sound in a single timeline…can i do?

  • ricky Mar 18, 2011 at 6:23 pm

    cool

  • kate mulligan Jun 5, 2011 at 5:56 pm

    Thanks for making this ever so much easier than the Help files – I am relieved! BIG FAN

  • wd Jul 30, 2011 at 9:42 am

    step 6 failed, using CS5pro, It is stuck on AS3.0, all my efforts, I can’t make it stay in AS2.0.
    Also CS5pro linkage props didnt open like you said.

  • Hillary Bost Nov 1, 2011 at 4:39 pm

    Great! This is a really neat feature i need to try out.

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

    these help me but i have a problem the moment that i put gotoAndPlay on the button the sound disappered ” bloody hell why! help please somebody

  • Sumant Sep 15, 2012 at 7:48 am

    Nice, It’s very good for lerners like me. I wanted to create songList in flash can I play sound clip having 5 mnt. long? also can I stop sound in between by using same button? I will be thakfull .

  • vid Aug 30, 2013 at 5:01 am

    what if i want to attach 3 to 4 buttons with diffrent sound and diffrent button with same scene?if it is on diffrent frame then,it is not working…..

  • […] http://flashexplained.com//sound/attaching-sounds-to-buttons-dynamically-with-actionscript/ […]

You must log in to post a comment.