GDT 260 Animation for the Web: Fall 2003
Notes & Handouts October 20
Sound
Key to sound in Flash: optimization, reuse, and separation from main content.
Getting Sounds
- Create audio yourself
- Download from royalty-free site/ royalty-free CD’s
Rules of thumb for audio
- Start with highest quality you can get—optimize in Flash. CD quality: 44 khz 16 bit.
- Loop soundtrack elements whenever possible
Importing Sounds into Flash
Flash can import many audio formats: AIFF, WAV, MP3, etc.
File > Import, choose "All Sound Formats". Sounds will appear in library once imported
Optimizing Sounds
- Double-click on sound in library to open sound properties window
- From Compression drop-down, choose a format
- Click Test to hear the results
- Look at compression info at bottom of screen to see file size
- Change options for chosen format and test to compare results: lower bitrates yield smaller file size, lower quality
- Choose the compression settings that yield best compromise between quality and file size
Flash Sound Formats
- ADPCM: backwards compatible with Flash 3. Sometimes good for short sounds—worth a try
- MP3: generally best compression/ sound quality. Lossy: discards audio data, like jpeg. Recompressing mp3’s results in increasingly poor sound quality
- RAW: No compression, other than resampling lower. Uncompressed audio sounds great, but HUGE file size
- Speech: Best for voiceovers, which have a much smaller audio range than music
Working with Sound in Flash
To attach sound to timeline: insert keyframe, select it, and choose a sound from the drop-down menu on the sound palette
Sound Options
Effect
From the Effects menu on Sound palette, choose an effect, click “Edit…”. Edit Envelope window opens
Edit Envelope window controls volume/ mix of stereo channels.
- Top is left, bottom, right
- Scale between is time or frame (switch at bottom right)
- Line with white handles shows volume. Top of each window is highest, bottom is silent. White handles can be dragged, to cause the sound to change volume on one side or the other.
- Add up to 8 handles by clicking on line. Handles are added to both top and bottom (left and right) in same spot
Synch
- Event: Flash treats sounds like movie clip—independent of timeline. The start of the sound is synched with the keyframe it appears on, but there’s no guarantee it will end on the keyframe you think it will. Sound is downloaded once and reused
- Stream: Sound is tied to timeline, so it stays synched up, but it can cause movie to pause or to drop frames. Sound streams from internet, not reused. Flash loads about 5 seconds worth, starts playing.
- Start: Like event, but prevents same sound from playing more than once at any given time
- Stop: Stops the sound.
Looping
- 0—sound plays once
- To make a sound repeat essentially forever, choose a very high number, like 999
Flash Audio Oddities
- Sounds sometimes don’t play in frame one. Start audio on frame 5
- Event sounds don’t always play long enough or start at the right time. The book suggests adding a one frame streaming sound at frame 4, turning the volume all the way down with the Edit Envelope window.
- Event are only synched to the frame they start on. Don’t loop important Event sounds; add it to a keyframe every time it should repeat OR in publish settings choose “Auto-High” OR lower the frame rate.
- Test the movie on a slow computer to make sure everything keeps up.
Soundtracks
It’s a good idea to keep soundtracks as a separate .fla from your main content. That way, you can use a loadMovie action to load the soundtrack in the background after the content has loaded. That way, it doesn't interefere with someone getting at your information.
To create a soundtrack:
- Create 3 new layers, named “comments,” “kicker,” and the name of the sound
- Add a keyframe in the kicker layer and attach your kicker sound
- Add a blank keyframe right after the kicker
- Insert a keyframe on your sound layer at the frame after the kicker
- Attach the sound to the keyframe
- Extend the frames as long as the waveform shows up in the timeline
- Add a label to a comments layer, so you can tell what's going on
- Make any volume adjustments
- Add a layer for each new sound
Most pop/ rock consists of 4 bar patterns. The samples from the book are 2 bars, so double each one up.
Optimizing
Bandwidth
Bandwidth: amount of data tranferred over time. bits or bytes per second. Bandwidth depends on slowest point in connection.
Users won’t wait longer than 10-15 seconds with nothing interesting happening
Streaming
Streaming: Flash movie starts playing before completely downloaded. Doesn’t speed downloading, just downloads in an intelligent manner. Download what’s needed first before everything else.
When flash movie loads, two things need to be sent and loaded:
- Timeline, and actionscript and non-symbol shapes attached to it. Frames are downloaded in order, as are scenes.
- Library and all symbols. Each symbol must be completely loaded before it can be used in the movie.
Flash begins loading timeline, then loads symbols as they are encountered on the timeline.
During streaming there are 2 important points in the movie: the streamer and the playhead. The streamer marks what has been downloaded and is ready to be played. The playhead is the frame that is playing. The distance between the two is the streaming buffer. If the playhead catches up to the streamer, the movie pauses because the animation is not loaded.
Bandwidth Profiler
View > Bandwidth Profiler when testing movie (Command + Return). Shows the amount of data that needs to be loaded in each frame and how fast it will load under ideal network conditions.
- Red horizontal line—bandwidth limit. Any spikes above this line can’t be loaded in a single frame.
- Bandwidth: how much data can be loaded per frame
- Size: Movie size
- Preload: number of frames needed at beginning of movie to load everything smoothly
- Debug > … allows you to change speed of modem, 14.4, 28.8, 56k, etc.
- Preload value will change based on speed of modem
Show Streaming
View > Show Streaming to see how the movie will stream across the web.
- Green bar showing streamer, which progresses as frames are loaded
- When green bar pauses, more content on one frame than can be loaded in that frame.
- Playhead moves along at 12 frames per second
- If playhead catches up to green bar, movie pauses until additional frames are loaded
- Streaming changes with different modem speeds
Optimizing Files
- Since scenes load in order, organize your scenes in the order in which they will most likely be needed.
- Use and reuse symbols whenever possible. You can change the symbol attributes, and flash only downloads a symbol once.
- Use as few different fonts as possible, or use the generic _sans, _serif, and _typewriter fonts. Avoid complicated fonts. The outlines for each letter used need to be downloaded, which can quickly add up to huge file sizes.
- Optimize your shapes with either the smooth, straighten or optimize commands. Compromise between file size and appearance
- Load components in order that they’re needed. Navigation first, extras last.
- Use a preloader if streaming will not work well. You don’t need to preload everything, just enough to allow streaming to load everything else transparently
Preloaders
A preloader is a scene at the beginning of the movie that entertains the viewer while important symbols load. Most preloaders have a simple animation, or even a simple game (pong). Symbols only load once, so load them at the beginning, and they’ll be reused later.
- Preload symbols by placing them on the preloader timeline, but off the stage, or set their alpha to 0
- Try to break up the symbols across several keyframes. On frame one of the preloader, just have the preloader info. On frame two, load Buttons 1 and 2 and Movie Clip One, frame three, load Movie Clip Two and Graphic 1, etc.
- Make sure something is telling the user what’s going on, and the current status. For example, have text saying “loading interface,” “loading text”, etc.
- Another option is to create a loader bar, simply a rectangle on a separate layer tweened across the frames containing the preloaded symbols. The tween will pause as the symbol on each frame is loaded. Make sure there’s a loader bar background, so users can see how long the the bar will get.
- Yet another option, percentages. Break up your symbols evenly across 10 frames (use the bandwidth profiler to help you figure that out). Then at the first frame put “0%,” at the second frame “10%,” etc.
- ActionScript preloaders are also nice, but beyond our skill level
