Random Track Overlay Effect

This effect is based on the previous "headless" example, but builds on it quite extensively, utilizing the CheckBox component, custom event handlers, and providing users with the ability to switch tracks on or off. The user interface is shown in Figure 5.2.

Figure 5.2. This random track overlay effect builds on the previous example.

CheckBox Incompatibilities

While developing this effect, which uses the CheckBox component, I was perplexed to find that the code I had in place for Flash MX didn't work with Flash MX 2004. I investigated this through the Reference Panel and found that there is no getValue method for the Flash MX 2004 version of the CheckBox component. Additionally, the CheckBox no longer allows for a change event handler.

An engineer friend at Macromedia told me that these features hadn't just been deprecated?they had been removed completely!

The code and steps that follow are for Flash MX, while the changes for the 2004 version are provided as asides. The example provided in the code archive was developed using the Flash MX version of the component.

To modify this effect, locate random-gui.fla in the code archive.

Setting the Scene

1. Create a new Flash document that's 550 pixels wide and 100 pixels high. Modify the frame rate to 24 fps (Modify > Document?).
2. Rename Layer1 as Actions and create beneath it three layers named CheckBoxes, Elements, and Background.
3. Select File > Import to Library? and select the following MP3 files in the code archive: Background1.mp3, Background2.mp3, Background3.mp3, Background4.mp3, Background5.mp3, Drum1.mp3, Drum2.mp3, Drum3.mp3, Drum4.mp3, Drum5.mp3, Guitar1.mp3, Guitar2.mp3, Guitar3.mp3, Guitar4.mp3, Guitar5.mp3, Overlay1.mp3, Overlay2.mp3, Overlay3.mp3, Overlay4.mp3, and Overlay5.mp3.
4. Select each of the sound clips within the Library Panel, then right-click and select Linkage?. Check the Export for ActionScript checkbox, accept the provided unique identifier (remove the .mp3 extension if you're using Flash MX 20004), and click OK.
5. From the Components Panel (Window > Development Panels > Components), select Flash UI Components (or just UI Components in Flash MX 2004) and drag four instances of the CheckBox component onto the CheckBoxes layer of the stage. Arrange them from left to right using the Align Panel to set their spacing if necessary (Window > Design Panels > Align).
6. Select each CheckBox component on the stage in turn, from left to right, and apply the instance name and parameters shown in Figure 5.3.








Figure 5.3. The properties for the four CheckBox components are displayed in Flash.

No Change Handler in Flash MX 2004
The Change Handler parameter for each CheckBox is especially important here, as it will be used to mute a track when the corresponding checkbox is unchecked. This parameter doesn't exist in Flash MX 2004, so we'll add some ActionScript later to handle these events in that version.

7. Select the first frame of the Elements layer and insert into it a 270x4 pixel rectangle. Convert this to a movie clip symbol named Progress, and name the instance progress. This will act as a quick progress bar, indicating the progress of the composition as it plays.
8. Select the first frame of the Background layer and create a frame around the controls. If you're stuck for inspiration, look at Figure 5.2. Once you're happy with the frame, lock this layer.

Now, let's add the code to make the effect work.