Finamore Design

Triggering a background audio track on and off in ActionScript 3.0 is a bit more involved than in previous version of the language.

Create Button

The first step is to create the button with the up and over states. Since I want my button to switch between the universal Play icon (the right pointing triangle) and the universal Pause icon (two vertical posts). I am going to create a button symbol with a generic gradation that shifts colors in its up and over states.

Create Movie Clip

Next, crate a Movie Clip with three layers, each containing only two frames.

Name Layer 1 “actions” both frames should be keyframes with the stop(); command.

Name Layer 2 “icons” again both frames should be key frames.

Frame 1 will include the Play icon Frame 2 will include the Pause icon Name layer 3 “button” this layer has the button symbol.

Drag the movie_clip from the library to the stage (if not already there) and in the Properties Inspector give the movie clip and instance name of play_mc.

Import Sound

Go File > Import > Import to Library

Locate the audio file you want to play (preferably aif, mp3 or wav). In this case I will refer to mine as importedSound.mp3.

Click OK.

You should now see importedSound.mp3 in the library. Click once on it to select it. Now that it is highlighted you should see the wave form in the top of the library panel (you can click play to test to make sure you imported the right sound). With sound file selected, click on the properties button at the bottom of the library panel (it looks like a black circle with a white i).

In the new window that pops up, click Advanced button.

Next check the “Export for ActionScript” box. It should automatically pre-populate some info for you. The one you need to check is the class name. Make sure it fits with ActionScript naming conventions (starts with lower case letter, has letters and numbers only, no spaces, no punctuation). I will name just remove the .mp3 from mine so that is it importedSound.

Now click OK. (If you click the close window button you changes will not be saved). Once you click you should receive a warning window stating that the class does not previously exist ad that Flash is going to create one. Click OK. We want Flash to do this.

We are now ready to write our script.

Write Script

Add a new layer to the main timeline and name it actions.click on frame 1 and open your actionscript window.The first thing we need to do is to substantiate the Instance of the Sound subclass importedSound as we specified in the Linkage dialog for audio file: importedSound.mp3 in the library.

var myAudio:importedSound = new importedSound();

next we set up the sound channel

var myChannel:SoundChannel = new SoundChannel();

Since we want to pause the sound on the click we need a variable to remember where the play head is in the audio file when the button is clicked.

var myPausePosition:uint;

next we start the sound playing, I am also going to the pre existing class of buttonMode to true to signify that the sound is playing and tell the movie clip to go to frame two where the pause icon is.

play_mc.buttonMode = true;

myChannel = myAudio.play();

play_mc.gotoAndStop(2);

now we need an event listener to check if the button is clicked, and a function to check if the sound is playing or not, and do the opposite

play_mc.addEventListener(MouseEvent.MOUSE_UP, myStartSound);

function myStartSound(event:MouseEvent):void {

if (play_mc.buttonMode == false) {

play_mc.buttonMode = true;

myChannel = myAudio.play(myPausePosition);

play_mc.gotoAndStop(2);

} else {

myPausePosition = myChannel.position;

play_mc.buttonMode = false;

myChannel.stop();

play_mc.gotoAndStop(1);

}

}

since the audio will not automatically loop, I will put an event listener on the channel and listen for the end of the audio. when it ends trigger a function that will stat it again from the beginning.

myChannel.addEventListener(Event.SOUND_COMPLETE, myPlaybackComplete);

function myPlaybackComplete(event:Event):void {

myChannel = myAudio.play();

}

Here is what the completed ActionScript looks like:

And there you go. A button that will play and pause an audio track.

Note: This requires that your main timeline has only one frame. If you have more than one frame you will have multiple instances of the sound playing (one being triggered ever time the playhead returns to frame 1).

This entry was posted on Monday, February 25th, 2008 at 12:12 pm and is filed under Interactive. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.