Volume Slider a Flash CS3 Tutorial

Sound can greatly enhance the interactivity of a website or video game. However, these same sounds can be found very annoying by some people. Many, Flash Applications only allow the user to turn the sound on or off and not control the volume. While, I find this fine when working with my laptop since the speakers do not play very loudly, but it is an entirely different matter at home. I have my computer hooked up to my stereo system and I hate web sites with loud sounds. I immediately close the site, or turn off the sound. So, I recommend that you always use a volume slider. This Flash CS3 Tutorial will show you how easily a volume slider can be created.

The first section of the code in this Flash CS3 Tutorial is from the First Sound Tutorial, so it will not be covered in detail. Press F9 to open the actions panel and past the example code. The example code is exactly the same as in the first sound tutorial. The ActionScript is simply requesting a new sound, adding that sound to a sound channel and enabling the buttons to control the sound.

var yourRequest:URLRequest = new URLRequest ("SideOfABullet.mp3") var Music:Sound = new Sound() var controlMusic:SoundChannel Music.load(yourRequest)

play_btn.addEventListener(MouseEvent.CLICK, playMusic) function playMusic(event:MouseEvent):void{ controlMusic= Music.play() } stop_btn.addEventListener(MouseEvent.CLICK, stopMusic) function stopMusic(event:MouseEvent):void{ controlMusic.stop() };

Feel free to create your own slider, but for this Flash Tutorial it is best to use the source files provided since everything has been named for you. Create a variable to detect if the slider is moving. Next, create a new rectangle with no color, no height and a width of 100, this rectangle is basically a frame to restrict the sliders motion to left and right.

var moving:Boolean = false; var rectangle:Rectangle = new Rectangle(0,0,100,0);

An event listener needs to be added to the slider to start the drag and drop interactivity. Then, create a function to actually enable the startDrag method. Copy the code from the example. This ActionScript should be rather straight forward, but just in case, the parameters inside the startDrag method (false, rectangle) are referring to the rectangle created earlier. If you remove these parameters you will see that you can drag the slider all over the stage. volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, moveSlider); function moveSlider(event:Event):void { controlMusic= Music.play() };

Add the final example code to the actions panel. You should be familiar with most of this code. You are simple adding event listeners to the stop and play buttons that were created for you. It is the code inside the events that should be new. First when the play button is clicked the sound channel you created earlier is set a Music.play(). remember you earlier defined Music as being equal to the audio file loaded when the .swf is called. So, the code associated with the play button is simple telling the music to play. It would stand to reason that the code associated with the stop button would then simply tell the music to stop. Just, remember that you have to control the sound channel, and not the sound directly. play_btn.addEventListener(MouseEvent.CLICK, playMusic) function playMusic(event:MouseEvent):void{ volume_mc.slider_mc.startDrag(false,rectangle); moving = true; };

Next, an event listener and function needs to be created to enable the stopDrag method. So, once again copy the example code and paste it below the existing code. This time for the stopDrag method the event listener is added to the stage and will listen for the mouse to be released. Whenever, the stage hears the mouse button being released, it checks to see if moving is true. If moving is true, flash then enables the stopDrag method and sets the moving variable to false.

stage.addEventListener(MouseEvent.MOUSE_UP, releaseSlider); function releaseSlider(event:Event):void { if (moving) { volume_mc.slider_mc.stopDrag(); moving = false; } };

A function needs to be created to actually change the volume since the slider works, but isn't controlling anything. This next section of code creates a new variable called vol that is a number and is set as equal to the sliders position divided by 100. Volume control ranges from 0 - 1, so the slider variable to control the volume needs to be less then one, therefore it is divided by 100. A simple trace of volume_mc.slider_mc.x will display this. Next, a SoundTransform class is created. You must create a new soundTransform class when working with the volume. The parameter is set as vol, which is the position of the slider, this parameter when applied to a sound is the actual volume. If you are getting lost it will become clear in a moment. Last, in the function if the sound created earlier isn't null, then actionscript applies the soundTransform to the sound. function changeVolume(event:Event):void { var vol:Number = volume_mc.slider_mc.x / 100; var soundtf:SoundTransform = new SoundTransform(vol); if (controlMusic != null) { controlMusic.soundTransform = soundtf; } };

The short version is that you must apply a sound transformation to any property of the sound you want to change. In this case actionscript is simply modifying the volume.

There is one thing left to do, and that is to add something to call the change volume function. Inside the function releaseSlider there needs to be an event listener. So, add the following code under the moving = false. volume_mc.slider_mc.stopDrag(); moving = false; volume_mc.slider_mc.addEventListener(Event.ENTER_FRAME,changeVolume); }

Press Control-Enter to see you new volume slider in action

Download Flash CS3 Source Files