Saturday, 8 May 2010

Toggle sound button in Actionscript 3

I have written two audio tutorials in Actionscript 3, one tutorial which plays external sounds files and one which plays sound files loaded into the Flash library. Both of these tutorials use two separate buttons for the starting and stopping of sound. Sometimes it is more convenient when you have one button to play and stop a sound, so in this tutorial I will create a toggle sound button in Actionscript 3. The toggle button will initially display a triangle play symbol, but when you click on this button it will turn in a square stop symbol.

Toggle sound button in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import your sound in the library selecting File > Import > Import to library. In the library right click on your sound file and select properties. Select the ‘Export to Actionscript’ box and give the Class name ‘MySound’ and click ok.

Step 2

Select Insert > New Symbol and choose movie clip for the type and click ok. On the timeline insert a new layer and rename your layer like below. Notice that the Buttons layer has two empty key frames and the Bg layer does not.

Step 3

Select the Bg layer and create your background for the toggle button. I have a created a simple blue square with a black stroke. You can create whatever kind of shape you wish.

Step 4

Select the first frame of the Buttons layer and create your play button like below.

Now select the second frame and create your stop button like below.

Step 5

Return to main timeline by double clicking on the grey areas of the stage and then drag your toggle button onto the stage from the library. Give your button the instance name toggle_btn and then create a new layer on the timeline called ‘Actions’ and open up the Actions panel and enter the following code.

//This stops the toggle buttons from playing the second frame.

//Variable to detect whether the number of times the toggle button has been clicked.
var clickOnce:uint=0;

//Creates a new instance of the imported sound.
var aSound:Sound = new MySound();

//Create a new instance of the SoundChannel
var aChannel:SoundChannel = new SoundChannel();

//This adds the mouse click event to the toggle button.
toggle_btn.addEventListener(MouseEvent.CLICK, togglePlay);

//If the toggle button has been clicked once then the sound plays
//with an image of a stop symbol. If the toggle button is clicked
//again then sound stops and the play symbol is displayed.
function togglePlay(event:MouseEvent):void {
if (clickOnce==1) {;
if (clickOnce==2) {

When the sound has finished playing you can also return back to the play symbol with the following. The code uses the sound complete event to detect when the sound file has finished playing.
aChannel.addEventListener(Event.SOUND_COMPLETE, soundCompleted);

function soundCompleted(event:Event):void{
The code snippet below is an alternative way you can write the toggle sound code. I have used the shorten if else statement to cut down on the number of lines of code.

var played:Boolean=false;

var aSound:Sound = new MySound();
var aChannel:SoundChannel = new SoundChannel();

toggle_btn.addEventListener(MouseEvent.CLICK, togglePlay);

function togglePlay(event:MouseEvent):void {
 (!played) ? played = true : played = false;
 (played) ? : SoundMixer.stopAll();
 (played) ? toggle_btn.gotoAndStop(2) : toggle_btn.gotoAndStop(1);
 aChannel.addEventListener(Event.SOUND_COMPLETE, soundCompleted);

function soundCompleted(event:Event):void {
Step 6

Test your movie clip Ctrl + Enter. You should now have a toggle sound button in Actionscript 3.0.

If you wish to pause the sounds instead of stopping, take a look at Toggle sound button part 2.


FatMaori 7 July 2010 at 21:03  

How do you create this with the sound playing first?

Anonymous 25 November 2010 at 06:49  


Thanks for the awesome tutorial, I have a question though, I want to add multiple toggle buttons, how would I do that?

I tried mofifying the code but it hasn't worked.


iliketo 25 November 2010 at 10:37  

How have you modified the code?

Anonymous 26 November 2010 at 07:02  

It's ok now, I figured it out.

I created an additional instance for each new button.

I would just like to point out, to stop the individual sound, I had to use the following code:


instead of



I have one more question, what code would I use to loop a sound on a button, so that it only stops when the user presses the button again?


iliketo 27 November 2010 at 01:00  

The play() methods from the Sound class has three optional parameters.

The first parameter is the starting point of the sound. The second the number of loops. And the third is for sound transform.

So, to loop the sound you would use something like below.,int.MAX_VALUE).

Anonymous 27 November 2010 at 06:23  

Thats Great! Thanks a lot.

Best tutorial's iv found on the net (they actually work).

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP