Control sound volume.

In this tutorial we will learn how to control the volume of the sound that we play in Flash.Adding sound to your site can improve the user experience but not offering a way to control the sound could irritate the user and make him go away forever, and we don’t want that. We will build a slider that will help us to increase or decrease the sound volume and will learn how to load mp3s that we import in the Flash Library.

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.

2. On the stage draw a rectangle width: 100 px, height: 23 px, color: black and stroke: none. With the rectangle selected press F8 and convert it to a MovieClip. Set its name to track_mc and registration point to top left and click Ok. In the Property Inspector set its instance name to track_mc.

3. Double click on the track_mc MovieClip to edit it. Lock the current layer. Insert a new one, double click on its name and rename it slider. Draw a rectangle width: 10, height: 23, color: #FF6600 and set the stroke to none. Position the rectangle in the middle of the track_mc MovieClip. With the rectangle selected press F8 and convert it to a MovieClip. Set its name to slider_mc and registration point to top left and click Ok. In the Property Inspector set its instance name to slider_mc.

4. Go back to the main stage by clicking on the Scene 1 button. Double click on the layer name and name it track. This is what you should have on the stage until now.

5. Lock the track layer and insert a new one, name the new layer buttons. We will make a play and a stop button. On the button layer draw a rectangle: width: 23, height: 23, color: #FF6600 and set the stroke to none. With the rectangle selected press F8 and convert it to a MovieClip. Set its name to stop_btn and click Ok. In the Property Inspector set its instance name to stop_btn.

6. On the same layer draw a triangle same size and color like in step 5.Convert it to a MovieClip name it play_btn and set its instance name to play_btn. Position the MovieClips like in the picture:

7. Let’s import a sound to the Library. Go to File > Import > Import to Library browse to your local hard drive and select the mp3 that you want to import.

8. Press Ctrl+L to open the Library. Select your imported mp3, right click and chose Linkage. In this panel check Export for ActionScript, set the Class name to Song and click Ok. In the window that appears click Ok. This is the name that we give to the class that is associated with the imported mp3.

9. Insert a new layer and name it actions. Select frame 1 of this layer and press F9 to open the ActionScript panel. Copy and paste the code from below.

// Code for loading, playing and stopping sound
var song:Song = new Song();
var myChannel:SoundChannel = new SoundChannel();
var soundVol:SoundTransform = new SoundTransform();
play_btn.buttonMode = true;
stop_btn.buttonMode = true;
play_btn.addEventListener(MouseEvent.CLICK,startPlay);
stop_btn.addEventListener(MouseEvent.CLICK,stopPlay);
function startPlay(event:MouseEvent):void {
myChannel=song.play(0,10);
play_btn.removeEventListener(MouseEvent.CLICK,startPlay);
}
function stopPlay(event:MouseEvent):void {
myChannel.stop();
play_btn.addEventListener(MouseEvent.CLICK,startPlay);
}
// Code that handles the sound volume
var ratio_volume:Number;
var trackBounds:Rectangle = track_mc.getBounds(track_mc);
var xPos:Number = trackBounds.x;
var yPos:Number = trackBounds.y;
var widthPos:Number = trackBounds.width-track_mc.slider_mc.width;
var heightPos:Number = 0;
var bounds:Rectangle = new Rectangle(xPos,yPos,widthPos,heightPos);
track_mc.slider_mc.x = widthPos;
track_mc.mouseEnabled = false;
track_mc.slider_mc.buttonMode = true;
track_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragSlider);
stage.addEventListener(MouseEvent.MOUSE_UP,stopSlider);
function dragSlider(event:MouseEvent):void {
event.target.startDrag(false,bounds);
addEventListener(Event.ENTER_FRAME,setVolume);
}
function stopSlider(event:MouseEvent):void {
track_mc.slider_mc.stopDrag();
removeEventListener(Event.ENTER_FRAME,setVolume);
}
function setVolume(event:Event):void {
ratio_volume = track_mc.slider_mc.x/widthPos;
soundVol.volume = ratio_volume;
myChannel.soundTransform = soundVol;
}


Press Ctrl + Enter to test your movie. Click the play_btn to start the sound; you can control the volume by dragging the slider.

Let’s look at the code.

I divided the code in two parts: code that is responsible for loading, playing and stopping the sound and code that handles the volume.

I will not explain the first part because I did that in Loading, playing and stopping sounds tutorial. What is different is the method used for loading the sound. In this tutorial we load the sound from the library and in that the sound was loading from external source.

We load the sound from the library by creating an instance (song) of the Song class that we have creating. This class extends the Sound class and because that the song object will inherit all the properties and methods of the Sound class.

In the second part: code that handles the sound volume first we declare a variable that will hold the sound volume (ratio_volume).

In the next 6 lines we get the bounds (x position, y position, width and height) of the track_mc and use those values to calculate the bounds, limits for the slider_mc. The bounds will establish the coordinates in witch we can move the slider.

Next we set the initial position of the slider (track_mc.slider_mc.x = widthPos; ), enabled the butttonMode property (will show the hand cursor when your cursor it’s over the slider) and prevent track_mc to receive mouse events (track_mc.mouseEnabled = false ;).

The function dragSlider handles the MOUSE_DOWN event added to the slider_mc. When the event occurs the slider can be dragged. Inside the function we add an ENTER_FRAME event, event that is handled by the setVolume function.

stopSlider function handles the MOUSE_UP event, when this event occurs the slider can’t be dragged .

Inside the setVolume function is where we actually control the volume. First we set the ratio_volume variable to be equal with the ratio of the slider x position and the width of the track. Add the result to the volume property of the SoundTransform object and the modification to take place we add the SoundTransform object to the soundTransform property of the channel.

This is all. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To download the source file go to Control sound volume.