|Table of Contents|
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:
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:
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
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:
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 (1/12th 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:
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!
|Table of Contents|