previous next

Chapter 6: Producing Animation

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.

Additional Information
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/.

Preparing a Flash with RealSystem G2 Clip

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.

Flash with RealSystem G2 Clips Consist of Shockwave Flash and RealAudio

Tip
Macromedia Flash provides different methods for incorporating sound into an animation. For Flash with RealSystem G2 clips, use the stream synchronization setting.

Note
RealPlayer G2 supports Macromedia Flash 3.0 features with the exception of transparency.

Choosing a Target Bandwidth

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.

Additional Information
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.

Dividing Bandwidth Between Shockwave Flash and RealAudio

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).

Recommended Bandwidth Divisions between RealAudio and Flash at 20Kbps
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

Additional Information
See "Choosing RealAudio Codecs" for a full list of codecs.

Tips for Choosing RealAudio Codecs

Here are some tips for selecting a RealAudio codec:

Adding RealPlayer 5.0 Compatibility

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:

  1. Create a RealAudio SureStream clip that uses RealAudio G2 codecs for one or more bandwidths. When encoding, choose the backwards-compatibility option to create an encoding for RealPlayer 5.0.

    Additional Information
    For more on SureStream and RealPlayer 5.0 compatibility, see "Multiple Encoding in a Single SureStream Clip".

  2. Create two separate encodings of the soundtrack: one that uses RealSystem G2 codecs and one that uses a codec playable by RealPlayer 5.0.

  3. Create one soundtrack using a RealAudio 5.0 codec. This option does not deliver the highest-quality sound to RealPlayer G2 users, however.

    Additional Information
    For information about creating Web page links to these types of presentations, see "Supporting RealPlayer 5.0".

Maximizing Flash Efficiency

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.

Shockwave Flash Sample Bit Rate Requirement

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:

  1. As you create your animation, minimize the overall bit rate requirement of the Shockwave Flash stream by keeping the ratio of file size to clip length as low as possible. This doesn't eliminate spikes, but it helps keep the spikes smaller. The guidelines below explain how to do this.

  2. After you export your animation file, use the Shockwave Flash tuning utility to change the streaming file's bandwidth consumption. You can also use the Flash with RealSystem G2 Bit Rate Calculation Spreadsheet to view frame-by-frame bandwidth needs.

    Additional Information
    "Tuning Shockwave Flash".

Keeping Shockwave Flash Files Small

The following are recommendations for keeping Shockwave Flash file size down as you develop the animation:

Minimizing CPU Usage

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:

Using Interactive Commands

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.

Shockwave and RealPlayer Interactive Commands
Shockwave
Command
RealPlayer
Mapping
Action
Play Play Playback begins or resumes.
Stop Pause Clip pauses until action is performed or the Play button is pressed.
Goto Seek and Pause RealPlayer seeks to the designated frame, buffers the clip preroll, and pauses.
Goto and Play Seek and Play RealPlayer seeks to the designated frame, buffers the clip preroll, and begins playback.
Get URL (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.

Tip
Because seeking requires buffering, do not use Goto commands to advance from one scene to the next. When you export your animation to Shockwave Flash, scenes are concatenated so that the animation flows from one scene to the next.

Additional Information
A SMIL file can define clickable hyperlinks for the presentation. See "Linking to Other Media".

Creating a Flash with RealSystem G2 Clip

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.

Exporting Shockwave Flash

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.

Converting File Size to Kilobits
Using This Measurement Do This to Get Kilobits
Megabytes Multiply by 8192
Kilobytes Multiply by 8
bytes Divide by 128
bits Divide by 1024

Tip
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.

Tuning Shockwave Flash

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.

Note
These tools are included in the utils directory of this manual.

Exporting Audio

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.

Additional Information
For more on audio production, see Chapter 4. For codec considerations in Flash with RealSystem G2, see "Dividing Bandwidth Between Shockwave Flash and RealAudio".

Delivering the Flash with RealSystem G2 Presentation

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:


<smil>
<body>
<par>
<audio src="rtsp://realserver.company.com:554/media/sound.rm"/>
<animation src="rtsp://realserver.company.com:554/media/cartoon.swf"/>
</par>
</body>
</smil>

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.

Additional Information
For instructions on linking Web pages to clips on RealServer, see "Streaming Clips from RealServer G2".

Supporting RealPlayer 5.0

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:


rtsp://realserver.company.com:554/media/animation.smil
--stop--
pnm://realserver.company.com:7070/media/cartoon.swf+sound.rm

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 "+" operator.

Additional Information
See "Creating a Ram File Manually". To embed the presentation in a Web page, see Chapter 8.

Note
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.


Copyright © 1998 RealNetworks
For information on RealNetworks' technical support, click here.
Comments on this document? Click here.
This file last updated on 12/18/98 at 14:36:32.
previous next