Teachers

AS3 Play Sound from Library

Exercise File:
claps.wmv

*Sound loop created by Brad Sucks.

In this tutorial, were going to learn how to use ActionScript 3 in order to control audio files imported into our Flash documents library. This lesson comes with an audio file, which you can download from the link above. The file is named claps.wav, which is a short 4-second sound file that can be used as a sound loop. Well also learn how to loop a sound clips playback in AS3 using the Event.SOUND_COMPLETE event associated with the SoundChannel class.


Step 1

Lets start by creating a new Flash ActionScript 3 Document.

Step 2

On the stage, lets draw 2 buttons - a play button and a stop button. Lets give them the instance names play_btn and stop_btn respectively. You can give a button an instance name by selecting it, and then going to the Properties Inspector where you will find an input field for the instance name.

Step 3

Once you have the buttons, lets go ahead and import the claps.wmv audio file into the Flash documents library. From the main menu, choose File > Import > Import to Library. Navigate to where the claps.wmv file is in your computer and import the file. When importing is done, you should see the audio file in the Flash documents library.

Step 4

At this point, lets set up the sound file in our library so that we will be able to access it using ActionScript. To do that, right-click on the sound file in the library and choose Properties from the context menu that pops up.

When the Sound Properties dialog box comes up, go to the part that says Linkage. If you dont see this area, click on the Advanced button at the bottom of the dialog box. Once you see the Linkage options, make sure that the following are checked:

• Export for ActionScript
• Export in frame 1

This will ensure that our audio file will be exported for ActionScript so that we can control it using our script. Export in frame 1 means that the audio file will be exported to frame 1. That way, the sound file will be available to us from the very beginning of the Flash movie. But this does not mean that the sound will play immediately. It simply means that its available to us starting at the very first frame if we wish to use it.

Step 5

After weve checked those options, youll see a couple of input fields become accessible right below the check boxes. Go to the Class input field and change the name to Claps. This allows us to create a class from our audio file. We will use this class in order to create an instance of our claps.wmv sound file, so make sure you remember this name (Claps) because we will use it later on.


Step 6

Double-check to see if youve set everything up properly and then click on OK. You will then get a message that says: A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export. Click on OK so that the Claps class will be generated once you export your SWF.

Now that the sound file in our library is properly set up for use with ActionScript, lets go ahead and write some code.

Step 7

Create a new layer for the Actions, select the first keyframe of that layer, and launch the Actions Panel.

Step 8

Lets go ahead and create an instance of the claps.wmv sound. Remember that the class name we specified is Claps. So type the following line in the script pane:

var clapsSound:Claps = new Claps();

Here, weve created a new instance of the Claps class, which is the class of the sound file in our library. Weve named this instance clapsSound. When we play this, its going to play an instance of the claps.wmv file, which is the sound file from our library that we linked to the Claps class.

Step 9

Next, lets create mouse click event listeners for our play (play_btn) and stop (stop_btn) buttons:

var clapsSound:Claps = new Claps();

play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound)

function playSound(e:MouseEvent):void
{

}

function stopSound(e:MouseEvent):void
{

}

Here, weve created 2 event listener functions - playSound for playing the sound, and stopSound for stopping the sound.

Step 10

Inside the playSound event listener function, lets use the play() method of the Sound class in order to instruct the sound to start playing once the button is clicked:

function playSound(e:MouseEvent):void
{
     clapsSound.play();
}

So now, if you test the movie, clicking on the play button will start playing the sound.

Step 11

For stopping the sound, well need to create a SoundChannel object first. And then well need to assign the play sound statement to that SoundChannel. And then to stop the sound, well use the stop() method of the SoundChannel class:

var clapsSound:Claps = new Claps();
var clapsChannel:SoundChannel = new SoundChannel();

play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound)

function playSound(e:MouseEvent):void
{
     clapsChannel = clapsSound.play();
}

function stopSound(e:MouseEvent):void
{
     clapsChannel.stop();     
}

So if we test the movie at this point, we can now successfully play and stop our library sound.

In the next part of this article, well learn how to make the sound clip loop.

Making a Sound Clip Loop in AS3

If we want to make the sound loop, well need to find a way to be able to tell it to play again once the sound has completed the playback (i.e. when it reaches the end). We can use the SoundChannel class to achieve this. The SoundChannel class has an event called Event.SOUND_COMPLETE. This event gets dispatched whenever a sound thats playing in a SoundChannel has completed playback. So we can create an event listener for this event, and then tell the sound to play again once this event gets dispatched (i.e. tell the sound to repeat when it reaches the end).

Lets go ahead and create the event listener function first. Lets name it loopSound. Inside this listener function, well instruct the sound to play again. So well need to add another play sound statement inside this function:

function playSound(e:MouseEvent):void
{
     clapsChannel = clapsSound.play();
}

function stopSound(e:MouseEvent):void
{
     clapsChannel.stop();
}

function loopSound(e:Event):void
{
     clapsChannel = clapsSound.play();
     trace("The sound has reached the end");
}

Ive added in a trace statement so that we will get a message from the Output window once the sound has reached the end. So, now that weve created this listener function, lets go ahead and register it to our SoundChannel object (clapsChannel).

If youre registering an event listener function to the Event.SOUND_COMPLETE event of the SoundChannel class, you must add the event listener only AFTER the sound has been assigned to the SoundChannel (i.e. it must be added after the SoundChannel = Sound.play(); statement). In our exampe, the first time the sound plays will be when we click on the play button. So we must add the Event.SOUND_COMPLETE statement after the play sound statement inside the playSound() function:

function playSound(e:MouseEvent):void
{
     clapsChannel = clapsSound.play();
     clapsChannel.addEventListener(Event.SOUND_COMPLETE, loopSound);
}

If we added this BEFORE the statement that plays the sound and assigns it to the SoundChannel, then the listener will not work the way we want it to.

So now, go ahead and test your movie. When you click on the play button, the sound will start playing. And then when it reaches the end, you will see a message from the Output window (from our trace statement), and the sound will immediately play again.

After youve tested the movie and played the sound, you will notice that the sound will only repeat ONCE. After the second time it plays, it will no longer repeat itself. So here, you will realize that the Event.SOUND_COMPLETE listener will only listen out for the event one time. Its not going to keep listening out for Event.SOUND_COMPLETE indefinitely.

But what if we want it to listen out for Event.SOUND_COMPLETE indefinitely so that we can make our sound loop indefinitely as well?
In order to do that, well need to add the event listener AGAIN after it begins playing another time. So well need to add the Event.SOUND_COMPLETE listener inside the loopSound() function as well:

function loopSound(e:Event):void
{
     clapsChannel = clapsSound.play();
     clapsChannel.addEventListener(Event.SOUND_COMPLETE, loopSound);
}

So now, we have the add event listener statement for the Event.SOUND_COMPLETE listener in both the playSound() and loopSound() functions right after the clapsChannel = clapsSound.play(); statement. That way, each time the sound plays, Flash will watch out for when the sound completes the playback and will play the sound again. So what we have is a sound clip that will keep repeating indefinitely.