Author: Programming Art | Website: http://www.programmingart.com

Introduction

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.

Data Fields

• Title: Dynamically Controlling Volume via the Sound Object
  
• Description: A sound volume controller utilizing the Sound object.
• Category: Audio
• Classification: Advanced
• Author Name: Programming Art
• Author Email: support@programmingart.com
• Author Website: http://www.programmingart.com
• Version: Flash 5

Included Files:

• soundvolume.fla - the Flash source code.
• mysound.wav - the sample audio file.

I - Setting up the Flash Movie

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

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 button, and a volume down button [Insert > New Symbol]. Since this is a more advanced tutorial I won't go into details of button creation, just create the four simple buttons with whatever states you wish. We will apply code to the buttons 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.

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.

II - Entering Code

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.



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. And on the up volume button:

  on (release){

     if (volPercent != 100){

        volumeFill._yscale += 2;

        volPercent += 2;

        volumeText = volPercent + "%";

        mySound.setVolume(volPercent * 2);

     }

  }

  

We wrap this code in an if statement to check and see whether or not our 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 2 percentage points. So that's where the 2's come from. If you want it to raise and lower 5 instead, just replace the +=2's with +=5's and you're good to go. Just for the newer scripters out there, if you take a variable and add 2 to it, you can write it as variable = variable + 2, or variable += 2. It's the exact same. So, on each release we do the following. First, scale the volumeFill movieclip up 2 percent to show our user graphically where the volume is at. Second, increase our variable volPercent by 2 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. Now finally the down volume button:

  on (release){

     if (volPercent != 0){

        volumeFill._yscale -= 2;

        volPercent -= 2;

        volumeText = volPercent + "%";

        mySound.setVolume(volPercent * 2);

     }

  }

  

You can see that the button code is identical for the most part. 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 2 from our values to lower the volume instead of raising it. If you haven't done so already, check out the files and try it yourself! And come to our site to find more great tutorials by Programming Art!

» Level Advanced

Added: 2002-01-13 Rating: 9 Votes: 111 1 2 3 4 5 6 7 8 9 10 (10 being the highest) Thank you for voting! We have encountered an error. Please try again later. You've already voted.

» Author

We submitted several weeks ago, and are concerned our submission was lost.

» Download

Download the files used in this tutorial.

Download (446 kb)

» Forums

More help? Search our boards for quick answers!