Creating
a Volume Control Slider
by
kirupa chinnathambi
While a simple sound 'on' or sound 'off' button
is acceptable, a volume slider is even better! A volume
slider is a small bar that you can drag to increase or
decrease the volume of any sound. In this tutorial, you will learn how to
create just that.
The following animation is a good example of
what you will be creating. Drag the horizontal slider to the
right and press the Play arrow to hear the sound. Notice how
the volume increases when you slide the slider to the right
and decreases when you slide the slider to the left.
[ once the music loads,
increase the volume and press the play arrow ]
Creating the Animation:
A large portion of this
animation lies in simply creating the slider. Ilyas Usal
(ilyaslamasse/pom) wrote an excellent tutorial that tells
how to create a slider:
http://www.kirupa.com/developer/mx/slider.htmNeedless to say, I don't want you to create a slider from
scratch for this tutorial. Therefore, I have provided a
sample FLA file that includes the above interface with a
functioning slider so you can focus more on volume control
and not worry about actually having to create a slider.Download and extract the partial, zipped FLA and MP3 from the following link:
Once you have opened the volume_user.fla file you
downloaded from the above link, you will see a similar
interface as that shown in the example animation above.
First, we need a variable that controls the volume
according to the slider's position on the horizontal line.
Right click on the slider and select 'Edit in Place'.
You should now find yourself in the slider movie clip.
Right click on the solitary keyframe in the Code layer and
select Actions.
You will see a chunk of code that enables the slider to work.
We need to place a variable that communicates the value of
the slider to the rest of the animation. Add the following
line of code AFTER the line starting with the word
ratio:
_root.volume = ratio;
The entire section of code
will now look like this with the code you added colored in
blue:
this.ratio = 0;
dragger.onPress = function() {
this.startDrag(true, 0, 0, line._width, 0);
this.onEnterFrame = function() {
ratio =
Math.round(this._x*100/line._width);
_root.volume = ratio;
};
};
dragger.onRelease = dragger.onreleaseOutside=stopDrag;
After you have added that line of code, press the blue left
arrow under your timeline to go back to the main stage:
[ press the
blue arrow to go to the main timeline ]
Now that you are back in the main timeline, you will add
the code that makes the sound's volume correspond to the
slider.
Right click on the slider and select Actions. You will
already see a large portion of code responsible for
playing the sound. Before the very last bracket '
}' in
the code, add the following line:
mySound.setVolume(_root.volume);
The last few lines of code in your Actions
window should look similar to the following image:
[ copy and paste the line of
code directly above the last bracket ]
You are done with the animation, but if you are not familiar
with what was done in this tutorial, I strongly urge you to
read the explanation.
ActionScript Explained
First, let us discuss how the sound gets
played and the volume adjusted. The following section of code can be
found on the slider movie clip:
onClipEvent (load) {
mySound = new Sound();
mySound.loadSound("sound2.mp3", false);
}
onClipEvent (enterFrame) {
downloaded = mySound.getBytesLoaded();
total = mySound.getBytesTotal();
if (downloaded != total) {
_root.dl = "downloading song...";
} else {
complete = 1;
_root.dl = "";
}
mySound.setVolume(_root.volume);
}The orange
colored code creates our sound object. In this tutorial, I
am calling the sound object mySound.
For information on dynamically loading a sound file, scroll
to the bottom of the page from
the following URL:
http://www.kirupa.com/developer/mx/loading.htmIn the green section
of code, the actual song is preloaded before being
displayed. The total size of the sound file is determined
using getBytesTotal(). The
portion of the sound that has currently loaded is determined
using getBytesLoaded().
By using an if statement, we can tell Flash
to check if the portion of the sound file loaded does not equals the total file size of the sound file. If the
song is still downloading, the if statement will tell a
textbox 'dl' to display the text "downloading song...". If
the song has loaded, a variable called
complete is
initialized to 1. You will see where this variable is used
again.In the blue portion of the
code, setVolume() is used for the
mySound sound object. The
variable _root.volume
carries a number between 0 and 100 as
determined by the slider position (remember we set
_root.volume = ratio inside
the slider). When you combine all of the above you get the
ability to control the volume of the sound.
Now, right click on the Play button on
the stage and select Actions. The code you will see is:
on
(release) {
if
(_root.mySlider.complete == 1) {
_root.mySlider.mySound.start(0, 99);
}
}
The above code actually allows you to play
the sound that was loaded in the slider movie clip. If the
variable complete, located on the
mySlider (slider) movie clip, equals 1, the song
starts to play and loops 99 times before stopping. If you
recall, in the preloader I discussed in the previous
section, the variable complete
was initialized to 1 after the song was loaded. I did not
want the user to play the sound without having completely
downloaded the song. The only way to ensure that would be to
use an if statement that
prevents the song from being played unless the value of
complete = 1; which it will
once the sound is loaded.
Thanks a lot to
Shane Waldeck (lostinbeta) for helping me resolve a
childishly easy sound problem I had initially.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx/volume_slider.htm
