previous next

Chapter 5: Producing Animation

This chapter tell how to create RealFlash presentations optimized for different bandwidths. It also provides tips for creating streaming Flash content. For exciting examples of streaming animation, visit the RealFlash showcase at http://www.real.com/showcase/animation/index.html.

Benefits of Using RealFlash

RealFlash makes it easy to put animation on the Web. It combines the power of Macromedia Flash with the clarity of RealNetwork's RealAudio. The results are visually arresting animations with superb sound. RealFlash is well-suited for linear presentations that have continuous audio and images synchronized along a timeline, including:

Tools for Creating RealFlash

You need the following tools to create and stream RealFlash:

Preparing a RealFlash Presentation

A RealFlash presentation consists of two separate files streamed together, a Flash animation file and a RealAudio soundtrack. To create these components, you develop animation in Flash 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 presentation to RealPlayer, ensuring that animation and sound stay synchronized.

RealFlash Presentations Consist of Flash and RealAudio


Choosing a Target Bandwidth

When you begin to develop your RealFlash presentation, target an audience connection speed and create content with that bandwidth in mind. This helps ensure that both the Flash animation and the RealAudio file 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 Flash animation stream.

Additional Information
For an overview of bandwidth considerations, see "Targeting Bandwidth".

The good news is that designing Realflash content for low bandwidths does not diminish the quality of your animation. RealFlash transmits vector information that the viewer's machine then renders. So unlike with bitmap animations, the quality of Flash animation depends more on the machine's CPU and graphics capabilities than the amount of data downloaded. A well-designed 28.8 Kbps RealFlash animation can have the same visual impact as an animation requiring a significantly higher connection speed.

Dividing Bandwidth Between Flash and RealAudio

Once you have determined the combined bit rate for Flash and RealAudio, you need to divide the rate between the 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 commonly used RealAudio and Flash bit rate combinations for a 28.8 Kbps connection.

Common Bandwidth Divisions between RealAudio and Flash at 20Kbps
Presentation TypeRealAudioFlash
Emphasis on animation with good quality spoken soundtrack 5 Kbps 15 Kbps
Emphasis on animation with high quality spoken soundtrack 6.5 Kbps 13.5 Kbps
Emphasis on animation with very high quality spoken soundtrack 8.5 Kbps 11.5 Kbps
Emphasis on animation with good quality music soundtrack 8 Kbps 12 Kbps
Emphasis on high quality music soundtrack with animation 12 Kbps 8 Kbps

If sound quality takes precedence, start by selecting the RealAudio Codec that supplies high quality audio while leaving enough bandwidth for good quality animation. Because RealAudio bandwidth consumption is flat, a soundtrack using an 8.5 Kbps Codec, for example, will consistently consume 8.5 Kbps of bandwidth. The remainder of the combined bandwidth is available for Flash.

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

Maximizing Flash Efficiency

Unlike RealAudio, 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 used in the scene are downloaded. This requires a lot of data transfer. After that, only "lightweight" instructions for manipulating the groups and symbols are needed. This process results in bandwidth consumption like that shown in the following figure.

Flash Sample Bit Rate Requirement


This graph shows a sample Flash presentation consuming an average of 12 Kbps of bandwidth. Around five and ten seconds into the presentation, the bandwidth requirement spikes because the presentation needs 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 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 Flash stream by keeping the ratio of file size to presentation 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 RealFlash Bit Rate Calculation Spreadsheet included with the RealFlash Optimization Kit to view frame-by-frame bandwidth needs. You can then modify the Flash source file or use the tuning utility to change the streaming file's bandwidth consumption.

Keeping Flash Files Small

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

Minimizing CPU Usage

Bandwidth is not the only consideration when optimizing Flash files. 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 the RealFlash CPU requirements:

Using Interactive Commands

Although RealFlash is best suited for linear presentations, you can add interactivity through certain Shockwave commands. RealFlash maps these commands to RealPlayer functions. At the end of your RealFlash presentation, 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 a RealPlayer command that displays the URL in the browser window.

Shockwave and RealPlayer Interactive Commands
Shockwave
Command
RealPlayer
Mapping
Notes
Play Play (none)
Stop Pause Presentation pauses until action is performed or Play button pressed.
Goto Seek RealPlayer seeks to the designated frame and buffers the defined presentation preroll. Because seeking requires buffering, do not use Goto to advance from one scene to the next in a linear presentation.
Get URL (internal) Displays URL in browser window. Because the user has to return to RealFlash manually, use this only at the end of a presentation.

Creating a RealFlash Presentation

The following sections explain the steps for creating a RealFlash presentation. Refer to the manuals for the tools you use for step-by-step instructions on carrying out each task.

Importing an Audio Source

When you create your Flash animation, you import your audio source (WAV or AIFF) and synchronize it with the animation timeline, thereby creating a soundtrack. Flash provides different methods for incorporating sound into an animation. For RealFlash presentations, use the stream synchronization setting.

Exporting Shockwave Flash

You export your Flash 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 presentation 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 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 MeasurementDo 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 and observing the RealPlayer status bar.

Keep in mind that even a presentation with an acceptable average bandwidth may stall during playback because it contains bandwidth spikes. Use the spreadsheet to find out where spikes occur.

Tuning Shockwave Flash

After you generate a Shockwave Flash file and create the movie report, you can use the RealFlash Bit Rate Calculation Spreadsheet to examine the file's bandwidth consumption frame-by-frame. You can also use the RealFlash Bandwidth Tuner to view bandwidth statistics and adjust the file's streaming bit rate.

Additional Information
These tools are part of the RealFlash Optimization Kit available at http://www.real.com. See the tuner online help for instructions on using the spreadsheet and tuner.

Exporting Audio

After you have created and tuned your Shockwave Flash file, you export the Flash soundtrack and convert it to the RealAudio format with a RealNetworks encoding tool. In Flash, you export the movie as a Windows AVI or Macintosh QuickTime file, setting 32x21 as the height and width attributes to minimize disk space usage and file creation time.

After you save your RealFlash audio as an AVI or QuickTime movie, encode it in the RealAudio format with a RealNetworks tool, using the file extension .rm. Choose a Codec that fits your presentation's bandwidth and content requirements. Here are some guidelines for selecting a Codec:

Creating a SMIL File

When your Shockwave Flash and RealAudio files are complete, you create a SMIL file that lists the URLs for these files. Chapter 6 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/sound.rm"/>
<animation src="rtsp://realserver.company.com/cartoon.swf"/>
</par>
</body>
</smil>

Transferring Files to RealServer

When the presentation is ready, you move the Shockwave Flash, RealAudio, and SMIL files to their designated locations on RealServer. You then create a link in your Web page to the SMIL file. For instructions on how to do this, see Chapter 9


Copyright © 1998 RealNetworks
For technical support on RealNetworks products, visit http://service.real.com/.
Comments on this document? Contact techpubs@real.com.
This file last updated on 05/20/98 at 16:51:57.
previous next