tutorial dasar sound flash AS3

In this lesson, we're going to learn how to control sound in Flash using ActionScript 3. We're going to learn how to load external sound files into our Flash movie, as well as how to play and stop the sound's playback.

Exercise files accompany this article. Please make sure to save them both inside the same folder.

Let's begin.

You can use the AS3 Sound class to control the sound in your Flash movie using code. The AS3 Sound class can be used to:

• load an external sound file into a Flash movie
• start the playback of a loaded sound file

Open the Sound.fla file. You'll see that there are two buttons on the stage - play_btn and stop_btn. But let's ignore those buttons for now. First, let's write some code that will load and play the sound right away. Select frame 1 of the Actions layer, then go to the Actions Panel and type in the following lines:

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");

The first line (var mySound:Sound = new Sound();) creates an instance of the Sound class. I've named it mySound. We will use this to load and play the external sound file named CheerfulSong.mp3.

The second line (var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");) creates a URLRequest object. This is used to specify the path to the external file that we want to load.

So now what we've created those two objects, we can now load the external sound file. Use the load() method of the Sound class and pass to it the URLRequest object:


So in our example, we would write:


This instructs our mySound object to load the file specified in myURL (which is CheerfulSong.mp3).

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");

mySound.load(myURL);

If you test the movie at this point, you won't hear the sound just yet. That's because we just told Flash to load the sound. We haven't given the instruction to start playing the sound yet. To make the sound start playing, we use the play() method of the Sound class:

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");

mySound.load(myURL);
mySound.play();

So if you test the movie now, you should hear the sound playing.

The play() method of the Sound class has 2 optional parameters:

1. startTime - this lets you specify the point (in milliseconds) where the sound playback should start
2. loops - this lets you specify how many times the sound should repeat playback

For example, lets pass values to these 2 parameters like so:


The first value refers to the startTime parameter. Here, we've specified a value of 25000 milliseconds (or 25 seconds). This means that when the sound begins playing, it will start playing at the sound's 25-second mark, instead of starting at the beginning. So it will skip the first 24 seconds of the song when the playback starts.

The second value refers to the loops parameter. We've specified a value of 2. This means that the sound will play 2 times. When it plays the first time and then reaches the end, it will loop back to the startTime and play one more time.

Test the movie in order to verify, and then change the play statement back to mySound.play(); (without any parameters), and let's continue.

If we want the sound to play only after the play button (named play_btn) has been clicked, then we'll have to create a mouse click event listener for the play button, and we'll transfer the play sound statement inside that event listener:

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");

mySound.load(myURL);
// Make sure that you remove the play sound statement
// that was here, and transfer it into the mouse click
// event listener function

play_btn.addEventListener(MouseEvent.CLICK, playSound);

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

Here, we've created a mouse click event listener function named playSound, and we've transferred the mySound.play(); statement into that event listener function. So now, when we test the movie, the sound is only going to play when the play button is clicked.

So now that we can play the sound, how do we stop it?
You can NOT stop the sound using the Sound class (e.g. Sound.stop(); will not work). Another class is used for that - the SoundChannel class - which has a stop() method that will let you stop a sound's playback.

Let's go ahead and create an instance of the SoundChannel class. I'm going to name it mySoundChannel.

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");
var mySoundChannel:SoundChannel = new SoundChannel();

mySound.load(myURL);

We now have a SoundChannel object named mySoundChannel.

Think of the SoundChannel as the object that houses or contains your sound. In order to place a sound inside a SoundChannel, you assign the play sound statement to a SoundChannel like so:


So in our example, we would write:


This assigns mySound.play() to mySoundChannel, so that the sound is going to play inside mySoundChannel. Let's go ahead and assign mySound.play() to mySoundChannel in our code:

var mySound:Sound = new Sound();
var myURL:URLRequest = new URLRequest("CheerfulSong.mp3");
var mySoundChannel:SoundChannel = new SoundChannel();

mySound.load(myURL);

play_btn.addEventListener(MouseEvent.CLICK, playSound);

function playSound(e:MouseEvent):void
{
     mySoundChannel = mySound.play();
}

So we've now assigned our sound to a channel. In order to stop the sound, then we'll have to stop the SoundChannel that contains the sound. We will use the stop() method of the SoundChannel class like so:


This will stop whatever sound that is playing inside the mySoundChannel object.

Let's put this stop statement inside a mouse click event handler for the stop button (stop_btn) so that our sound will stop playing when the user clicks on the stop button:

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

function playSound(e:MouseEvent):void
{
     mySoundChannel = mySound.play();
}

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

Here, we've created a mouse click event listener function named stopSound() for the stop button. This event listener function contains the mySoundChannel.stop(); statement. So now, the user can click on the stop button in order to stop the sound's playback.

Detecting when a Sound has Reached the End of Playback

In some cases, you might want to enable Flash to detect when a sound has finished playing. Let's say, for example, you have a song that's playing in the background, and you'd like Flash to display an image or a message only when the song has finished. To be able to detect when a sound file has reached the end, you can use the Event.SOUND_COMPLETE event of the SoundChannel class. This event gets dispatched once a sound file completes playback.

Let's go ahead and add an Event.SOUND_COMPLETE listener to our code. I'm first going to create the event listener function, which I will name endOfSound.

function playSound(e:MouseEvent):void
{
     mySoundChannel = mySound.play();
}

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

function endOfSound(e:Event):void
{
     trace("Sound playback is complete.")
}

Here, we have an event listener function named endOfSound. When this function gets called, it's going to trace a message to the Output window.

Now that we have this event listener function, we then need to add the event listener to our SoundChannel object. When you're adding an Event.SOUND_COMPLETE listener, the event listener must only be added AFTER the play sound statement has been assigned to a SoundChannel (i.e. after the SoundChannel = Sound.play(); statement). In our example, this line would be:


And in our code, this line can be found inside the playSound event listener function. So we must add the event listener for Event.SOUND_COMPLETE right after that line:

function playSound(e:MouseEvent):void
{
     mySoundChannel = mySound.play();
     mySoundChannel.addEventListener(Event.SOUND_COMPLETE, endOfSound);
}

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

function endOfSound(e:Event):void
{
     trace("Sound playback is complete.")
}

Now that the event listener has been added, Flash can now detect when the sound has reached the end. If you test the movie now and play the song, the trace statement will output the message once the song reaches the end. So whatever other instructions you'd like to tell Flash to do once the song has reached the end (e.g. play another song, stop the animation, go to the next frame, display an image) should be placed inside the Event.SOUND_COMPLETE event listener function.

Stopping All Sounds at Once

If you have multiple sound clips playing at the same time, you can stop all of them at once by calling the stopAll() method of the SoundMixer class. In the example below, we have some code that stops all the sound clips that are currently playing, when a button is clicked:

// Assume that stopAll_btn is a button 
// that already exists on the stage
stopAll_btn.addEventListener(MouseEvent.CLICK, beQuiet);

function beQuiet(e:MouseEvent):void
{
     SoundMixer.stopAll();
}

Here, we've created a mouse click event handler that will enable the user to stop all sound clips that are currently playing by clicking on the button.

And those are the basics of how you can use the AS3 Sound class and the AS3 SoundChannel class in order to work with sound in Flash.