Hack 57 Quickly Create UI Sounds

Create button clicks and UI sounds whether you are nonmusical, busy, lazy, or all three.

One of the core assets in any Flash movie is the sounds that your user interface makes when the user interacts with it. Traditional web designers don't worry much about UI sounds, given that the browser has its own default click sounds, but for Flash sites, sound design is more important. Survey the better Flash sites, and you'll see the major role that sound plays in the overall site feel.

Try watching the opening sequence of the Mondo site (http://www.mondo.pl) with and without the spot sound effects to see what a difference a little bit of audio makes to a UI.

Unlike most other core Flash assets though, not many people know how to create UI sounds from scratch. Many designers use the same predictable public domain sound effects, because it can be difficult to produce good ones unless you have professional sound equipment. Sometimes it gets so bad that I know the name of the web site from which the designer downloaded his sounds!

I guess most designers are not musically inclined or would rather use generic sounds from a royalty-free sound source or, worse yet, pick a few from little-known Windows themes. In all fairness, it is probably more a matter of priority than laziness. This hack presents the busy or lazy designer's guide to quick and dirty UI sounds.

One of the best starting points for web resources concerning sound is the site Sonify.org (http://www.sonify.org), which is dedicated to interactive audio for the Web and wireless. It has some up-to-date links for those wishing to find out more about Flash sound.

Unfortunately, many of the commercially available sounds tend to be a little overused; although large selections of sound files are available, the most usable ones are all over the Web already!

Here are two alternatives for the web designer who is not musically savvy enough to know a power chord from a power cord:

• Look in places where most other designers have not.

• Create UI sounds using a few simple filtering tricks.

Abandonware

Abandonware is the name given to software that is past its commercial life span and, although it may be under copyright, is not worth enforcing because the application has no paying customer base. You can find a number of sites that host downloads of abandonware simply by Googling for "abandonware" and looking for the games subsection on abandonware sites. We're talking really old games here—10- to 20-year-old games that run under DOS and don't use hardware acceleration. The cool thing about the abandonware games is that:

• They were developed before MP3 was around, and most of their sound assets are in much simpler formats, such as WAV files. WAV files tend to import very easily into Flash (unlike MP3s, where the variability of the format can often confuse the Flash import filter). Look in the game's sound folder for click sounds and other user interface sounds.

• Although game technology has advanced significantly since the time abandonware games were first published, a button click is still a button click, and the technology for creating sounds hasn't really advanced.

You can probably guess what I'm saying here—if the games are abandonware, then it's pretty likely that the sounds associated with their user interfaces are also dead in the commercial water, and nobody will mind your using them. There is, of course, always the chance that the sounds in some abandonware games were licensed from a still-current library despite the long passage of time. Regardless, copyrights don't lapse just because something isn't commercially viable, and copyright holders have the legal right to control their content. So there is one other option: create your own sounds.

Creating UI Sounds by Time Stretching

Modern desktop computers are capable of serious digital sound processing, but don't be surprised if manipulating a long sound file takes minutes rather than seconds.

Time stretching (or time compression) allows you to change the length of a sound while maintaining either pitch or tempo. It is used in sound recording to edit samples so that they fit in better with the overall composition. In our hack, we will use the fact that it is possible to turn a piece of music lasting several minutes into a sound a few tenths of a second long, while maintaining pitch.

Even simple freeware sound-editing applications can perform some pretty amazing feats. However, I tend to use Adobe Audition (currently Windows-only), formally known as CoolEdit, for general sound editing. Adobe offers a full-featured 30-day tryout version, which is more than long enough to create all the UI sounds you will need. Then you can reuse your own sounds for years.

A free alternative (which contains all of the features you will need) is Audacity (http://audacity.sourceforge.net), an open source product available for Windows, Mac OS 9/X, and Linux/Unix. It is no coincidence that the name "Audacity" is similar to "Audition"—the similarity extends somewhat to the feature set!

I include brief instructions for Audacity and Audition in the following steps. Many other sound editors are out there, of course, but these two are well-suited for editing sound destined for the Web.

To create your own collection of UI sounds, load any piece of music with sections that have little or no percussion. Figure 7-13 shows such a section of the sound waveform selected in Audition.

Figure 7-13. Editing sounds in the Organize window of Adobe Audition

In either Audition or Audacity, find an interesting section of the music (about 10 seconds or longer) and delete the rest of the waveform by selecting it and pressing the Delete key.

If using Audition, in its Organizer window (the lefthand pane in Figure 7-13), select the Effects tab and find Real Time EffectsTime/PitchStretch. (Use Alt-9 to open Audition's Organizer window if you can't see it.)

Double-click on the word Stretch to bring up the Constant Stretch tab of Audition's Stretch window, as shown in Figure 7-14.

Figure 7-14. The Stretch window in Audition

For the Precision option, select High Precision. For the Stretching Mode option, select Time Stretch (Preserves Pitch). For Pitch and Time Settings, check the Choose Appropriate Defaults checkbox. To the right of the Stretch % slider, set Length to, say, 3 seconds. Click OK to perform the stretch.

If using Audacity, find an interesting 10-second section of the music, delete everything else, and select the remaining waveform. Select EffectChange Tempo. The Change Tempo window, shown in Figure 7-15, appears. In the Length (seconds) part of Audacity's Change Tempo window, change the value to about 3 seconds. Click OK to perform the stretch.

Figure 7-15. The Change Tempo window in Audacity

Specifying a length shorter than the original duration effectively time-compresses the sound. Three things happen:

• The sound is no longer recognizable as belonging to the original piece, and enough information is lost via compression to make it impossible to return to the original.

• Because we have preserved pitch, the resulting sound remains as musically pleasing as the original. You have probably guessed why I insisted on a piece of music with no percussion—we are not preserving tempo in the time compression.

• The resulting audio "feels" as if it came from the original but does not sound like it.

You can now select all of (or a section of) the result and recompress it. By the time you have finished, you will end up with something that sounds as if it were created by a musician (because it was—the musician just wasn't you!). And if you repeat the trick with another section of the same original music, you will end up with a different sound but one that matches your earlier one. In this way, you can build up a set of UI sounds that follow the same musical theme.

Although stretching sounds (and the related effect—changing pitch or key, while keeping the sound duration the same) seems like a very specialized thing to do, its usefulness to the Flash sound designer is immense. You may even wonder how you got by with Flash sound without using it!

For example, if you are creating sounds longer than one Flash frame in duration (¹/₁₂th of a second by default) and you want to seamlessly start another sound as soon as the current one ends [Hack #54], stretch or compress the sound length to the nearest multiple of the Flash frame rate. Changing the sound length very slightly doesn't cause a perceptible change in the sound.

Other reasons to stretch/compress sound include:

• You want to combine a number of sounds from different sources. It makes sense for all your UI sounds to be about the same length, and stretching is better than simply chopping the sounds down, which may create obvious discontinuities.

• You want to create cartoon voices for an animation feature. You can either change the pitch and keep the voice duration the same or vice versa. In either case, the resulting sound remains more intelligible and sounds more professional than if you simply speed up the sound.

• You want to change a narration so that it fits the duration of an animation. If you have an animation that lasts for 12 seconds and a narration that lasts for 15 seconds, the temptation is to change the length of the animation, on the assumption that you cannot easily change the narration. Using time stretching to make the narration track fit the animation is much easier once you know about time stretching.

• You have a long animation that is synchronized to a sound track. You have added some new frames, but now the lip-synching is messed up. Simply select parts of the track and stretch them slightly. The animators will wonder how the sound track and animation sync so perfectly together, despite their deleting 5 frames from the beginning of the cartoon and 30 frames from the middle!

• You want to merge several sounds to form a new one, but they sound odd because they are in different keys or otherwise musically dissimilar. Pitch-shifting one sound to match the other fixes the problem. This is also a great help for web designers who fancy themselves as singers but can't hit the high notes.

Final Thoughts

Sound is perhaps the most underused asset when it comes to original content generation in Flash. Generic or commercially available sounds are of a high quality but they are costly and the chances of their matching your site design perfectly are low and the chances that you will find them also used on other sites is high. You wouldn't take that chance with graphics, so why do the same with sound?

Picking a piece of music that matches the mood of your site and then time-compressing sections of it to create a set of UI sounds is a quick and easy way to create unique sounds that enhance your site graphics with matching audio.

If you don't even want to do that, then there are always abandonware sound assets—maybe not totally free of copyright problems, but a much better way to go if the only other alternative is plundering the UI sounds from your OS again!