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.
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:
You need the following tools to create and stream RealFlash:
You use Flash to create animations and import sound, synchronizing the two to a single timeline. This chapter provides tips for optimizing streaming animations, but you need to refer to the Flash documentation from Macromedia for information about using Flash.
You should use professional quality hardware and software to capture and process the sound file encoded in the RealAudio format.
![]() |
Additional Information |
For more on audio production, see Chapter 3. |
To encode your sound file as RealAudio, use a RealNetworks tool available from http://www.real.com.
This kit contains the RealFlash Bit Rate Calculation Spreadsheet and the RealFlash Bandwidth Tuner. These tools help you create and optimize your presentation. You will need Microsoft Word and Microsoft Excel to use the spreadsheet.
RealServer is required to deliver your RealFlash presentation. Web users view your presentation through RealPlayer. Free RealPlayer downloads are available from RealNetworks at http://www.real.com.
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
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.
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.
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. |
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:
The following are recommendations for keeping Flash file size down as you develop the animation:
Excessive key frame changes increase bandwidth consumption. Minimize the number of key frames and simplify the objects within key frames.
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 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.
When exporting .fla files to .swf files, set the JPEG quality to no greater than 50, possibly as low as 30.
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 a frame rate of 7 fps provides acceptably smooth motion without overburdening most processors.
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.
The CPU 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 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.
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.
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.
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.
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 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.
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. |
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:
![]() |
Additional Information |
See "Choosing a RealAudio Codec" for a list of Codecs. |
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>
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