GDT 260 Animation for the Web: Winter 2003
Notes & Handouts March 13
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
Loading Multimedia on Demand
By storing multimedia and other content in external files, initial download time can be reduced, and the user given a choice whether to download particular content or not. External content can be loaded into levels of a movie, or into a movieclip on the stage.
- .swf’s
- .jpg’s
- video
- .mp3’s
.SWF’s
- To load into a movieclip:
loadMovieNum("path_to_file.swf", levelNumber); - To load into a level:
targetClip.loadMovieNum("path_to_file.swf");
Video and JPEG’s
targetClip.loadMovie("path_to_file");
MP3’s
target = new Sound();
target.loadSound("path_to_sound.mp3", true);
target.start();
Components
Components are generic prebuilt elements that can be modified to work in specific situations. Flash provides a set of interface elements stored in the Components panel.
- Modify components by selecting instance on stage and changing parameters listed in Properties Inspector
- Modify the look by editing graphic elements in Library
