Today's tutorial is Part 4 of a series of tutorials on creating a music player using Flash CS3 and ActionScript 3. The previous tutorials can be found here:

If you haven't read these tutorials yet, then I strongly urge you to check them out. The Flash file we'll be starting with can be found at the bottom of the Pause Button tutorial.

1. Open up pause.fla and take a look at the ActionScript. This file contains all the ActionScript we've worked on to date. If there are parts of this ActionScript that you don't understand, again I'll point you to the previous music player tutorials listed above.

As a quick review, we've created a Sound object (an instance of the Sound class), and we've stored this object in a variable called music. After creating the Sound object, we've also created a SoundChannel object and stored it in a variable called sc. This SoundChannel object allows us to control the playback of our Sound object. In order to control the volume, we must also create a SoundTransform object.

2. Create a Mute button. We've already created a volume slider, but we also want to be able to simply click on a Mute button in order to immediately silence the sound. Here's what my music player looks like with the Mute button added.

Music Player with Mute Button

If you don't want to draw the shape for the mute button yourself, you can access it within the Webdings font, if you have it. To access the speaker icon, select the Webdings font and type a capital X.

3. Set up the Mute button Movie Clip. Save the Mute button graphic as a Movie Clip symbol. This Movie Clip is going to have 2 states: an On state for when the sound is playing, and a Mute state for when it's not. Within the Mute movie clip timeline, create 2 different states, and in the "Mute" state, draw a red line across your mute icon. Here's what my timeline looks like:

Mute Button Timeline

Be sure to add a "stop" action to frame 1 of your movie clip's timeline so Flash doesn't play through the entire timeline by default. Also, don't forget your frame labels, or the code we enter in below won't work.

4. Go back to your main timeline and give your mute movie clip an instance name of mute_mc.

5. Create a variable to store your current volume level and your muted status. In the Scene 1 Timeline, click on frame 1 for the Actions layer and hit Opt+F9 on your Mac (or just F9 on PC) to open up your Actions Panel. At the very top of your code, create 2 new variables called 'soundVolume' and 'muted'. Set soundVolume equal to 1 and set muted to false. Like so:

var soundVolume:Number = 1;
var muted:Boolean = false;

We've set the default value of soundVolume to 1 because we want to start out at full volume by default.

6. Update the 'adjustVolume' function. In the adjustVolume function, we had previously created a variable called vol and used this variable to set our volume. Since we now have a more global volume variable, we can now point to soundVolume instead of creating a whole new variable. Here's what the updated function will look like:

code

Notice that in this function, we've also set the muted variable to false. This will ensure that if the user clicks on the mute button and then clicks on the volume slider, Flash will set the muted status back to where it needs to be.

6. Update the dropIt function. In our volume slider tutorial, we overlooked one little thing. We created an ENTER_FRAME event handler for when we clicked and dragged the volume slider. This ENTER_FRAME event constantly checks the position of the volume slider and updates the volume accordingly. Unfortunately, though, we never deleted this ENTER_FRAME event when we released the mouse button to stop dragging. If we don't do this now, then the ENTER_FRAME event will mess with our mute button. Here's what the updated dropIt function will look like:

code

7. Enter the code for your mute button. Enter the following code at the bottom of your existing code:

code

Line 81 creates an event listener that will trigger the mute function when the mute button is pressed.

Inside the mute function, we've put everything inside an 'if' statement that checks to make sure that sc is not null before it runs the code. This ensures that we're not trying to perform volume adjustments to a sound that hasn't even been loaded.

It's important to understand at this point that our soundVolume variable was created in order to keep track of the UNMUTED volume of the sound. When the sound is muted, this variable is never set to zero. Rather, this variable retains the previous volume so that when we UNMUTE the sound, it will return to the volume that the user had previously set.

Inside the initial 'if' statement, there is another 'if' statement that checks the value of our muted variable. Since muted is a Boolean value, we don't have to type out "if (muted == true)". Instead, we can simply say "if (muted)", which amounts to the same thing.

If the sound IS currently muted, then we want to UNmute it. So, we set the volume back to its previous volume in lines 90-91 and then set the muted variable back to false. Also, on line 92, we send the mute_mc movie clip's timeline back to the "On" state.

If the sound is NOT currently muted, then we do the opposite.

8. Test the movie. If we test the movie now, we'll notice a couple problems when we start playing around with the controls. First of all, the mute button doesn't act like a button. The mouse cursor doesn't turn into a hand cursor. In fact, you'll notice that it's the same for the volume slider. This is an easy fix. Add the following lines of code to the very top of your ActionScript:

mute_mc.buttonMode = true;
volume_mc.slider_mc.buttonMode = true;

Another thing you may notice is that if you hit the mute button and then drag the volume slider around, the volume returns, but the mute button graphic still shows that it's muted. This is an easy fix as well. Simply add the following line of code anywhere within the adjustVolume function:

mute_mc.gotoAndPlay("On");

And that's it! Our file is complete. Here's what it looks like:

Here are the source files: mute.zip

Click here for more comprehensive Flash video training