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

Sadly, sound within Flash projects is often included as an afterthought—if it's included at all. Hurried, last-minute sound additions typically amount to no more than a clichéd loop that serves little purpose. If you ever find yourself in the position of importing a sound clip into a project without a clear idea of why you're doing it, stop and repeat the Flash designers' mantra: bad use of sound can destroy the entire user experience.

In this age of digital media, sound can and should be a part of the online environment. A little sound can go a long way toward enhancing and solidifying the user experience. Even a simple "click" sound can provide valuable auditory feedback, provided it's used in the right manner. But beware overloading your projects with sound "just for the sake of it." The use of sound, then, is a question of balance.

Note that you can download this chapter in pdf format if you'd prefer to read this content offline.

When Should You Use Sound in Your Projects?

This is one of those golden questions, and the answer depends on the type of project you're developing . Some productions don't require any sound when viewed in isolation; yet, when incorporated into a larger project, they call for some degree of aural enhancement. If a project is heavily related to sound, then it should definitely involve an appropriate variety of audio clips.

Always consider your work from the perspective of users: will the addition of sound increase their enjoyment of the project? Including short or long musical loops, sound bytes, or a narrative can greatly increase the appeal of an interface, but may also detract from other content and become extremely annoying after just a short while. Consider the following examples of possible Flash projects and think about sound might benefit them. Your choice could include sound effects, musical loops, narratives, or, of course, nothing at all.

• Looping animation
• Single level menu system
• Multilevel menu system
• Multi-paged Flash site
• Flash form
• Streaming video content

Quickly run through these examples in your head. It's not difficult to see what will and won't work for different projects. Over time, you'll become increasingly adept at making decisions about when and how to add sound to your projects.

Selecting Sound Clips

One of the major benefits of digital sound is its flexibility. Audio processing software such as Steinberg Wavelab makes it easy to edit, modify, loop, and add effects to sounds. You can take a ten-second section from one audio loop, paste it into another, or paste it across multiple tracks, with no more difficulty than editing a Word document. The advanced sound processing tools that are now available, combined with a microphone and your own imagination, allow you to create a huge array of audio clips. If you're pushed for time or need extra inspiration, there are many online resources from which you can download free clips or purchase collections of clips for use in your projects.

The application of sound to your projects should not be taken lightly. You need to pay attention to a number of factors if the effects are to be successful—most notably, timing, volume, and composition. Remember, you're seeking to enhance your visual messages rather than work against them, so your choice of sound is important. A manic techno loop attached to the submit button of a Flash form may well provoke visitors to close the browser. On the other hand, if you give users subtle feedback that the form has been submitted, they'll likely gain confidence in the interface and continue to interact.

As you can see, it's all about context. The appropriate integration of sound into a project can support the efficient communication of the message.

Importing and Exporting Sound Clips

Flash MX 2004 offers a built-in sound editor, which is fine for simple editing tasks. However, this tool is too basic for most needs: it doesn't allow you to add effects to your sound selections, for example. I definitely advocate the use of a more powerful sound processor, especially when it comes to trimming, duplicating, and looping clips.

You can import a sound clip from the File menu just as you would any other media type. Imported sounds can be applied directly to buttons and button states (Up, Down, Over, etc.), incorporated via streaming external files, included through ActionScripted control in the Action Panel, or added via other means.

The addition of a "click" sound to a button's Down state to simulate a real world mouse click is an example of a basic sound effect. It doesn't require ActionScript knowledge, but it certainly can be created via script. In the following example, the necessary code is applied to a button called myButton, which references a sound clip that has a linkage identifier of mySound in the Library Panel:

myButton.onPress = function ()
{
 newSound = new Sound ();
 newSound.attachSound ("mySound");
 newSound.start ();
}

For more advanced effects, including streaming and abstract playback mechanisms, we need to look under the hood of the ActionScript Sound class to see how we can control sound from within the interface and code conditions. It's an exciting arena in which you can create interesting and dramatic effects quickly, with just a little imagination.

As this book is concentrated on the creation of effects via ActionScript, we won't cover the integration of sound effects into buttons and frames on the timeline. For examples of this, refer to the Flash MX 2004 documentation.

Let's start with an interesting volume control that's linked to an animation.

Dynamic Volume Control

In the following demonstration, we scale the vertical height of a movie clip dynamically, tying the volume of a sound associated with the clip to its height. It's an important example, as it forms the basis for many of the effects you'll create in future.

To edit a completed version of the effect, locate volcontrol.fla in the code archive.
Setting the Scene

1. Create a new Flash document that's 500 pixels wide and 400 pixels high. Set the frame rate to 24 fps (Modify > Document…).
2. Rename the default layer Actions, and create two new folders in the Library Panel: Movie Clips and Sound.
3. Create a new movie clip symbol in the Movie Clips folder with some arbitrary content. The example in the code archive includes a static text area in which the text "sound effect" appears.
4. Drag an instance of the movie clip to the stage and name it clipper.
5. Select File > Import to Library… and either select reverb.mp3 from the code archive, or import another sound file of your choice. Place it in the Sound folder.

The file used here is a short, three-second clip of medium quality chosen primarily because it's a small file.

6. Select the sound clip from the Library Panel, right-click and select Linkage…. Check the Export for ActionScript checkbox and enter reverb as the identifier.

Having added the element we're going to animate and linked the sound clip for ActionScript export, we can now add the control code.

Adding the ActionScript

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

Example 5.1. volcontrol.fla Actions : 1 (excerpt)

MovieClip.prototype.WaveFade = function (minValue, maxValue,
   period)
{
 this.period = period;
 this.minValue = minValue;
 this.maxValue = maxValue;
 this.count = 0;
 this.onEnterFrame = function ()
 {
   var value = (1 + Math.cos (this.count++ * 2 * Math.PI /
       this.period)) / 2;
   this._yscale = this.minValue + value *
       Math.abs (this.maxValue - this.minValue);
 };
};
clipper.WaveFade (20, 100, 48);

Here, we extend the movie clip class with a new method called WaveFade, which scales the clip up and down vertically in a smooth, regular pattern. The method is relatively straightforward, with the exception that careful use of the cosine function is required to produce the values that control the scaling.

The method takes three parameters: minValue, the minimum scale for the clip (as a percentage); maxValue, the maximum scale for the clip; and period, the number of frames in one oscillation (from the maximum scale to the minimum and back again).

The value variable is assigned a value using the cosine function. We add one and then divide the result by two to get values oscillating between zero and one. (Cosine oscillates between one and minus one.) We then multiply that by the difference between the maximum and minimum scaling values to determine the vertical scaling of the clip for each frame.

8. Save and preview your work.

Notice that the _yscale of the movie clip oscillates smoothly from its full height down to 20% and then back up again. Now that we have the animation in place, we can add the sound clip:

9. Add the lines shown in bold to the existing code in the Actions Panel:

Example 5.2. volcontrol.fla Actions : 1

MovieClip.prototype.WaveFade = function (minValue, maxValue,
   period)
{
 this.period = period;
 this.minValue = minValue;
 this.maxValue = maxValue;
 this.count = 0;
 this.reverb = new Sound ();
 this.reverb.attachSound ("reverb");
 this.reverb.start (0, 999);
 this.onEnterFrame = function ()
 {
   var value = (1 + Math.cos (this.count++ * 2 * Math.PI /
       this.period)) / 2;
   this._yscale = this.minValue + value *
       Math.abs (this.maxValue - this.minValue);
   this.reverb.setVolume (this.minValue + value *
       Math.abs (this.maxValue - this.minValue));
 };
};
clipper.WaveFade (20, 100, 48);

We start by creating a new Sound object and attaching the sound from the Library Panel. We start the clip at the beginning (0), and set it to loop 999 times.

Meanwhile, within the onEnterFrame event handler, we set the percentage volume of the sound clip using the same calculation we employed for its _yscale:

this.reverb.setVolume (this.minValue + value *
       Math.abs (this.maxValue - this.minValue));

This is the same code we used to control the clip's _yscale; in theory, we could replace it with the following:

this.reverb.setVolume(this._yscale);

However, we avoid using this code as it's less readable. When you revisit your code at a later date, you might easily become confused if you saw sound properties linked to movie clip properties.

10. Save and preview your work.

Notice that, as the scale of the clip decreases, so does the volume of the sound. As the scale increases, so does the volume. The addition of scripted sound has enhanced this simple effect, which strengthens the message and creates a more powerful experience.