An audio volume controller

In this exercise you are going to stream in a sound and use buttons to turn it on and off. We are also going to show you how build a simple slider that controls the volume of a sound that may be playing.Let’s create a simple audio volume controller:

1. Open the Controller.fla file in the Exercise folder from the download. When the movie opens you will see we have given you the basic elements for the control- two movie clips and two buttons. It is your job to “wire them up” with ActionScript. Still there are a couple of tasks to perform before you start.
   
   
2. Double click the Ball movieclip in the Library to open it in the Symbol Editor. You will notice there is a small text box, shown below, just above and to the right of the ball. This text box is going to show the user the volume level of the sound as the ball is dragged from one side of the bar to the other. Select the text box and change its text type from Static Text to Dynamic Text.

The reason for this is the text, actually it will be a number, in the box will constantly change. By changing the Text Type the numbers will be able to update. Before you finish there is one more task to perform. Flash doesn’t have a clue there is a Dynamic Text box on the stage. If ActionScript is going to change the numbers, give the text box the Instance name of volText. When you change the Text Type note how the text box is surrounded by dots. Another visual clue that the text is Dynamic.

 
Creating a Dynamic Text box and giving it an instance name.

3. Double click the Bar movieclip in the library to open it in the Symbol Editor. Select the Ball on the stage and give it the instance name of volBall. Click the Scene 1 link to return to the main timeline.
   
   
4. Click on the Play Sound button on the stage and give it the instance name of btnPlay. Click on the Stop Sound button and give it the instance name of btnStop. Finally select the slider on the stage and, as shown below, give it the instance name of mcVolSlider. We are now ready to start writing the ActionScript.

 
The controller is ready to be “wired up” with ActionScript.

5. Click once on the first frame in the Actions layer, open the ActionScript Editor and enter the following code:

var mySound:Sound= new Sound();
mySound.loadSound("track01.mp3" , true);

mySound.stop();

Nothing new here. Mind you, if you test the movie the sound won’t play because instead of using the start() method , we use the stop() method which kills a sound. Let’s deal with this one right now.

6. Press the Return/Enter key twice and enter the following code:

btnStop.onRelease = function():Void {
  mySound.stop();
};

btnPlay.onRelease = function():Void {
  mySound.start();
};

Go ahead, test the movie. Click a button and the sound stops or starts.
Now that the easy part is completed let’s turn our attention to using the slider to control the volume level of the audio track.

The image below shows you the basic relationship of the ball to the volume level. The width of the bar is 400 pixels. This means the location of the center point of the ball on the bar, at any point in time, can be expressed as a percentage of distance along the bar. The neat thing about ActionScript is that distance is nothing more than a number. That number can then be subsequently used to as the volume level. For example, if the ball is sitting at the mid point of the par, 200 pixels, it is 50% of the way along the bar and that number is used as the value for the volume level of the audio. Here’s how you do that:

 
The location of the ball along the bar will determine the volume level of the audio.

7. Select the first frame of the Actions layer, open the ActionScript Editor and enter the following code  after the Play button code:

var nVolCheck:Number;

mcVolSlider.volBall.onPress = function():Void {
  this. startDrag (false, 0, 0, 400, 0);
  nVolCheck = setInterval(updateVolume, 100);
};

mcVolSlider.volBall.onRelease = function():Void {
  this.stopDrag ();
  clearInterval(nVolCheck);
};

We are going to be using a number that tells ActionScript how long to wait between “checks” for the ball location on the bar.  The first line of code does just that.

The next two functions tell ActionScript what to do when the user presses the mouse and what to do when the user releases the mouse.

When the mouse is pressed the ball  — this — is made draggable —  startDrag().

The parameters inside the startDrag method  tell ActionScript not to lock the center point if the ball to the mouse tip and that the ball can only be dragged a total distance of 400 pixels to the right. This 400 is the width of the parent movieclip, mcSlider and the number starts at the left edge of mcSlider. The next line of code uses the setInterval () method to determine what to do when a check is to be performed — updateVolume — and how long to wait between checks — 100 milliseconds.

When the user releases the mouse the ball is no longer draggable and the checking for the ball position stops. The final step is to write the updateVolume fiunction used when the mouse is pressed.

8. Press the Return/Enter key twice and enter the following code:

function updateVolume():Void {
  var vol:Number = (mcVolSlider.volBall._x)/4;
  mySound.setVolume(vol);
  mcVolSlider.volBall.volText.text = vol;
};

The first line of the function performs the percentage calculation determining the ball’s location on the bar. The number is constantly changing which explains why it is given the variable name of vol. The ._x property of the ball — its location on the x axis — is determined and that number is divided by 4 to obtain a value between 0 and 100. That number is then used as the parameter for the setVolume() method and is also added, as text, to the Dynamic Text  box—  volText —just above the ball.

9. Save the movie and test it.

Notice how, the number changes as you drag the ball and the volume level increases or decreases as you move the ball to the left or the right. Go ahead, try it out for yourself by clicking the Play Sound button: