previous next

Chapter 5: Flash Animation

Using Macromedia Flash, you can stream animations on the World Wide Web. Delivered by Helix Server, Flash clips can create visually arresting animations that play in RealPlayer. This chapter provides guidelines for creating and optimizing Flash clips that stream to RealPlayer. For instructions on developing Flash animation, refer to the Flash user's guide.

For More Information: Learn more about Flash from Macromedia's Web site at http://www.macromedia.com/software/flash.

Understanding Flash

Flash is well-suited for linear presentations that have a continuous audio track and animated images synchronized along a timeline. Such presentations could include:

With Flash commands, you can build interactive icons and forms for:

This section explains how Flash works with RealPlayer. This knowledge will help you produce high-quality streaming animation.

Software Versions for Flash

Streaming Flash version 3 or 4 to RealPlayer requires RealSystem Server 8 or later. Earlier versions of RealSystem Server stream only Flash 2. RealPlayer 8 or later is required to play Flash 3 or 4 clips. Flash clips that embed sound effects require RealOne Player or later. RealPlayer G2 or 7 will autoupdate to the latest RealPlayer release when it encounters a Flash 3 or 4 clip.

RealPlayer does not support the Flash 5 or Flash MX Player format. You can develop your animation with Flash 5, or a later version of that program, but your exported Flash Player clip must be in the Flash 2, 3, or 4 format. Note that the Flash 5 program can automatically export and tune your clips in the Flash 4 format for streaming to RealPlayer.

Flash in the Three-Pane Environment

This chapter describes techniques for creating streaming Flash presentations that play in RealPlayer's media playback pane. RealPlayer includes support for Flash animation by default, so any viewer with RealPlayer will be able to view your Flash animation without downloading a plug-in, as long as the animation streams to the media playback pane.

Flash animation clips can also display within an HTML page displayed within the media browser or related info pane. In those cases, the Flash animation is rendered by the Flash plug-in for the browser application used by RealPlayer (Internet Explorer 4 or later for RealPlayer on Windows). Playing an animation in a RealPlayer HTML pane therefore requires a viewer to download and install the Flash browser plug-in if it's missing.

For More Information: For more on the three-pane environment, see "Step 2: Learn the RealPlayer 10 Interface".

Flash Bandwidth Characteristics

As with any streaming clip, you develop a Flash clip with a target audience bandwidth in mind. The table "Maximum Streaming Rates" lists the highest rate at which your Flash clip should stream for various network connection speeds. Keep in mind, too, that if your Flash clip streams along with other clips, the combined streaming speed of all the clips should not exceed the maximum speed for the target audience. This helps ensure that your presentation does not rebuffer frequently.

Because most Internet users have 28.8 or 56 Kbps modems, RealNetworks recommends that you target dial-up modem audiences. Fortunately, Flash clips streamed over a 28.8 Kbps modems can have a visual impact comparable to that of a video streaming at a significantly higher bit rate. This is because Flash clips transmit vector information rendered by the viewers' computers. Hence, the quality of Flash animation depends more on a computer's CPU and graphics capabilities than on the amount of streamed data.

Because it is vector-based, Flash does not consume bandwidth evenly. When a scene starts, for example, its groups and symbols are streamed, requiring a lot of data transfer. After that, only lightweight instructions for manipulating groups and symbols are needed. This following figure shows a Flash clip that targets a streaming speed of 12 Kbps. At 2 and 7 seconds into the clip's timeline, bandwidth use spikes because the clip needs more than 12 Kilobits of data to change scenes or to introduce new objects in a key frame.

Bandwidth Use in an Untuned Flash Clip

Bandwidth Use in an Untuned Flash Clip

If it encounters spikes, RealPlayer buffers the data, delaying playback until all of the necessary data has arrived. For your clip to stream well, you must eliminate spikes by tuning the finished clip. Tuning the clip also sets the clip's streaming bit rate and preroll. The Flash 5 program can export and tune a clip in the Flash 4 format automatically. Or, you can tune an exported clip manually with the Flash tuner. The tuner is included in the utilities folder of the zipped HTML version of this manual.

Bandwidth Use in a Tuned Flash Clip

Bandwidth Use in a Tuned Flash Clip

For More Information: See "How to Download This Guide to Your Computer" for instructions on getting a local copy of this guide.

Tip: You will not know how well your clip streams until you tune it. Because you may need to revise the animation to make the clip stream well for your chosen audience, export and tune the animation frequently as you develop it.

Flash Clip Size

Tuning your Flash clip guarantees that it streams at your chosen bit rate. If your animation is too complex, however, tuning it to a low bit rate may cause an unacceptably high preroll in RealPlayer. The best way to guarantee a low preroll is to keep the ratio of clip size to clip length low. The following are tips for keeping the Flash clip size as small as possible as you develop your animation:

Flash CPU Use

Bandwidth use is not the only consideration when developing Flash animation. Because it is vector-based, Flash performs complex calculations on the user's computer to display the animation. Operations that require many calculations in addition to the computer's normal load may adversely affect playback. Newer computers typically have processors that are fast enough to handle Flash and other clips streamed in parallel, but older computers may not have this capacity. To support the widest audience possible, follow these recommendations to reduce Flash CPU requirements:

Adding Audio to Flash

You can use two methods to add sound to a Flash clip played in RealPlayer. You can even combine these methods.

Adding Event Sounds

You can import short sound effects that play on particular events, such as cursor rollovers or button clicks. These sound effects stay with the animation when you export the Flash Player file. You can import sound files in any format that your Flash application can read, such as WAV or QuickTime.

Note: Event sounds play only in RealOne Player or later, and are not available in RealPlayer 8.

Using a Continuous Soundtrack

A soundtrack, such as continuous background music or an audio narration, can play along with your Flash clip. This is applicable primarily to linear clips such as a cartoons, rather than to interactive applications. To create a continuos soundtrack, you first synchronize your animation with an imported sound file, such as a WAV or QuickTime file. You then export two files:

Using SMIL, you synchronize both clips for streaming. By keeping the soundtrack separate, you help the presentation stream more smoothly, and you can use SureStream RealAudio to scale the audio quality up for users with faster network connections.

The Flash 5 program can create a SMIL file and export your soundtrack as a RealAudio clip automatically. If you use an earlier version of Flash, you export the soundtrack manually, encode it as a streaming audio clip, and write the SMIL file, as illustrated in the following figure. "Streaming a Flash Clip" summarizes this exporting process.

A Flash Soundtrack Uses a Separate Audio Clip

A Flash Soundtrack Uses a Separate Audio Clip

Tip: Flash provides different methods for incorporating sound into an animation. Use the stream synchronization setting.

Dividing Bandwidth Between Flash and RealAudio

When you export and encode your Flash soundtrack as a SureStream RealAudio clip, all viewers get the same Flash clip, but they get different RealAudio streams depending on their network connection speeds. For any network connection, determining your Flash and RealAudio clip speeds is a two-step process:

  1. Decide which RealAudio codecs to use to encode the soundtrack. All codecs are listed in "RealAudio Codecs".
  2. For your lowest-speed target audience, subtract the lowest RealAudio streaming speed from the target's maximum streaming speed to get the Flash clip's maximum streaming speed.
  3. For More Information: The table "Maximum Streaming Rates" lists the streaming speeds for various network connection speeds.

Targeting 28.8 Kbps Modems

The following table lists possible RealAudio and Flash bit-rate combinations for 28.8 Kbps modems, which have a maximum streaming speed of 20 Kbps. If you choose an 8 Kbps music codec for RealAudio, for example, you have 12 Kbps of streaming bandwidth left for Flash.

Bandwidth Divisions between RealAudio and Flash at 20 Kbps
Soundtrack Type RealAudio Codec Flash Maximum Speed
Voice 5 Kbps Voice 15 Kbps
6.5 Kbps Voice 13.5 Kbps
8.5 Kbps Voice 11.5 Kbps
Music 6 Kbps Music - RealAudio 14 Kbps
8 Kbps Music - RealAudio 12 Kbps
11 Kbps Music - RealAudio 9 Kbps

Targeting 56 Kbps Modems

Suppose you want to reach 56 Kbps modems, which have a maximum streaming speed of 34 Kbps. The following table lists some RealAudio codecs you can use, indicating for each codec the streaming speed left for the Flash clip.

Bandwidth Divisions between RealAudio and Flash at 34 Kbps
Soundtrack Type RealAudio Codec Flash Maximum Speed
Voice 6.5 Kbps Voice 27.5 Kbps
8.5 Kbps Voice 25.5 Kbps
16 Kbps Voice 18 Kbps
Music 11 Kbps Music - RealAudio 23 Kbps
16 Kbps Music - RealAudio 18 Kbps
20 Kbps Music - RealAudio 14 Kbps

Targeting Both 28.8 and 56 Kbps Modems

To target both 28.8 and 56 Kbps modems, decide first how to reach the 28.8 Kbps audience. For a voice soundtrack, for example, you might use a 6.5 Kbps RealAudio voice codec, leaving 13.5 Kbps for Flash. To reach 56 Kbps modems, you would encode the soundtrack as a SureStream RealAudio clip using both the 6.5 Kbps voice codec and a 16 Kbps voice codec. Users with 56 Kbps modems then get 16 Kbps of RealAudio data along with the 13.5 Kbps Flash clip. This puts the streaming speed for this combination at 29.5 Kbps, a little less than the 34 Kbps maximum.

Tips for Choosing RealAudio Codecs

Here are some tips for selecting a RealAudio codec to use with a streaming Flash clip:

Using Interactive Flash Commands

Because RealPlayer supports all Flash 3 and Flash 4 commands, you can make your presentations interactive by adding buttons and forms. In some cases, Flash commands work differently in RealPlayer than in the Flash browser plug-in. This section provides guidelines for using Flash commands with RealPlayer presentations.

Flash Clip Timeline Commands

Flash has several commands you can use to control the Flash clip's timeline. In a Flash 3 or 4 clip, these commands affect only the Flash clip. The presentation and all other clips playing along with the Flash clip continue through their timelines normally. In a Flash 2 clip, these commands affect all clips playing in RealPlayer.

Interactive Flash Commands
Command Function
Play Begins or resumes Flash clip playback.
Stop Pauses the Flash clip until a Play command is issued. With a Flash 3 or 4 clip, all other clips play normally. With a Flash 2 clip, all other clips pause.
Go To and Stop Seeks to the designated frame in the Flash clip and pauses. The Flash clip timeline resumes on a Play command. With a Flash 3 or 4 clip, all other clips play normally. With a Flash 2 clip, all other clips seek to the same point in the presentation timeline and then pause. See also "Go To Commands".
Go To and Play Seeks to the designated frame in the Flash clip, buffers the clip preroll, and begins playback. With a Flash 3 or 4 clip, all other clips play normally. With a Flash 2 clip, all other clips seek to the same point in the presentation timeline and then resume playback.
Get URL Sends the URL to the media browser pane or, for earlier RealPlayers, the viewer's default Web browser. If the user has to return to the animation manually, you may want to use this only at the end of a clip. Also note that a SMIL file can define clickable hyperlinks that overlay a Flash clip. See Chapter 15 for more information.

RealPlayer Commands

As noted in the preceding table, commands such as Play, Stop, and Go To in Flash 3 and Flash 4 clips affect only the Flash clip. Using Flash's Get URL command, though, you can play, stop, or pause all clips playing in RealPlayer. You can also launch a URL in a new RealPlayer window. You do this by sending RealPlayer a command (rather than a URL) through Get URL.

Seeking Into a Presentation

The following value for Get URL instructs RealPlayer to seek to the specified time in the presentation timeline:

command:seek(time)

For example, the following command instructs RealPlayer to seek to 1:35.4 in the presentation timeline:

command:seek(1:35.4)

The time format is as follows:

dd:hh:mm:ss.xyz

Here, dd is days, hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, y is hundredths of seconds, and z is milliseconds. Only the ss field is required. When the time value does not include a decimal point, RealPlayer reads the last field as the seconds. For example, 1:30 means 1 minute and 30 seconds, whereas 1:30:00 means 1 hour and 30 minutes. Note that all of the following commands are equivalent. Each seeks to the point 90 minutes into the presentation timeline:

command:seek(1:30:00.0)
command:seek(90:00)
command:seek(5400)

Playing, Pausing, or Stopping a Presentation

The following values for Get URL cause RealPlayer to play, pause, or stop the presentation, respectively:

command:play()
command:pause()
command:stop()

Popping Up New Media Windows

Using the Get URL command, you can open streaming presentations in new RealPlayer media playback windows. You can open as many player windows as the computer's CPU and memory allow. For information on opening a new media playback window, see "Opening a Media Playback Window with a Clip Link".

Go To Commands

Use Go To commands only when adding interactivity to a Flash clip. Do not use them to advance from one scene to the next. When you export your animation in the Flash Player format, scenes are concatenated so that the animation flows from one scene to the next. A Go To command causes RealPlayer to seek to the target frame. If Helix Server has not yet streamed the target frame, RealPlayer halts clip playback, issues a seek request to Helix Server, and rebuffers the new data as it comes in.

When you use at least one Go To command in a Flash 3 or 4 clip, RealPlayer caches the entire clip in memory. It assumes that the clip is interactive and that the Go To commands are meant to move the viewer from one part of the clip to another based on input such as a button click. After Helix Server has streamed the frames containing the Go To command and its target, RealPlayer does not need to rebuffer the clip when the viewer gives the command.

Using a Go To command raises RealPlayer's memory requirement for playing the clip. This is generally not a problem, because Flash memory requirements are low. When authoring long, linear animations, though, avoid using Go To commands whenever possible. When no Go To commands are present, RealPlayer discards clip data it no longer needs. This helps guarantee good- quality playback on computers that are low on available memory.

Load Movie Commands

RealPlayer imposes a restriction on using Flash's Load Movie command to import a second Flash clip into a clip that is playing. If the clips use the RTSP protocol, Helix Server stops the first clip and streams the second clip as a new RealPlayer presentation rather than streaming the second clip as part of the initial presentation. The Load Movie command works properly only when clips are downloaded with HTTP. There are two ways to manage this:

Timeline Slider Activity with Multiple Clips

If your presentation includes multiple Flash clips integrated with Load Movie commands, the RealPlayer slider reflects only the first clip's timeline. Suppose that a clip plays for five minutes and then loads another clip. The RealPlayer slider is active only for the five minutes the first clip plays. After that, the second clip plays normally, but RealPlayer indicates that the presentation has finished by resetting the timeline slider and disabling the stop button. Viewers can still perform interactive functions and stop the second clip by using Flash's contextual menu, though.

Using SMIL Instead of Load Movie

You need to use the Load Movie command to insert a new Flash clip into a Flash clip that is already playing. You do not need to use this command to play two or more Flash clips in sequence, though. Instead, you can use SMIL to define the sequence. This overcomes the URL and timeline limitations described above. To play two clips in sequence, for example, you write a SMIL file that looks like the following:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<body>
<seq>
<animation src="rtsp://helixserver.example.com:554/media/cartoon1.swf"/>
<animation src="rtsp://helixserver.example.com:554/media/cartoon2.swf"/>
</seq>
</body>
</smil>

You can also use SMIL to combine each Flash clip with a RealAudio clip. The example below has two clip groups that play in sequence. Each clip group is composed of a Flash clip and a RealAudio clip played in parallel:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<body>
<seq>
<par>
<animation src="rtsp://helixserver.example.com:554/media/cartoon1.swf"/>
<audio src="rtsp://helixserver.example.com:554/media/sound1.rm"/>
</par>
<par>
<animation src="rtsp://helixserver.example.com:554/media/cartoon2.swf"/>
<audio src="rtsp://helixserver.example.com:554/media/sound2.rm"/>
</par>
</seq>
</body>
</smil>

For More Information: For information on SMIL, see Chapter 8.

Secure Transactions

Using Flash forms, you can build transaction functionality directly into Flash clips streamed to RealPlayer. This lets you add e-commerce capability to your presentation, for example. If the Flash clip connects to a secure server, RealPlayer transmits the encrypted information through its built-in browser. Any encrypted response sent back by the secure server displays in the media browser pane, rather than the media playback pane in which the Flash clip plays.

Tip: Because RealPlayer does not display responses to secure transmissions in its media playback pane, do not send an HTTP POST or GET command to a secure server if you intend for the server's response to come back to the Flash clip. For example, do not connect to a secure server by using Flash's Load Variables or Load Movie command.

Note: Earlier versions of RealPlayer, which do not have built-in browsers, send secure transactions through the viewer's default browser.

Mouse Events

When Flash animation plays in the RealPlayer media playback pane, RealPlayer tracks certain mouse events differently than does the Flash plug-in used with browsers. Although this does not change how you build a streaming Flash presentation and it will not affect most viewers, you should be aware of this behavior.

The Flash browser plug-in records mouse events that occur outside of the Flash area. For example, a user may click and hold on an icon, drag the pointer out of the Flash area, and release the mouse button. In this case, the Flash browser plug-in knows that the mouse button has been released. The RealPlayer media playback pane, however, does not record mouse events that occur outside of its Flash region. Instead, it assumes that the button is still held down when the pointer returns to the Flash region.

Streaming a Flash Clip

This section summarizes the process for streaming a Flash clip. The Flash 5 program can export a RealAudio clip, a tuned Flash Player clip in the Flash 4 format, and a SMIL file automatically. If you use Flash 5, refer to your Flash user's guide for instructions on exporting and tuning clips. If you are using a version of the Flash program other than version 5, perform the following manual export and tuning steps.

To create a streaming Flash clip manually:

  1. Export the Flash Player clip.
  2. Helix Server streams only the Flash Player format (.swf), which is a compressed version of the animation. You cannot stream the Flash source file format (.fla). If your animation includes a continuous soundtrack, disable the audio stream when you export the clip. Refer to the Flash user manual for step-by-step instructions on the exporting a Flash Player clip.

    Tip: If your Flash clip contains event sounds, such as button clicks or rollover sounds, keep those sounds in your Flash Player file, compressing them as MP3.

    Note: Keep in mind that RealPlayer plays the Flash 4, 3, and 2 Player formats. It does not play clips in the Flash 5 format.

  3. Tune the Flash Player clip.
  4. With the Flash tuner, set the clip's streaming bit rate. This necessary step also eliminates bandwidth spikes that can cause rebuffering. The tuner is included in the utilities folder of the zipped HTML version of this manual.

    For More Information: See "How to Download This Guide to Your Computer" for instructions on getting a local copy of this guide.

  5. Export the soundtrack.
  6. If your animation includes a soundtrack, export the soundtrack as a Windows WAV file or Macintosh QuickTime file. If exporting to QuickTime (or any other video format), set low height and width attributes to minimize disk space use.

  7. Encode the soundtrack as streaming audio.
  8. Encode the exported WAV or QuickTime soundtrack in the streaming audio format you want to use. You can use RealProducer to create a RealAudio clip that uses the file extension .rm.

  9. Deliver the Flash presentation.
  10. Transfer your clips to Helix Server. Then write the SMIL and Ram files necessary to stream the presentation.


RealNetworks, Inc. ©2002, 2004 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks
Click here if the Table of Contents frame is not visible at the left side of your screen.
previous next