Finamore Design

Trig­ger­ing a back­ground audio track on and off in Action­Script 3.0 is a bit more involved than in pre­vi­ous ver­sion of the language.

Cre­ate Button

The first step is to cre­ate the but­ton with the up and over states. Since I want my but­ton to switch between the uni­ver­sal Play icon (the right point­ing tri­an­gle) and the uni­ver­sal Pause icon (two ver­ti­cal posts). I am going to cre­ate a but­ton sym­bol with a generic gra­da­tion that shifts col­ors in its up and over states.

Cre­ate Movie Clip

Next, crate a Movie Clip with three lay­ers, each con­tain­ing 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 “but­ton” this layer has the but­ton symbol.

Drag the movie_clip from the library to the stage (if not already there) and in the Prop­er­ties Inspec­tor 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 (prefer­ably 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 high­lighted 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 prop­er­ties but­ton at the bot­tom of the library panel (it looks like a black cir­cle with a white i).

In the new win­dow that pops up, click Advanced button.

Next check the “Export for Action­Script” box. It should auto­mat­i­cally pre-populate some info for you. The one you need to check is the class name. Make sure it fits with Action­Script nam­ing con­ven­tions (starts with lower case let­ter, has let­ters and num­bers only, no spaces, no punc­tu­a­tion). I will name just remove the .mp3 from mine so that is it importedSound.

Now click OK. (If you click the close win­dow but­ton you changes will not be saved). Once you click you should receive a warn­ing win­dow stat­ing that the class does not pre­vi­ously exist ad that Flash is going to cre­ate 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 time­line and name it actions.click on frame 1 and open your action­script window.The first thing we need to do is to sub­stan­ti­ate the Instance of the Sound sub­class import­ed­Sound as we spec­i­fied in the Link­age dia­log 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 vari­able to remem­ber where the play head is in the audio file when the but­ton is clicked.

var myPausePosition:uint;

next we start the sound play­ing, I am also going to the pre exist­ing class of but­ton­Mode to true to sig­nify that the sound is play­ing 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 lis­tener to check if the but­ton is clicked, and a func­tion to check if the sound is play­ing 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 auto­mat­i­cally loop, I will put an event lis­tener on the chan­nel and lis­ten for the end of the audio. when it ends trig­ger a func­tion 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 com­pleted Action­Script looks like:

And there you go. A but­ton that will play and pause an audio track.

Note: This requires that your main time­line has only one frame. If you have more than one frame you will have mul­ti­ple instances of the sound play­ing (one being trig­gered ever time the play­head 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.