Controlling Sound in a Movie

The dart shooter game is a whole lot more interesting if it has sound included in it. Above is a fabulous version of the game made by Michelle Holder, with two sound clips in it: the snoring sound and the background music. We'll look at how to add the two volume sliders to control those sounds. You can either open michellesheepmovie.fla in the class directory, or start with your own movie and add two sound movieclips as described below. In michellesheepmovie.fla, Michelle already created two movieclips with sound in them, greenbean_mc and vegas_mc, so we'll use those.

Creating a movieclip with sound in it

Steps to create a controllable sound movieclip:

1. Import a wav or aif to the library (File, Import, Import to Library)
2. Insert, New Symbol, choose movieclip, name it soundclip. You'll now be inside soundclip, editing it, with one blank keyframe.
3. Drag the wav/aif file from the library onto the stage. You'll see a line in frame 1 of your movieclip, which is the start of the sound.
4. Open the Properties panel and make sure Sync is set to Stream.
5. Click the Edit button to open the Edit sound window.
6. Set the view to frames and scroll all the way to the right to see how many frames the sound lasts at the current frame rate.
7. Extend the timeline of your movieclip out to that frame.

Creating the volume control movieclip

If you look in michellesheepmovie.fla, you'll see that there are two instances of a movieclip with symbol name volumeControl on stage. That movieclip is made up of two smaller movieclips: a bar (instance name bar_mc) with an upper left registration point, and a handle (instance name handle_mc) with an upper middle registration point, over the pointy part of the handle, which will now be its x=0 point. We'll start the movie out with both the snoring and the background music at half volume, so the handle is positioned there for the start of the movie. Two instances of this volumeControl movieclip are placed on stage and given instance names vegascontrol (top) and snorecontrol (bottom).

Creating instances of the Sound class to control the sounds

The Sound class allows volume and panning control of individual sounds in Flash. In the section of our movie where variables are declared, we'll create two instances of the Sound class and associate them with our respective sound movieclips:

var snoresound:Sound = new Sound(greenbean_mc);
var vegassound:Sound = new Sound(vegas_mc);

Whenever you create a Sound instance, you can (and should) specify the timeline (movieclip) it is to control by putting the instance name of that movieclip in parentheses, as shown.

If we also want to set the volume to 50% at the start of the movie (to match the position we've set in the volume control), we can change that initialization code to:

var snoresound:Sound = new Sound(greenbean_mc);
snoresound.setVolume(50);

var vegassound:Sound = new Sound(vegas_mc);
vegassound.setVolume(50);

Setting the sound with the volume control

The only remaining part of our program is to make the volume control handle draggable within the control on press, and set the volume to a new value when it is released. This code, added in the main section (after initializing is done, in the part where the various event handlers for the movie are being defined), will set up the volume control to change the sound when the handle is released:

snorecontrol.handle_mc.onPress = 
vegascontrol.handle_mc.onPress = function() {
   this.startDrag(false, 0, this._y, this._parent.bar_mc._width, this._y);
}
snorecontrol.handle_mc.onRelease = 
snorecontrol.handle_mc.onReleaseOutside = function() {
   this.stopDrag();
   var vol:Number = this._x / this._parent.bar_mc._width * 100;
   snoresound.setVolume(vol);
}

vegascontrol.handle_mc.onRelease = 
vegascontrol.handle_mc.onReleaseOutside =
function() {
   this.stopDrag();
   var vol:Number = this._x / this._parent.bar_mc._width * 100;
   vegassound.setVolume(vol);
}

The only element of the volume control that needs to have event handlers defined is the handle, so that is what we assign the functions to. The onPress function will be the same for both snorecontrol and vegascontrol, so we can assign that to both handles' onPress events at the same time. The onRelease events are assigned separately because one controls one Sound instance (snoresound) and the other controls the other (vegassound). Notice that within the function assigned to onRelease, we have to address bar_mc relative to the object that we're attaching the function to, that is, handle. Because bar_mc is a sibling of handle_mc, we can address it as this._parent.bar_mc (this=handle_mc, this._parent=vegascontrol, and this._parent.bar_mc=vegascontrol.bar_mc).

Making the sound change while the handle is dragging

For more fluid control of the sound, this code, with an onMouseMove function defined within the onPress function, can be used instead of the above to track and change the sound volume as the slider handle is being dragged:

snorecontrol.handle_mc.onPress = function() {
   this.startDrag(false, 0, this._y, this._parent.bar_mc._width, this._y);
   this.onMouseMove = function() {
      snoresound.setVolume(this._x / this._parent.bar_mc._width * 100);
   }
}
vegascontrol.handle_mc.onPress = function() {
   this.startDrag(false, 0, this._y, this._parent.bar_mc._width, this._y);
   this.onMouseMove = function() {
      vegassound.setVolume(this._x / this._parent.bar_mc._width * 100);
   }
}
snorecontrol.handle_mc.onRelease = 
snorecontrol.handle_mc.onReleaseOutside = 
vegascontrol.handle_mc.onRelease = 
vegascontrol.handle_mc.onReleaseOutside =function() {
   this.stopDrag();
   delete this.onMouseMove;
}

Controlling all sound in the movie

To add a sound on/off control that turns all sound in the movie on and off, create a Sound instance that's associated with the main timeline and set its volume to 0 or 100. With a sound control named mute_mc, this code in frame 1 will make it act as a toggle to mute and unmute all sound in the movie (including that in greenbean_mc and vegas_mc in the example above):

var allsound:Sound = new Sound(this);
mute_mc.onRelease = function() {
   if (allsound.getVolume() == 100) {
      allsound.setVolume(0);
   } else {
      allsound.setVolume(100);
   }
};