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