Flash with RealSystem G2 makes it easy to put animation on the World Wide Web. Combining the power of Macromedia Flash with the clarity of RealNetworks' RealAudio, Flash with RealSystem G2 produces visually arresting animations with superb sound. This chapter explains how to create Flash with RealSystem G2 content for different bandwidths. It also provides tips for optimizing Flash with RealSystem G2 clips.
|For exciting examples of streaming animation, visit http://www.realnetworks.com/showcase/animation/. For instructions about using Macromedia Flash, refer to Macromedia documentation. Find more information at http://www.macromedia.com/software/flash/.|
Flash with RealSystem G2 is well-suited for linear presentations that have continuous audio and images synchronized along a timeline, including:
A Flash with RealSystem G2 clip consists of two separate files streamed in parallel: a Shockwave Flash animation file and a RealAudio soundtrack. To create these components, you develop animation in Macromedia Flash 2.0 or 3.0 and synchronize it with an imported sound file, such as a WAV or AIFF file. You then export a Shockwave Flash file that contains the animation, and generate a RealAudio file from the soundtrack. RealServer streams the clip to RealPlayer, ensuring that animation and sound stay synchronized.
|Macromedia Flash provides different methods for incorporating sound into an animation. For Flash with RealSystem G2 clips, use the stream synchronization setting.|
|RealPlayer G2 supports Macromedia Flash 3.0 features with the exception of transparency.|
When you begin to develop your Flash with RealSystem G2 clip, target an audience connection speed and create content with that bandwidth in mind. This helps ensure that both the Shockwave Flash animation and the RealAudio clip stream smoothly. If your target bit rate is 28.8 Kbps, for example, you have approximately 20 Kbps of bandwidth to divide between the RealAudio soundtrack stream and the Shockwave Flash animation stream.
|For an overview of bandwidth considerations, see Chapter 3 .|
The good news is that designing Flash with RealSystem G2 content for a low bandwidth does not diminish the quality of the animation. Flash with RealSystem G2 transmits vector information that the viewer's machine then renders. So unlike bitmap animations, Flash animation depends more on the machine's CPU and graphics capabilities than the amount of data downloaded. A well-designed 28.8 Kbps Flash with RealSystem G2 animation can have the same visual impact as an animation requiring a significantly higher connection speed.
Once you have determined the combined bit rate for Shockwave Flash and RealAudio, you need to divide the rate between the Shockwave Flash and RealAudio components. Your animation usually determines this division because it typically consumes more bandwidth. Although you may not have a final bandwidth figure until you create, export, and tune your animation, you should start with a target estimate. The table below lists possible RealAudio and Shockwave Flash bit rate combinations for a 28.8 Kbps connection (20 Kbps usable).
|Presentation Type||RealAudio||Shockwave Flash|
|Emphasis on animation with good quality spoken soundtrack for RealPlayer G2 and 5.0||5 Kbps Voice||15 Kbps|
|Emphasis on animation with better quality spoken soundtrack for RealPlayer G2 and 5.0||6.5 Kbps Voice||13.5 Kbps|
|Emphasis on animation with high quality spoken soundtrack for RealPlayer G2 and 5.0||8.5 Kbps Voice||11.5 Kbps|
|Emphasis on animation with good quality music soundtrack for RealPlayer G2 and 5.0||8 Kbps Music||12 Kbps|
|Emphasis on animation with good quality music soundtrack for RealPlayer G2 only||6 Kbps Music-G2 Mono||14 Kbps|
|Emphasis on animation with higher quality music soundtrack for RealPlayer G2 only||8 Kbps Music-G2 Mono||12 Kbps|
|Emphasis on high quality music soundtrack with animation for RealPlayer G2 only||11 Kbps Music-G2 Mono||9 Kbps|
|See "Choosing RealAudio Codecs" for a full list of codecs.|
Here are some tips for selecting a RealAudio codec:
|For the basics of SureStream, read "Using SureStream Clips for Multiple Bandwidths".|
RealPlayer G2 and RealPlayer 5.0 can both play Flash with RealSystem G2 presentations, but RealPlayer 5.0 does not support all the options available with RealPlayer G2:
To support RealPlayer 5.0 along with RealPlayer G2, avoid using Flash 3.0 features and use any of the following methods when encoding the soundtrack as RealAudio:
|For more on SureStream and RealPlayer 5.0 compatibility, see "Multiple Encoding in a Single SureStream Clip".|
|For information about creating Web page links to these types of presentations, see "Supporting RealPlayer 5.0".|
Unlike RealAudio, Shockwave Flash does not consume bandwidth at an even rate. This is the nature of vector-based animation. At the start of a scene, for example, groups and symbols for the scene are streamed. This requires a lot of data transfer. After that, only "lightweight" instructions for manipulating groups and symbols are needed. This process results in bandwidth consumption like that shown in the following figure.
This graph shows a sample Shockwave Flash clip that targets a bandwidth of 12 Kbps. At five and ten seconds into the clip, the bandwidth requirement spikes because the clip requires more than 12 Kb of data. These spikes typically correspond to scene changes or the introduction of new objects in a key frame. RealPlayer responds by buffering the data as it comes in, potentially delaying playback until all necessary data has arrived.
As you create your Macromedia Flash animation, you need to minimize the spikes that may cause RealPlayer to halt the presentation while it buffers data. There are two ways you can do this:
|"Tuning Shockwave Flash".|
The following are recommendations for keeping Shockwave Flash file size down as you develop the animation:
Flash stores a symbol once and can refer to it repeatedly, each reference adding little to the file size. However, it stores a group definition each time the group is used. Using a group three times, for example, stores the same data in the file three times. Using symbols instead of groups can therefore reduce file size significantly.
Simplify the elements drawn in or imported into Macromedia Flash. Under Modify>Curves, use the Smooth and Straighten commands on lines and curves to strip away unneeded point and path information. This reduces the data stored for each element. Use Optimize to optimize the data reduction while maintaining acceptable screen appearance. Because screen resolution is lower than print resolution, you can eliminate minute details without compromising appearance.
Bandwidth is not the only consideration when optimizing files. Macromedia Flash's vector-based animation differs from raster or bitmap animation in that the user's machine must perform complex calculations to display the animation. Operations that require many calculations on top of the normal load may adversely affect playback. The following are ways to reduce Flash with RealSystem G2 CPU requirements:
Tweening interpolates the motion between key frames. Interpolating multiple objects and color effects at the same time will adversely affect playback. Other actions related to tweening that slow down playback are changing large areas of the screen between frames and using gradient fills.
RealPlayer must redraw areas where action occurs, thus consuming CPU cycles. To minimize this, localize tweening to a small portion of the screen so that the entire screen does not have to be redrawn. File size remains the same, but only one part of the screen is redrawn.
Although Flash with RealSystem G2 is best suited for linear presentations, you can add interactivity through the Shockwave commands listed below. Flash with RealSystem G2 maps these commands to RealPlayer functions. At the end of your Flash with RealSystem G2 clip, for example, you might have a graphic that says, "Click here to visit our home page." The Shockwave
Get URL command used with this graphic corresponds to an internal RealPlayer command that displays the URL in the browser window.
||Playback begins or resumes.|
||Clip pauses until action is performed or the Play button is pressed.|
||RealPlayer seeks to the designated frame, buffers the clip preroll, and pauses.|
||RealPlayer seeks to the designated frame, buffers the clip preroll, and begins playback.|
||(internal)||Displays URL in browser window. Because the user has to return to Flash with RealSystem G2 manually, use this only at the end of a clip.|
Because seeking requires buffering, do not use |
|A SMIL file can define clickable hyperlinks for the presentation. See "Linking to Other Media".|
The following sections explain the steps for creating a Flash with RealSystem G2 clip once you finish developing your animation in Macromedia Flash. Refer to the manuals for the tools you use for step-by-step instructions on carrying out each task.
You export your animation to a Shockwave Flash (.swf) file for use with RealSystem. This creates a compressed version of the animation suitable for streaming. When you export the Shockwave Flash file, you disable the audio stream. You later export the soundtrack separately and convert it to RealAudio. Here are tips on exporting Shockwave Flash:
The ratio of Shockwave file size to clip length is a good indication of the overall bandwidth requirement. Convert the file size to Kilobits and divide by the number of seconds in the animation to get the average bandwidth. This number should be below your allowable bit rate for Shockwave Flash. For example, to find the average bandwidth of a 325 Kilobyte file that plays for 3 minutes, multiply 325 by 8 to get 2624 Kilobits. Then divide by 180 seconds to get an average bandwidth of 14.6 Kbps.
|Using This Measurement||Do This to Get Kilobits|
|Megabytes||Multiply by 8192|
|Kilobytes||Multiply by 8|
|bytes||Divide by 128|
|bits||Divide by 1024|
|You can also find the average bit rate of a Shockwave Flash file by dropping it onto RealPlayer G2 and observing the RealPlayer status bar.|
Keep in mind that even a clip with an acceptable average bandwidth may stall during playback because it contains bandwidth spikes. The spreadsheet indicates where spikes occur.
After you generate a Shockwave Flash file and create the movie report, you must use the Flash with RealSystem G2 Bandwidth Tuner to view bandwidth statistics and adjust the file's streaming bit rate. You can also use the Flash with RealSystem G2 Bit Rate Calculation Spreadsheet to examine the file's bandwidth consumption frame-by-frame. You will need Microsoft Word and Microsoft Excel to use the spreadsheet. See the tuner online help for instructions on using the tuner and spreadsheet.
|These tools are included in the utils directory of this manual.|
After you have created and tuned your Shockwave Flash file, export the movie soundtrack as a Windows AVI or Macintosh QuickTime file, setting 32x21 as the height and width attributes to minimize disk space use. Next, encode the AVI or QuickTime soundtrack in the RealAudio format with a RealNetworks encoding tool, using the file extension .rm.
|For more on audio production, see Chapter 4. For codec considerations in Flash with RealSystem G2, see "Dividing Bandwidth Between Shockwave Flash and RealAudio".|
When your Shockwave Flash and RealAudio files are complete, you create a SMIL file that lists the URLs for these files. Chapter 7 explains how to create the SMIL file. In its simplest form, the SMIL file specifies that the two files play in parallel:
You can also use the SMIL file to define clickable hypertext links, create timing offsets between the clips, or add presentation information such as title, author, and copyright. Next, move the Shockwave Flash, RealAudio, and SMIL files to RealServer and link your Web page to the SMIL file.
|For instructions on linking Web pages to clips on RealServer, see "Streaming Clips from RealServer G2".|
As described in "Adding RealPlayer 5.0 Compatibility", you can support RealPlayer 5.0 in a number of ways. The simplest means of delivering a 5.0-compatible presentation through a single URL is to create a SMIL file for RealPlayer G2 as described above. Then create a Ram file (extension .ram) that looks like this:
You next link your Web page to this Ram file with a standard HTTP hypertext link. Users with RealServer G2 receive the SMIL-based presentation. Those with RealPlayer 5.0 receive the presentation defined below the
--stop-- marker. Note that this second link uses the older PNA protocol and associates the animation and soundtrack through the "
|See "Creating a Ram File Manually". To embed the presentation in a Web page, see Chapter 8.|
|In the examples above, the same soundtrack (sound.rm) is used for both RealPlayer 5.0 and RealPlayer G2. This works if the soundtrack uses a RealAudio 5.0 codec or is a RealAudio G2 SureStream clip with the 5.0 backwards- compatibility option.|