Programming Art, LLC
   
Products Web Services Free stuff Forums
SEARCH
   
SOFTWARE
100% Satisfaction Guarantee
Credit Cards Accepted
Programming Art's Tutorials

Flash
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.

Get the FREE sound file for this tutorial [.wav format, 269Kb]
Get the FREE Flash file for this tutorial [390Kb]



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:

var volPercent = 50;
volumeText = volPercent + "%";
volumeFill._yscale = 50;


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();
   }
}

onClipEvent(enterFrame){
   if (volupisPressed) {
      if (_root.volPercent != 100){
         _root.volumeFill._yscale += 1;
         _root.volPercent += 1;
         _root.volumeText = _root.volPercent + "%";
         _root.mySound.setVolume(_root.volPercent * 2);
      }
   }
   updateAfterEvent();
}

onClipEvent(mouseUp) {
   volupisPressed = false;
   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();
   }
}

onClipEvent(enterFrame){
   if (voldownisPressed) {
      if (_root.volPercent != 0){
         _root.volumeFill._yscale -= 1;
         _root.volPercent -= 1;
         _root.volumeText = _root.volPercent + "%";
         _root.mySound.setVolume(_root.volPercent * 2);
      }
   }
   updateAfterEvent();
}

onClipEvent(mouseUp) {
   voldownisPressed = false;
   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.


Your Shopping Cart
$
Item(s)
CHECKOUT NOW