Craig Campbell’s School of Flash

This tutorial is part 2 of a series of posts on creating a music player. Click the links below to view the other posts in the series:

• Part 1 - Using Sound in ActionScript 3
• Part 3 - Creating a Pause Button
• Part 4 - Creating a Mute Toggle Button

---

In our last tutorial, we talked about how to create a simple music player using ActionScript 3 with a play button and a stop button.In this tutorial, we’ll take our music player one step further as we discuss how to add a volume slider to our Flash file.If you want to follow along, download the source file from the previous tutorial. This is the file we’ll be starting with.

1. Draw Your Volume Slider. In this case, I’m starting with a simple black line, 2 pixels thick.

With this black line selected, I’m going to hit F8 to convert it to a movie clip symbol. Then I’ll give the symbol an instance name of “volume_mc” and double-click on the symbol to go into its timeline. Once I’m inside the volume slider timeline, I’ll create another layer on top of the layer with the line in it, and in this new layer, I’ll create the actual knob that we’re eventually going to be able to drag back and forth. This knob is going to be a smaller version of the background of the stop and play buttons, so it will be easier if I just copy and paste the graphics from the buttons.

Once I’ve created the knob, I’m going to select it (and not the line) and convert it to a movie clip symbol (with the registration point in the center). This will give us a symbol within a symbol. Make sure you give this knob an instance name as well. I’m going to give it an instance name of “slider_mc”.

2. Prepare the Slider. Once we have the volume movie clip set, we’re going to line all of the graphics up inside the movie clip in a way that will make our ActionScript code a little bit easier. One thing that will make the coding easy is to make the length of the line exactly 100 pixels. This line represents the groove inside of which the slider is sliding, and if we make it exactly 100 pixels wide, it will be really easy to perform our volume calculations when we start moving our slider back and forth.

The second thing we need to do with our line is to place it at an x/y coordinate of 0/0. This way, when we slide our knob around inside the volume_mc movie clip, we’ll be dragging between the x coordinates of 0 and 100. Again, this will make our volume level much easier to calculate when we jump into ActionScript.

Finally, we’re going to place the knob in it’s initial position. By default, we want the volume turned up all the way, so we’re going to place the knob at the far right end of the “groove” line. If you have the “Snap to Objects” magnet turned on at the bottom of your toolbar, it should be very easy to snap the knob to the right end of the line.Here’s a zoomed-in view of our graphics as we should currently have them set up:

Remember that we have a movie clip within a movie clip here. The volume slider as a whole has been given an instance name of volume_mc, and inside this movie clip, we have the knob set up as an individual movie clip with an instance name of slider_mc.

3. Make the Slider Draggable. Let’s start by taking a look at the code. Select frame one of the Actions layer and open up your Actions Panel. Add the following code at the bottom of the code that’s already there.

You might notice right away, if you’re relatively new to ActionScript 3, that making something draggable is a little more complex than it was in ActionScript 2. In ActionScript 3, the first thing we need to do is to create an Event Listener that will listen for the user to MOUSE_DOWN on the volume knob (line 31). This event listener triggers the “dragIt” function, in which we call on the “startDrag()” for the slider knob. This startDrag function works a little differently than in AS2. In AS2, it expected you to type in the limits of movement as 4 different numbers that represented the minimum and maximum x and y values. In AS3, it’s still expecting the same thing, but now it’s expecting it in the form of a Rectangle object, which we initially created on line 30.

When we created this new Rectangle, we put four numbers in the parentheses. These numbers represent the x coordinate, y coordinate, width, and height of the Rectangle object, in that order. And it’s important to remember that since the knob is WITHIN the volume_mc movie clip, we need to enter in the x and y coordinates of the knob inside the context of that movie clip, which is why the first two numbers are set to zero. The third number is the width. And since our “groove” line is 100 pixels wide, and that’s how far we want to be able to drag our knob left and right, then that’s the number we need to use. Also notice that the height of this rectangle is zero. This is because we don’t want the user to be able to drag the slider up and down–only left and right.

Anyways, since we’ve already created the Rectangle object in line 30, and we’ve stored it in a variable called rectangle, we can simple refer to that rectangle object inside our startDrag() method.

At this point, you might be wondering what the “dragging” variable is for. Well, in ActionScript 2, we had a handy little event handler called “onReleaseOutside”. Without the “onReleaseOutside” event, if we dragged our knob over a little and then moved our mouse cursor up, away from the knob, before we released the mouse button, then the “onRelease” event wouldn’t be triggered, and the “stopDrag()” method would never be called. So, in AS2, if we added the “onReleaseOutside” event to our code, then we could easily handle this.

Unfortunately, however, there is no longer an “onReleaseOutside” event, so we’re forced to use a little bit of cunning trickery to get everything to work correctly. What we did was we created a MOUSE_UP event listener for the stage instead of for the slider knob. That way, no matter where the mouse cursor is when the user releases, the “dropIt” function will still be triggered. However, we don’t want this to happen ANY time we click on the stage and release. We only want it to happen if we’re currently dragging the slider. So we handle this by creating a Boolean (true/false) variable called “dragging” that keeps track of whether we’re currently dragging the slider. Obviously, this would be set to “false” by default. And then, when we click on the slider and start dragging it, we switch it to “true” (line 37).

And then, when we run the “dropIt” function, we first check to see if we’re currently dragging the slider. If not, then nothing happens. But if we are, it runs the “stopDrag” function, and everything is peachy!So, at this point, be sure to test your file to make sure that you can drag your slider within the restricted bounds that we set up in our Rectangle object.

4. Adjust the volume. When we start dragging, we not only want the slider knob to follow our cursor around, but we also want our volume to adjust as we move it. And the way we’re going to achieve this is we’re going to create an ENTER_FRAME event inside our “dragIt” function. This ENTER_FRAME event will cause a function to run over and over again at the current frame rate. In this function, we want to check the position of our slider and then use a little hocus pocus (a.k.a., math) to adjust the volume of our sound file accordingly.

As mentioned, we added our ENTER_FRAME event inside the dragIt function on line 38. This event listener triggers a function called adjustVolume. The adjustVolume function, which starts on line 50, contains all the code that examines the location of the slider knob and adjusts the volume accordingly.The first thing we need to do in order to adjust the volume is to calculate the number we want to use. In ActionScript 3, the number representing the volume is going to be a number between zero and one. Zero represents complete silence, 0.5 represents 50% volume, and 1 represents full volume. Since our slider is exactly 100 pixels wide, it’s very easy to calculate what the volume needs to be. Simply find the x coordinate of the knob within the volume_mc movie clip and divide by 100 to get the adjusted volume level.

Note: If your slider is not 100 pixels wide, then you will need to use some fancier magic (I mean, math) in order to come up with this number. In order to accomplish this, it’s easiest to think in percentages. If your slider knob is 50% of the way across the slider area, then the volume needs to be adjusted to 0.5. If the slider area was 250 pixels wide, for example, the calculation would look like this:

var vol:Num = volume_mc.slider_mc.x / 250;

Easy enough, right?

Once the necessary volume level has been calculated, this number needs to placed inside a new instance of the SoundTransform class. This SoundTransform object is then assigned to the “soundTransform” property of our SoundChannel object that we created to control the music. (For more information on the SoundChannel class, view the last tutorial.) This SoundChannel class is stored in a variable called “sc”, and our SoundTransform class is stored in “st”.

You’ll notice that the SoundTransform object is only applied to “sc” IF “sc” is not null. If we don’t include this “if” statement, then when we test our movie, we’ll get an error if we try to adjust the volume before we actually hit the play button. This error occurs because before we hit “play”, our SoundChannel object still contains a null value. It isn’t assigned a value until we actually start playing the music.Anyways, if you test your movie now, you’ll find that you now have fully functioning sound controls for your file.

Source file: volume.zip

---

Click the links below to view the other posts in the series:

• Part 1 - Using Sound in ActionScript 3
• Part 3 - Creating a Pause Button
• Part 4 - Creating a Mute Toggle Button

Tags: actionscript 3, Flash CS3 tutorial, music player, volume controls, volume slider

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.