Skip to main content

Home

Daniel C. Fergus

Artist & Educator

VCB-331 Rich Media 1

Volume Slider (Flash AS3)

Introduction

In a previous exercise I detailed the basics of using sound objects—playing sounds, stopping sounds, pausing sounds and adjusting the volume. In this exercise we'll add a volume slide to the mix.

Sound files

  1. You'll need a sound of some sort; if you don't have one handy you can download this zipped file . It contains two songs by Kevin MacLeod from his royalty free music Web site.
  2. Create a new Flash file and save it as volumeSlider.fla.
  3. You could opt to use an internal or external sound file in this tutorial. If you choose to use an internal sound, import it and set it's linkage to Export for ActionScript. Call it "mySound." If you choose to use an external sound make sure it is placed in the same volume as the Flash file.

Graphics

    slider image
  1. Create a horizontal line 175 pixels long with a 2 pixel thickness; this will be the "track" that your slider knob will travel on. You can actually make the line any length you like, but there are two places in the code below that refer to the length of the line; if you change the line length you'll have to change the corresponding values in the code.
  2. Convert the line to a movie clip (make sure the registration is top-left). Give the clip the instance name slider_mc.
  3. Open the slider timeline (double-click on the slider movie click). Inside the slider timeline create a new layer. On this new layer draw a little circle or square; this will be the knob you drag to adjust the volume.
  4. Select the knob graphic and convert it to a movie clip with centered registration (note that you now have a movie clip—the knob—inside of another movie clip—the slider).
  5. Give the knob movie clip the instance name knob_mc. Place the knob on the right-hand tip of the line (if you have "snapping" turned on the knob should snap to the end of the line). Your completed slider should look something like the image to the right.

ActionScript

  1. Go back to the main timeline. Create a new layer called actions.
  2. We'll need to set up a sound object as we did in the previous tutorial. If you're using an internal (library) sound, write the following code (note that this assumes you called the sound "Sound1" in the linkage box):
    var mySound:Sound1 = new Sound1();    
    var myChannel:SoundChannel = new SoundChannel();    
    myChannel=mySound.play();  

    If you're using an external sound write:

    var mySound:Sound = new Sound();    
    mySound.load(new URLRequest("TechTalk.mp3"));    
    var myChannel:SoundChannel = new SoundChannel();    
    myChannel=mySound.play();  
  3. Now we can get the volume slider working. The first thing we need to do is set up a couple of variables we will use later in some functions. Add the following code to the script:
    var dragging:Boolean=false; 
    var mySliderLength:uint=175;   
    var boundingBox:Rectangle=new Rectangle(0,0,mySliderLength,0);  
    I'll explain how we'll use the "dragging" variable a little later. The "mySliderLength" variable will store the length of the slider track. If you made (or make) your slider tracker longer or shorter, adjust this value accordingly. Next come "boundingBox," which is not just a variable; it's actually an object—an instance of a Rectangle() class. We're creating a rectangle that'll be positioned at 0, 0 (top-left), with a width of mySliderLength (175) and a height of 0. We're going to use this rectangle as a bounding box for our slider—the area inside of which we'll be able to drag the knob. This way we'll be able to drag it left and right 175 pixels, but not up and down at all.
  4. Next we'll add some listeners:
    slider_mc.knob_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragKnob);    
    stage.addEventListener(MouseEvent.MOUSE_UP, releaseKnob);    
    slider_mc.knob_mc.buttonMode=true;

    Note that for the MOUSE_UP event we put the listener on the stage and not the knob; this way we can make sure that the knob stops moving even if the user drags her mouse away from the knob before she releases the mouse button, otherwise the knob might stay "stuck" to the mouse. We've also given the knob a buttonMode so that the cursor will change to the little finger when it passes over the knob.

  5. The first function called is the "dragKnob" function:
    function dragKnob(myEvent:Event):void { 
        slider_mc.knob_mc.startDrag(false, boundingBox); 
        dragging=true; 
        slider_mc.knob_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);    
    }  

    The startDrag method takes two arguments (the parameters inside the parentheses). The first controls the "lock center;" it specifies whether the cursor stays locked to the center of the dragged movie clip (true) or to the point where the click initially happened (false). The second argument specifies the bounding area of the drag and takes an instance of a rectangle object to do that. We created our rectangle earlier (called "boundingBox"); here's where we plug it in. Pretty slick, eh?

    We've also changed the value of "dragging" to true; the reason we do this will become clear in the next function.

    Finally, a new event listener is added to the knob. This listener is an ENTER_FRAME listener, which means it runs every frame while the dragKnob unction is running. Basically for every frame in which the knob is being dragged, the adjustVolume function is called.

  6. Now the release function:
    function releaseKnob(myEvent:Event):void { 
        if (dragging) { 
            slider_mc.knob_mc.stopDrag(); 
            dragging=false; 
        }   
    }  
    Here's where the "dragging" variable comes into play. The knob will only be released if the "dragging" variable is true. Why is this important? Well, since the releaseKnob function is being called by a listener on the stage, any mouse click anywhere will call the function, even if the knob is not being dragged. This conditional insures that the releaseKnob function is only executed if the knob was clicked-on first.
  7. And know the adjustVolume function:
    function adjustVolume(myEvent:Event):void { 
        var myVolume:Number=slider_mc.knob_mc.x/mySliderLength; 
        var myTransform:SoundTransform=new SoundTransform(myVolume); 
        if (myChannel!=null) { 
            myChannel.soundTransform=myTransform; 
        }    
    }  

    Here's where the real magic happens. We create a variable called myVolume and fill it with a number from zero to 1. That number is generated by dividing the x position of the knob by mySliderLength (the width of our bounding box and therefore the maximum possible amount for x). In the next line we create a new SoundTransform instance (which we use to control volume) and assign it the myVolume number. Then we apply the soundTransform to the channel, which is what actually adjusts the audible volume level.

    The one odd wrinkle here is the conditional that checks to see if myChannel is null. This is only necessary if you provide the user with start and stop buttons, for if you don't include this "if" statement, the user will get an error if she tries to adjust the volume before she hits the play button. The error occurs because the SoundChannel object initially contains a null value (is empty); it isn't actually assigned a value until one actually starts playing the music.

decorative thumbnail

All text, images, and multimedia pieces (unless otherwise specified) copyright 2005–2011 Daniel C. Fergus. All rights reserved. No reproduction without permission.