How I Learned to Stop Worrying and Love RealFlash

Last October we received a call from RealNetworks asking if we'd be interested in creating content for the upcoming launch of their new streaming media solution, RealSystem 5.0. Specifically, RealNetworks was searching for a company to create animation sequences in RealFlash streaming animation based on Macromedia's Flash technology, synchronized with RealAudio. We were in the process of wrapping up a long project for the Microsoft Network (MSN) that was entirely based in Flash, so the chance to transition into this project seemed like a golden opportunity.

For the previous six months we'd been working on what was billed as the world's first interactive web-based cartoon, slated for launch in late fall 1997 on MSN. The project was a dream come true. We were responsible for taking artwork provided by Spümco (creators of Ren & Stimpy), and building out 5-7 minute fully-animated "episodes" using Flash. However, due to the recent restructuring at MSN, Weekend Pussy Hunt, later changed to the more consumer-friendly Comic Book, is unlikely to ever make it to the Net. The project did have its benefits: the chance to work with Spümco's John Kricfalusi, and the hundreds of hours we spent using Flash provided us with an education in web-based animation production that would have otherwise been impossible to get. Although Comic Book won't be available to the public, John K. has produced his own Internet cartoon series, The George Liquor Program, which can be seen on the Spümco web site at www.spumco.com.

RealFlash: The Next Step

It was during our first face-to-face meeting with RealNetworks that we found out exactly what RealFlash was and what it could do. RealFlash combined a Flash .swf file (a compiled Flash animation) and a .rm or .ra file (a RealAudio file) into a synched stream that would play through the RealSystem 5.0. For the first time it was possible to send streaming (read: no waiting) animation with high-quality sync audio to users who had only a 28.8 modem.

Edgar Allen Poe's The Tell Tale Heart. Developed for the Sci-Fi Channel exclusively for the launch of RealNetwork's RealFlash Player, POP! used original illustrations and narrative to create this streaming 17-minute Flash animation. ©1998 POP! Multimedia, Inc. All Rights Reserved.

RealFlash solved many problems we had encountered when using audio in Flash 2.0. Although Flash allows audio to be placed at specific points in an animation sequence, it is difficult to maintain sync throughout long passages of audio, especially lengthy sections of dialogue. In addition, using long passages of music underneath a scene is almost impossible due to file size limitations, so in most cases only "looping" audio can be used to score a scene. Using Flash alone, it was simply impossible to produce pieces that contained anything close to professional quality audio.

In the month following our meeting with RealNetworks, we produced several pieces for the RealSystem launch, most notably two cartoons featuring Warner Bros. Looney Tunes characters, as well as a rendition of Edgar Allan Poe's The Tell Tale Heart for the Sci-Fi Channel. When we started, the process seemed a bit more complex than simply authoring in Flash. However, as we got deeper into the project, we realized that as long as one follows some straightforward guidelines, creating content in RealFlash is actually quite simple.

Choosing Between Flash and RealFlash

As you begin a new project, its important to note that while both Flash and RealFlash are effective tools for producing web-based animation, you'll find that there are some projects which are better suited to one than the other.

Flash vs. RealFlash

RealFlash offers excellent quality sync audio and requires hosting on special server. Flash does not require a special server, but audio quality is poor and sync audio is extremely limited.

Which one to choose? It depends on the nature of your project. Audio issues aside, the two main features which differentiate these products are interactivity and hosting. Flash allows for non-linear animation with interactivity, while RealFlash requires animation sequences that are linear, but does allow some very limited interactivity. Flash content can be placed on any type of web server and still stream to the client browser, while RealFlash requires that the content be hosted on a RealServer 5.0.

Many Internet Service Providers (ISP's) can now host RealFlash clips without an additional charge beyond normal account fees. This consideration aside, one is left with a fairly simple decision: use Flash if your project includes interactivity, use RealFlash if it doesn't.

The RealFlash Process

Building RealFlash content requires either knowing or learning Macromedia Flash. Although you'll make specific decisions about your animation knowing that its final format will be in RealFlash, most of the work to create a RealFlash sequence is done after your work in Flash is complete.

To begin creating RealFlash content you'll need the following software, all of which is available on the RealNetworks web site. Macromedia Flash 2.0 (which can be downloaded from Macromedia for a 30-day trial) Real Player 5.0. Real Encoder 5.0. RealFlash Optimization Toolkit.

Using our work on the Warner Bros. animation as an example, you can follow these steps as a guideline to create your own RealFlash content. I've purposely skipped over the actual animation process in Flash, as this is something you'll already need to know before beginning a project. In addition, this outline describes the process as it occurs on the Macintosh platform, so PC users may find that some file types differ on their systems.

Your Software Toolbox

Required: Macromedia Flash 2.0 RealPlayer 5.0 RealEncoder 5.0 RealFlash Optimization Toolkit Useful: Adobe Photoshop 4.01 Macromedia Freehand 7.02 Adobe Streamline 3.1 Netscape Navigator 3.0 or higher Macromedia SoundEdit16 2.0

Step One: Creating the Artwork and Sequence Elements

The artwork in the Warner Bros. piece came both from existing Adobe Illustrator .ai files, as well as new artwork that was drawn specifically for the project. To begin, all existing .ai files were imported directly into Flash. The new artwork was scanned and saved using Adobe Photoshop, and then opened in Adobe Streamline and converted into vector-based artwork and re-saved as .ai files. Next, we opened each file in Macromedia Freehand and manually removed `points' to clean up the line, as well as to reduce the eventual file size of the Flash file, i.e. the fewer points, the smaller the file. Finally, the cleaned-up artwork was imported into Flash, and we were able to begin coloring the art according to color keys provided by Warner Bros.

Once the coloring was complete, we needed to address audio in our piece. We received music and multiple sound effects from the Warner sound library as .wav files. To import them into Flash, we first needed to convert them to .aiff files, which was done using Macromedia SoundEdit16. PC users can skip this step, as Flash supports .wav files on the PC version. Finally, all of the pieces we needed to complete the piece were in Flash, and we were ready to begin work on the animation sequence.

Step Two: Creating the Animation Sequence

As with all content created for the web, bandwidth must be a consideration in nearly every decision that is made. Our target audience for this piece were users with a 28.8 modem, so we needed to limit the entire RealFlash sequence to a streaming rate of 20 kbps (kilobits per second). To manage that, we needed to limit our animation to 12 kbps, leaving 8 kbps for audio.

To keep our animation at 12 kbps, we made some specific choices about how the piece would be built. We decided, as RealNetworks recommends, on a frame rate of 7 frames per second. We also tried to be realistic about the amount of art and animation that would be used to tell our story, as the fewer pieces of art that are used, the smaller the eventual file size. In addition to the bandwidth concerns, we knew that large-frame animations have difficulty running on machines with a slower processor, so we made our movie dimensions fairly small (358W x 240h).

Now that the parameters of our sequence were set, we were finally able to begin the animation process in Flash.

Step Three: Creating the RealFlash Sequence

Once we were satisfied with our animation sequence, we began the process of creating the files to be used in the RealFlash animation. First, we exported the movie without audio as an .swf file, warner.swf, making sure to remove all frame actions. We then exported the same movie as a quicktime .mov file with the audio set at 44.1 khz 16 bit. Double-clicking on the .mov file allowed us to open the file in MoviePlayer, where we could export the audio as an .aiff file.

We were then able to use the RealEncoder to open up the .aiff file and encode it as an 8 kbps .rm file, saved as warner.rm. This step left us with two files to work with: warner.swf and warner.rm.

To complete our work on these two files, we `tuned' our .swf file using swftune.exe, which is included in the RealFlash Optimization Toolkit, making sure that the buffer time was no more that 15 seconds. Although this tuning process is at first somewhat unintuitive, you're basically setting a buffer time for the sequence by adjusting the streaming rate of your animation. The higher the streaming rate, the lower the buffer time. Your only concern is to insure that the animation streaming rate plus the audio streaming rate does not exceed 20 kbps when targeting 28.8 modems.

Step Four: Putting it all Together

To finally see and hear the RealFlash piece, we had to create one last thing - the .ram file. A .ram file is the file that actually tells the server to play your RealFlash content. We created the .ram file in SimpleText, and it only contains the following line: pnm://www.popmultimedia.com:7060/warner.swf+warner.rm

The file simply tells our RealMedia server (pnm://www.popmultimedia.com:7060) to play the RealFlash piece (warner.swf+warner.rm).

We were now ready to upload our content to the server. We FTP'd the .swf and .rm files to a special directory on the RealMedia server, and then uploaded the .ram file on our normal web server. To test things out, we just opened up a browser, typed in the address of the .ram file, and watched our piece play through the RealPlayer. RealFlash content can also be played back locally without a RealMedia server by building a .ram file. Our local .ram file looked like this: file:warner.swf+warner.rm

As you can see, the majority of the time it takes to create RealFlash content is taken up in preparation and the Flash animation process. Once your work in Flash is complete, you should have no problem creating the RealFlash files in under an hour.

Pushing the Boundaries of RealFlash

The experience with the Warner Bros. piece led us to experiment with some ways to test the limits of the RealFlash process. In our most recent project, The Silicon Jungle, we took a vastly different approach to the audio production. Knowing that this project required a higher quality audio mix than we could do in Flash, we decided to do all audio production outside of Flash, taking the project to a local recording studio for scoring and sweetening.

Although we weren't sure if it would work when we started, the process ended up being quite simple. When building our animation sequence, we dropped in scratch audio to get the piece timed correctly. Once we were satisfied with the animation, we exported the entire movie as a quicktime .mov file. This file, which ended up at around 85mb, was transferred to a zip disk and taken to the audio post facility. The file was then imported into ProTools, where we were able to build multiple layers of audio, create an original score, and get a professional mix that left us with audio perfectly prepared for the encoding process.

To complete the piece, we encoded the .wav files as 8 kbps .rm files, and repeated step four as described above. Although it added a layer of complexity to the project, we were excited by the possibilities: the picture capabilities of Flash were already fantastic; the audio stream in RealFlash is great; now we had found a way to produce our audio track at the highest possible level.

The Future of RealFlash

As you might imagine, there's really no limit to the type of content one can create using RealFlash. Movie trailers, cartoons, training, promotion, entertainment can all take advantage of the unique capabilities of RealFlash.

Over the past few years we've seen dozens of `hip' new technologies make grand promises, only to disappear after a few short months. For us, RealFlash has been one of the few products that has lived up to its billing and has exceeded our expectations.

RealAudio, RealSystem, RealPlayer, RealServer, and RealEncoder are trademarks or registered trademarks of RealNetworks, Inc. All other companies or products listed herein are trademarks or registered trademarks of their respective owners. RealFlash is a trademark of Macromedia and RealNetworks, Inc. Flash © 1997 Macromedia, Inc. Macromedia, the Macromedia logo, and Flash are registered trademarks of Macromedia, Inc.

Bill Predmore works as Creative Director on a team of award-winning on-line designers and programmers at Seattle-based POP! Multimedia. POP! specializes in the production of web-based Flash and RealFlash animation, working with clients such as PBS On-line, The Microsoft Network and Disney's Bill Nye to create some of the coolest stuff on the web.