Using the Sound Object to Control Volume
The sound object is a very important aspect of Flash. Dynamically controlled sounds played directly from the library
can only be realized by using this versatile object. Check out this tutorial and get a great start on using the sound
object in your movies! And of course, let us know if you have
any questions or comments.
The finished sound controller [Turn on those speakers].
1. Begin by making a new movie in Flash [I chose 125 pixels wide and 150 pixels high for this
example].
2. This tutorial is easiest if we create all of our graphics and symbols first, so that's how we will approach
it. Start off by creating 3 new layers so that you have a total of four. Name the top layer actions [for
storing our code], the next layer text [which will have all of our descriptions and text fields], the
third layer buttons [for the playback controls], and the last volumebar [for volume bar
elements].
Layer setup
3. First we will fill in our text layer, so select it. For the tutorial you will need one dynamic
text field, so drag out a small text field using the Text Tool [T]. In the Text Options panel, make sure to
select "Dynamic Text" and "Single Line" from the drop down menus. In the Variable field, fill in something
useful like "volumeText". As far as placement is concerned, you can use the tutorial file as a template if
you want, but location should coincide with your specific application.
4. Now switch to the buttons layer. You will need a play button, a stop button, a volume up
movieclip, and a volume down movieclip [Insert > New Symbol]. Since this is a more advanced tutorial I won't
go into details of button and movieclip creation, just create the two simple buttons for play and stop with whatever
states you wish, and two simple movieclips for the volume up and down buttons. The reason we make these two movieclips
instead of buttons is that this will enable us to add special behaviors enabling the user to click and hold them
instead of having to repeatedly click them. We will apply code to the buttons and movieclips in a moment.
5. Finally switch to the volumebar layer, where we will construct the volume bar itself. Start
by creating a filled rectangle the size you'd like your volume bar to be. Using the Arrow Tool [V], select
only the fill of the rectangle. Now select Insert > Convert to Symbol, and make a movie clip symbol out of
the fill. Name it something like volumeFill, and make sure to name its instance on the stage as well
[I also used volumeFill for this]. Select the symbol in the library window and double click it to enter
the symbol edit window. It's important to move the fill so that its centerpoint is on the lower edge of the rectangle.
That way when we scale it the rectangle will grow vertically like we would expect it to. Now double click the stage
to exit the symbol edit window. I then used the align tool to position the fill inside it's border and position them
both on stage.
volumeFill.
6. There is one additional step we need to take before adding code to our movie, and that's importing and
setting up our sound file. I used a cool .wav file we had laying around the office, but Flash supports several types
including mp3. Select File > Import [Ctrl + R] and navigate to any sound file, or the one
we provide with the tutorial files. Now select the file in your library, and right click on it. Select Linkage. from
the list. Type in an appropriate identifier like soundFile and select "Export this Symbol" before
hitting OK. This procedure makes the sound file available to access from the movie dynamically using Actionscript.
7. Now we're ready to add code to the file. The first logical thing to do is create our sound object and initialize
our variables. Go to frame one of the actions layer [this whole movie takes place on 1 frame, so you
can always assume we're on frame 1]. Add the following code to this frame:
mySound = new Sound();
mySound.attachSound("soundFile");
mySound.setVolume(volPercent * 2);
The first 3 lines simply initiate the variables and setup the movie. volPercent tracks the volume level
and goes from 0 to 100, to make the math easier. volumeText is a text field that uses volPercent to
create the text field output for formatted display to the user. volumeFill is the instance name of
our volumeFill library item. By setting its _yscale property to 50, we set it to be half
of its full y scale when our movie begins. The next 3 lines create the sound object and assign it to the variable
mySound. mySound = new Sound(); first creates the sound object with the new object constructor and then attaches
it to mySound so we can use it. In the next line we use the sound object's attachSound method to directly attach
a sound file from the library to our object so we can control it with Actionscript. We send it "soundFile" as
an argument because that's the name of our externally linked sound file library member. Last, the setVolume method
initially sets the volume of mySound to volPercent * 2, or 100.
There is no maximum to the value you can use with setVolume, but I have found that 0 - 200 is a good range, and
that's the reason behind always multiplying by 2, to get a number in the 0 - 200 range.
8. With the main block of code out of the way we can start attaching code to the buttons. Select the Play
button on the stage and add the following code to the Object Actions panel:
on (release){
mySound.stop();
mySound.start(0, 10000);
}
First, we wrap everything in an on(release) button handler, specifying that the code within should be played
whenever the user releases this button. The stop method may seem a little out of place here, but if you don't use
it you can quickly build up multiple copies of the same file playing on top of each other. This could be an effect
you're after, and if so, take this method out. We call the start method of our object, designating the sound to start
at 0 seconds into the file [the sound offset], and loop 10000 times [there is no infinite setting so
if you want it to loop infinitely like I did just set it high]. Now let's add code to the stop button:
on (release){
mySound.stop();
}
Well, that's about as easy as it gets. The stop method stops the file on release of this button. The volume movieclips
get a little trickier, so pay attention. Here's the up volume movieclip's code:
onClipEvent(mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse)){
var volupisPressed = true
updateAfterEvent();
}
}
The first block is a simple routine to help enable the user to click and hold the mouse button to constantly change
volume. onClipEvent(mouseDown) just tells us that this block will run any time the mouse is depressed. We
use a hitTest method to find out whether the mouse is over our movieclip [mouse coordinates are _root._xmouse
and _root._ymouse at any given time]. If the mouse is over our clip, we set a variable called volupisPressed
to true. Then we run a quick updateAfterEvent(), which keeps our mouse detection from lagging.
Now we use an enterFrame clip event, which basically runs continuously as long as the object its placed
on is on the stage. We wrap this code in a nested if statement to first check and see whether or not our volume
button is pressed [volupPressed == true], and second if the volume is maxed out. If it is [volPercent
= 100], there's no need to add more. On every release of the volume buttons, I decided that I want my volume
to raise or lower 1 percentage points. So that's where the 1's come from. If you want it to raise
and lower 5 instead, just replace the +=1's with +=5's and you're good to go. Just for the
newer scripters out there, if you take a variable and add 1 to it, you can write it as variable = variable +
1, or variable += 1. It's the exact same. So, on each release we do the following. First, scale
the volumeFill movieclip up 1 percent to show our user graphically where the volume is at.
Second, increase our variable volPercent by 1 to keep track of where the volume is at. Third,
update our text field for the user, and fourth, reset the volume of our sound file using our new value. I multiplied
the volpercent by 2 at the end because I found it gave me the best range. We use all these _root statements
before our changes because we are currently inside a movieclip, and to change these variables attached to our main
timeline we need to move up the heirarchy with _root first.
Our third block is a few really simple statements that just reset the volupisPressed to false when the mouse button
is released. That way we have accurate checking of when the mouse is pressed, and when it is released, allowing
the click and hold behavior we want. Now finally the down volume button:
onClipEvent(mouseDown) {
if (this.hitTest(_root._xmouse,_root._ymouse)){
var voldownisPressed = true
updateAfterEvent();
}
}
You can see that the button code is identical for the most part, and it works almost exactly the same as above.
The main difference is that in our if conditional we check to see if volPercent is 0 instead of 100,
because we are checking the lower limit this time. Additionally, we subtract 1from our values to lower the
volume instead of raising it.
Enroll for Announcements | Legal | Privacy
Policy | Contact Us
