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

Random Track Sequencer Effect

This effect is different from others in the book in that it has no interface! There's nothing to see, but plenty to hear. We're aiming to overlay random tracks to create a unique sound—something that's a little different from what a user might normally hear. The composition contains four ten-second loops comprising a random selection from the following categories:

• Background: a selection of five background bed tracks
• Drums: a selection of five drum tracks
• Guitar: a selection of five guitar loops
• Overlay: a selection of different overlays

As the movie loads, a random selection is made from each category. The tracks are then combined to create one of 625 possible soundtracks.

That's enough of the introduction—let's get cracking! To edit this effect, locate random.fla in the code archive.

Setting the Scene

1. Create a new Flash document that's 200 pixels wide and 200 pixels high. Modify the frame rate to 24 fps (Modify > Document…).
2. Rename Layer1 as Actions.
3. Select File > Import > Import to Library… and select the following MP3 files from 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 these sound clips within the Library Panel, then right-click and select Linkage…. Check the Export for ActionScript checkbox, accept the provided identifier (remove the .mp3 extension if you're using Flash MX 2004), and click OK.

That's all the setting up we need to do for this example. As we're not adding an interface or allowing any user interaction, no other elements need to be included, apart from the ActionScript to produce the sound composition.

Adding the ActionScript

5. Select the first frame of the Actions layer and add the following code to the Actions Panel:

Example 5.8. random.fla Actions : 1

function randomBetween (a, b)  
{  
 return Math.min (a, b) + random (Math.abs (a - b) + 1);  
}  
MovieClip.prototype.PlayQueue = function (clip)  
{  
 var orchestra = new Sound (this);  
 orchestra.attachSound (clip);  
 orchestra.start ();  
};  
function PlayClips ()  
{  
 var background = "background" + randomBetween (1, 5);  
 var drums = "drum" + randomBetween (1, 5);  
 var guitar = "guitar" + randomBetween (1, 5);  
 var overlay = "overlay" + randomBetween (1, 5);  
 var clips = new Array (background, drums, guitar, overlay);  
 for (var i = 0; i < clips.length; i++)  
 {  
   var mc = createEmptyMovieClip ("SoundHolder" + i, i);  
   mc.PlayQueue (clips[i]);  
 }  
}  
PlayClips ();

That's a fairly concise piece of code. Preview the movie and skip the code walkthrough, or read on for the nitty-gritty details—the choice is yours!

Let's look at the PlayClips function to see how it all fits together. For each of the tracks, we create a variable (e.g. drums) that we fill with one of the linkage identifiers for the sound clips in the library, using the randomBetween function to generate a random number between one and five. We then combine these variables into an array of sound clips:

var clips = new Array (background, drums, guitar, overlay);

From here, we use a for loop to create an empty movie clip for each element of the array. These clips play the selected sound clips at random. This is accomplished by calling the PlayQueue movie clip method (which we'll examine in a moment) and passing the sound clip linkage identifier as a parameter.

for (var i = 0; i < clips.length; i++)  
 {  
   var mc = createEmptyMovieClip ("SoundHolder" + i, i);  
   mc.PlayQueue (clips[i]);  
 }

We call the PlayQueue method for each of the new movie clips created by the PlayClips function. This embeds a sound clip into each of these movie clips, then plays it.

MovieClip.prototype.PlayQueue = function (clip)  
{  
 var orchestra = new Sound (this);  
 orchestra.attachSound (clip);  
 orchestra.start ();  
};

Because the sound clips are created in quick succession at runtime, the effect is one of a single composite track with a background, plus drum, guitar, and overlay sections.

6. Save and preview your document.

You may notice that every time you play the movie, you get a different composition. Some work very well, while others sound fairly clunky! It's all about experimentation and seeing what's possible.

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.

Adding the ActionScript

9. With the first frame of the Actions layer selected, add the following code to the Actions Panel:

Example 5.9. random-gui.fla Actions : 1 (excerpt)

function randomBetween (a, b)  
{  
 return Math.min (a, b) + random (Math.abs (a - b) + 1);  
}  
function roundNumber (toRound, numDecimals)  
{  
 return Math.round (toRound * Math.pow (10, numDecimals)) /  
     Math.pow (10, numDecimals);  
}  
MovieClip.prototype.PlayQueue = function (clip)  
{  
 this.orchestra = new Sound (this);  
 this.orchestra.attachSound (clip);  
 this.orchestra.start ();  
};  
function PlayClips ()  
{  
 var background = "background" + randomBetween (1, 5);  
 var drums = "drum" + randomBetween (1, 5);  
 var guitar = "guitar" + randomBetween (1, 5);  
 var overlay = "overlay" + randomBetween (1, 5);  
 var clips = new Array (background, drums, guitar, overlay);  
 var mc;  
 for (var i = 0; i < clips.length; i++)  
 {  
   mc = createEmptyMovieClip ("SoundHolder" + i, i);  
   mc.PlayQueue (clips[i]);  
 }  
 mc.onEnterFrame = function ()  
 {  
   _root.progress._xscale = this.orchestra.position /  
       this.orchestra.duration * 100;  
 };  
 mc.orchestra.onSoundComplete = function ()  
 {  
   stopAllSounds ();  
   LoopClips ();  
 };  
}  
function LoopClips ()  
{  
 _root.SoundHolder0.orchestra.start ();  
 _root.SoundHolder1.orchestra.start ();  
 _root.SoundHolder2.orchestra.start ();  
 _root.SoundHolder3.orchestra.start ();  
}  
PlayClips ();

We've used the randomBetween and roundNumber functions previously in this chapter, so there's no need to cover them again.

The PlayQueue method is identical to that used in the previous example, as is the PlayClips function, except for a couple of event handlers we added to the last dynamically generated movie clip.

mc.onEnterFrame = function ()  
 {  
   _root.progress._xscale = this.orchestra.position /  
       this.orchestra.duration * 100;  
 };  
 mc.orchestra.onSoundComplete = function ()  
 {  
   stopAllSounds ();  
   LoopClips ();  
 };

After the sound object is initialized, the sound clip is attached, and the sound clip has started to play, we dynamically track the position of the last sound object that's created using an onEnterFrame event handler attached to the containing movie clip. This event handler controls the width of the progress bar by altering its _xscale property. When the sound finishes, the onSoundComplete event handler will call the stopAllSounds function. Immediately after that, we call LoopClips to restart the four tracks we've produced, creating the effect of an infinite loop.

function LoopClips ()  
{  
 _root.SoundHolder0.orchestra.start ();  
 _root.SoundHolder1.orchestra.start ();  
 _root.SoundHolder2.orchestra.start ();  
 _root.SoundHolder3.orchestra.start ();  
}

So far, so good, right? When the movie is running, we want to dynamically switch the different tracks on or off by clicking the checkboxes on the stage. To this end, each CheckBox has its own event handler that controls the volume of the track. Let's add these now.

10. Add the following code below the existing code in the Actions Panel:

Example 5.10. random-gui.fla Actions : 1 (excerpt)

function backgroundChange (background)  
{  
 if (background.getValue ())  
 {  
   _root.SoundHolder0.Orchestra.setVolume (100);  
 }  
 else  
 {  
   _root.SoundHolder0.Orchestra.setVolume (0);  
 }  
}  
function drumsChange (drums)  
{  
 if (drums.getValue ())  
 {  
   _root.SoundHolder1.Orchestra.setVolume (100);  
 }  
 else  
 {  
   _root.SoundHolder1.Orchestra.setVolume (0);  
 }  
}  
function guitarChange (guitar)  
{  
 if (guitar.getValue ())  
 {  
   _root.SoundHolder2.Orchestra.setVolume (100);  
 }  
 else  
 {  
   _root.SoundHolder2.Orchestra.setVolume (0);  
 }  
}  
function overlayChange (overlay)  
{  
 if (overlay.getValue ())  
 {  
   _root.SoundHolder3.Orchestra.setVolume (100);  
 }  
 else  
 {  
   _root.SoundHolder3.Orchestra.setVolume (0);  
 }  
}

The names of these functions correspond to the Change Handler parameter values we assigned to each of the heckBox components when we created them. All these event handlers work the same way. They check whether the CheckBox is checked using the getValue method, then set the volume of the corresponding sound clip to match. The initial state of each CheckBox is true (checked). So, when the checkbox is clicked, its status switches to false, and the volume is set to 0 for that particular Sound object. Clicking it again changes the status to true and the volume to 100. Using the change handlers in this way, we can drop individual tracks out and bring them back in at will.

11. Save your Flash document and preview it.

You're probably listening to a funky composition right now. Click the checkboxes to drop different tracks out and bring them back in. If you don't like the composition, or it's a little too wild for your tastes, preview the movie again to see what the random sequencer comes up with!

Go to page: 1 2 3 4 5 Next

If you liked this article, share the love:

• Save to Delicious
Print-Friendly Version Email to a Friend Suggest an Article