The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 5: Sound Effects

Changes for Flash MX 2004

If you're using Flash MX 2004, you'll find that the checkboxes don't work as advertised. That's because the CheckBox component, besides looking better, lacks a Change Handler parameter. As a result, our event handler methods have not been hooked up to the checkboxes. This is a good thing, because these methods use another feature that's missing from the Flash MX 2004 CheckBox component: the getValue method. Let's now make the changes necessary to get the example working in Flash MX 2004.

First, change each of the event handler functions so they check the selected property of the appropriate CheckBox, rather than the getValue method, which no longer exists. For example, adjust this line of the backgroundChange function:

if (background.getValue ())

Replace it with this line:

if (background.selected)

Next, set up the event handler functions so they're called when one of the checkboxes is clicked.

Add the following code below all the other code in the Actions Panel:

var cboxListener = new Object ();    
cboxListener.click = function()    
{    
 backgroundChange (background);    
 drumsChange (drums);    
 guitarChange (guitar);    
 overlayChange (overlay);    
};    
   
background.addEventListener ("click", cboxListener);    
drums.addEventListener ("click", cboxListener);    
guitar.addEventListener ("click", cboxListener);    
overlay.addEventListener ("click", cboxListener);

This creates a new Object with a single method called click, which is set up as an event listener for each of the four CheckBox objects on the stage. When any one of the checkboxes is clicked, the click method is called. In turn, it calls each of our four event handlers to update the volume accordingly.

Watch the file size!
This example contains 20 ten-second clips, weighing in at nearly 3MB in total! This project would be better suited to CD or kiosk deployment than to distribution over the Internet. If the clips were shorter, or if there were fewer of them, it might be possible to distribute the application over the Internet—just be careful with the file size. Don't say I didn't warn you!

Modifications

We can make this effect even more interactive by, for example, directly controlling the properties of the Sound objects. In the following modification, we'll control the volume of the various sound clips with the NumericStepper component, which ships with Flash MX 2004. The interface is shown in Figure 5.4.

Figure 5.4. Add volume control to the dynamic sound clips.

As we'll be adding the Flash MX 2004 NumericStepper component, we'll take advantage of the new CheckBox component that comes with Flash MX 2004, rather than the Flash MX version we used in the previous example.

If you're working with Flash MX, you might as well skip ahead to the next example.

To edit this effect, locate random-volume.fla in the code archive.

Setting the Scene

Building on the previous example, we'll add several pieces of code to accommodate the volume control mechanism, and we'll replace the existing Flash MX CheckBox components with their Flash MX 2004 counterparts. We'll also add the new NumericStepper component to the interface to provide users with volume control.

1. If you're working from the previous example, locate the Flash MX CheckBox components within the CheckBoxes layer, and delete them.
2. Select the first frame of the CheckBoxes layer and drag four instances of the CheckBox component from the UI Components section of the Components Panel, spacing them evenly across the stage. Name these instances, from left to right: backgroundCBox, drumsCBox, guitarCBox, and overlayCBox.
3. For each of the CheckBox instances you just created, change the selected parameter within the Property Inspector to true, so that the checkboxes will be selected by default.
4. Change the label parameter for each of the CheckBox instances. From left to right, they should read: Background, Drums, Guitar, and Overlay.
5. Drag four instances of the NumericStepper component from the UI Components section of the Components Panel into the first frame of the CheckBoxes layer. Align each NumericStepper beneath each of the checkboxes. Name the instances vol1Control, vol2Control, vol3Control, and vol4Control, and set their widths to 50 pixels.
6. For each of the NumericStepper component instances, set the parameters within the Property Inspector as follows:

maximum
100

minimum
0

stepSize
5

value
100

7. Above each of the NumericStepper components, add a static text box containing the text "Volume" to indicate the purpose of the NumericStepper component. The outcome should resemble Figure 5.4.
8. Alter the width and height of the movie and the rounded rectangle frame to accommodate the extra controls we've added.

Now we can add the extra ActionScript needed to accomplish this effect.

Adding the ActionScript

9. Select the first frame of the Actions layer. We'll leave the math and playback functions/methods (randomBetween, roundNumber, PlayQueue, PlayClips, LoopClips) alone, but replace the remaining code (the checkbox event handlers) with the following:

var backgroundOff = false;    
var drumsOff = false;    
var guitarOff = false;    
var overlayOff = false;    
function backgroundChange ()    
{    
 if (backgroundCBox.selected)    
 {    
   backgroundOff = false;    
   vol1Control.enabled = true;    
 }    
 else    
 {    
   backgroundOff = true;    
   vol1Control.enabled = false;    
   _root.SoundHolder0.orchestra.setVolume (0);    
 }    
}    
function drumsChange ()    
{    
 if (drumsCBox.selected)    
 {    
   drumsOff = false;    
   vol2Control.enabled = true;    
 }    
 else    
 {    
   drumsOff = true;    
   vol2Control.enabled = false;    
   _root.SoundHolder1.orchestra.setVolume (0);    
 }    
}    
function guitarChange ()    
{    
 if (guitarCBox.selected)    
 {    
   guitarOff = false;    
   vol3Control.enabled = true;    
 }    
 else    
 {    
   guitarOff = true;    
   vol3Control.enabled = false;    
   _root.SoundHolder2.orchestra.setVolume (0);    
 }    
}    
function overlayChange ()    
{    
 if (overlayCBox.selected)    
 {    
   overlayOff = false;    
   vol4Control.enabled = true;    
 }    
 else    
 {    
   overlayOff = true;    
   vol4Control.enabled = false;    
   _root.SoundHolder3.orchestra.setVolume (0);    
 }    
}    
function setCustomVolume ()    
{    
 if (!backgroundOff)    
 {    
   SoundHolder0.orchestra.setVolume (vol1Control.value);    
 }    
 if (!drumsOff)    
 {    
   SoundHolder1.orchestra.setVolume (vol2Control.value);    
 }    
 if (!guitarOff)    
 {    
   SoundHolder2.orchestra.setVolume (vol3Control.value);    
 }    
 if (!overlayOff)    
 {    
   SoundHolder3.orchestra.setVolume (vol4Control.value);    
 }    
}    
var volumeListener = new Object ();    
volumeListener.change = function ()    
{    
 setCustomVolume ();    
};    
var cboxListener = new Object ();    
cboxListener.click = function ()    
{    
 backgroundChange ();    
 drumsChange ();    
 guitarChange ();    
 overlayChange ();    
 setCustomVolume ();    
};    
vol1Control.addEventListener ("change", volumeListener);    
vol2Control.addEventListener ("change", volumeListener);    
vol3Control.addEventListener ("change", volumeListener);    
vol4Control.addEventListener ("change", volumeListener);    
backgroundCBox.addEventListener ("click", cboxListener);    
drumsCBox.addEventListener ("click", cboxListener);    
guitarCBox.addEventListener ("click", cboxListener);    
overlayCBox.addEventListener ("click", cboxListener);

Once again, we have functions to handle the CheckBox changes (backgroundChange, drumsChange, guitarChange, and overlayChange). They all look fairly similar.

function backgroundChange ()    
{    
 if (backgroundCBox.selected)    
 {    
   backgroundOff = false;    
   vol1Control.enabled = true;    
 }    
 else    
 {    
   backgroundOff = true;    
   vol1Control.enabled = false;    
   _root.SoundHolder0.orchestra.setVolume (0);    
 }    
}

These functions detect the current status of the relevant CheckBox by analyzing its selected property. If the CheckBox is selected, we set a variable to false (in this case, the variable is backgroundOff) to indicate that the corresponding clip is not switched off. These four variables are set to false to begin with, since all four sound clips are switched on at the start of the movie. We also enable the associated volume control NumericStepper (vol1Control).

If the CheckBox is not selected, we set the variable to true and disable the corresponding NumericStepper component, indicating that the sound clip is switched off. We also set the volume of the related sound clip to zero. This switches the clip off, but allows it to keep playing silently, maintaining its position in case we decide to switch it back on later.

The setCustomVolume function sets the volume of each clip to the value specified by its associated NumericStepper control, unless the flag variable indicates that it's currently switched off.

function setCustomVolume ()    
{    
 if (!backgroundOff)    
 {    
   SoundHolder0.orchestra.setVolume (vol1Control.value);    
 }    
 if (!drumsOff)    
 {    
   SoundHolder1.orchestra.setVolume (vol2Control.value);    
 }    
 if (!guitarOff)    
 {    
   SoundHolder2.orchestra.setVolume (vol3Control.value);    
 }    
 if (!overlayOff)    
 {    
   SoundHolder3.orchestra.setVolume (vol4Control.value);    
 }    
}

All that's left is to ensure these functions are called at the appropriate times. A new listener Object called volumeListener offers a method called change that calls the setCustomVolume function.

var volumeListener = new Object ();    
volumeListener.change = function ()    
{    
 setCustomVolume ();    
};

By calling the addEventListener method from each of the NumericStepper components, we have this object handle changes to the volume of our clips:

vol1Control.addEventListener ("change", volumeListener);    
vol2Control.addEventListener ("change", volumeListener);    
vol3Control.addEventListener ("change", volumeListener);    
vol4Control.addEventListener ("change", volumeListener);

If any of the NumericStepper component values change, the setCustomVolume function is called to handle it.

We've also set up an event listener in a similar manner for the CheckBox components:

cboxListener = new Object ();    
cboxListener.click = function ()    
{    
 backgroundChange ();    
 drumsChange ();    
 guitarChange ();    
 overlayChange ();    
 setCustomVolume ();    
};    
…    
backgroundCBox.addEventListener ("click", cboxListener);    
drumsCBox.addEventListener ("click", cboxListener);    
guitarCBox.addEventListener ("click", cboxListener);    
overlayCBox.addEventListener ("click", cboxListener);

When any one of the checkboxes is clicked, the event handler calls the four functions we defined earlier (switching on or off the correct sound clip) before calling setCustomVolume to correctly set the volume of any clip that has just been switched on.

10. Save your document and export the SWF file to an appropriate location.

Don't forget ActionScript 2.0
Components distributed with Flash MX 2004 work internally using features of ActionScript 2.0. If you try to publish a movie that contains such components with Publish settings configured for ActionScript 1.0, the components will not work (they'll look like white rectangles with black borders).

New movies created in Flash MX 2004 default to ActionScript 2.0, so you're okay there. But, if you start from the finished version of the previous example provided in the code archive, you'll need to change the ActionScript version setting for the file. Simply click the background of the movie, then click the Settings… button in the Property Inspector. You can adjust the ActionScript version setting on the Flash tab.

Use the checkboxes to switch on and off some of the tracks; notice how they disable and enable the volume controls we've added. Experiment with the volume controls to set a nice balance between the tracks, and see what masterpieces you can come up with!

You can build on this example to modify any number of sound object properties. Spend a little time with it and see what you can achieve.