Chapter 6: Producing Animation

RealFlash makes it easy to put animation on the World Wide Web. Combining the power of Macromedia Flash with the clarity of RealNetworks' RealAudio, RealFlash produces visually arresting animations with superb sound. This chapter explains how to create RealFlash content for different bandwidths. It also provides tips for optimizing RealFlash 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 RealFlash Clip

RealFlash is well-suited for linear presentations that have continuous audio and images synchronized along a timeline, including:

• full-length, television-like cartoons for entertainment and education,

• Internet or intranet demonstrations, training courses, and product overviews,

• product advertisements,

• movie trailers,

• and Karaoke.

A RealFlash 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 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.

RealFlash Clips Consist of Shockwave Flash and RealAudio

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

	Note
	RealPlayer G2 supports Macromedia Flash 2.0 features. It does not support most features introduced in Flash 3.0, such as alpha channels and transparency. Morphing ("shape tweening") is supported but should be used sparingly to keep the streaming file size low.

Choosing a Target Bandwidth

When you begin to develop your RealFlash 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 Realflash content for a low bandwidth does not diminish the quality of the animation. RealFlash 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 RealFlash 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).

	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:

• 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 Shockwave Flash.

• If sound quality takes precedence, start by selecting the RealAudio codec that supplies high-quality audio while leaving enough bandwidth for acceptable animation.

• When animation is complex, use low bit rate RealAudio codecs targeted for voice. This increases the bandwidth available for complex animation.

• The lowest bit rate for a RealSystem G2 music codec is 6 Kbps. The lowest bit rate for a music codec playable by RealPlayer G2 and RealPlayer 5.0 is 8 Kbps.

• With SureStream technology and the RealSystem G2 codecs, you can encode a single RealAudio file for multiple bandwidths. RealPlayer G2 then selects the bandwidth encoding appropriate to its connection speed.

  	Additional Information
  	For the basics of SureStream, read "Using SureStream Clips for Multiple Bandwidths".

Adding RealPlayer 5.0 Compatibility

RealPlayer G2 and RealPlayer 5.0 can both play RealFlash presentations, but RealPlayer 5.0 does not support all the options available with RealPlayer G2:

• RealFlash for RealPlayer 5.0 supports only Flash 2.0 features.

• RealPlayer 5.0 cannot read SMIL files or play a presentation that includes RealPix or RealText.

• RealPlayer 5.0 cannot play soundtracks encoded with RealAudio G2 codecs.

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 RealFlash 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:

• Reduce key frames.

  Excessive key frame changes increase bandwidth consumption. Minimize the number of key frames and simplify the objects within key frames.

• Use symbols instead of groups.

  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.

• Minimize morphing.

  The Macromedia Flash 3.0 morphing feature ("shape tweening") creates additional key frames and hence increases the file size and streaming bit rate.

• Simplify elements.

  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.

• Adjust JPEG quality when exporting.

  When exporting .fla files to .swf files, set the JPEG quality to no greater than 50, possibly as low as 30.

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 RealFlash CPU requirements:

• Set a frame rate of seven (7) fps for 28.8 Kbps connections. This provides acceptably smooth motion without overburdening most processors.

• Optimize tweening.

  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.

• Decrease the number and size of objects simultaneously moving on screen.

  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.

Using Interactive Commands

Although RealFlash is best suited for linear presentations, you can add interactivity through the Shockwave commands listed below. RealFlash maps these commands to RealPlayer functions. At the end of your RealFlash 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.

	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 RealFlash Clip

The following sections explain the steps for creating a RealFlash 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 2.0 file (.swf) 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:

• Set JPEG quality between 30 and 50. This helps to keep the file size down.

• Click the Generate Size Report checkbox. This creates a movie report you can use with the tuning spreadsheet. RealNetworks recommends that you use the movie report and spreadsheet to evaluate your RealFlash clip for bandwidth efficiency.

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.

	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 RealFlash Bandwidth Tuner to view bandwidth statistics and adjust the file's streaming bit rate. You can also use the RealFlash 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 RealSystem G2 Authoring Kit, available through registration at http://www.realnetworks.com/developers/authkit/index.html.

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 RealFlash, see "Dividing Bandwidth Between Shockwave Flash and RealAudio".

Delivering the RealFlash 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-1999 RealNetworks
For information on RealNetworks' technical support, click here.
Comments on this document? Click here.
This file last updated on 06/21/99 at 10:44:34.