The Long Road to Animation

Ann Pinion
Violet Crown Computing

January 6, 1999

The following article originally appeared in Site Builder Network Magazine.

I wanted to make a short animated movie that could be viewed on the Internet, but the only animation I had ever done was animated GIFs. This is my story.

I started by plotting out a storyboard, and then I created the graphics frame by frame. First, I used MetaCreations Bryce2 to create the landscapes. Then I used Microsoft Image Composer to create the characters and do the compositing work of putting the characters into the landscapes. For each frame, I changed the character's position slightly and then dragged and dropped it into Microsoft GIF Animator. Using this method, I made a series of animated GIFs, one GIF for each scene. I ended up with 7 MB of animated GIFs! That was wildly unacceptable if I wanted anyone outside my home to see my great "movie."

The Next Step: ASF

I turned to MSDN Online Web Workshop for clues as to what my next step should be. The Web Workshop led me to the ASF and Windows Media Technologies Web sites. I realized that what I needed was a streaming ASF file that could be viewed with the Media Player embedded in an HTML file. Great, but how do I do that?

One of the free Windows Media tools was the ASF Editor. I quickly learned how to use it by following the tutorial included with it. The ASF Editor lets you organize your frames on a timeline, so you can control when each frame appears. After I began to create an ASF version of my animation, I realized that I could now add sound to my animation, because the Editor also allows synchronization of WAV files with graphics. A slight detour to the Microsoft Sound Recorder and the Internet to pick up some free WAV files, and soon my ASF file had some sound effects. I would have added more music, but the ASF Editor could not use MID files, and I decided to put off trying to convert MID files to WAV.

As nifty as the ASF Editor was, it seemed better suited for video or slide-show presentations than for animation, because it was difficult to maneuver so many frames within the timeline -- and some control over the timing was lost when the frames were stacked (a process required for animation). Also, the delay in queuing the animated stacks of frames created a long (2 minutes, 45 seconds) wait before playing the 6-minute animation - a problem I was not able to overcome. Advice from the Windows Media newsgroup was to create an AVI file first, then convert it to ASF or to use the Windows Media T.A.G. Author.

Enter, PowerPoint

What was the T.A.G. Author? It turned out to be the new replacement for the ASF Editor -- and now this new editing tool was described as a way to created "illustrated audio" files, not animation. Hmmm. I decided not to upgrade, but to stick with the tool I'd been using. Further research on ASF led me to create ASF files from PowerPoint, without having to use the either tool. I was able to do this in one day without ever having used PowerPoint before.

During my digression into PowerPoint, I learned the best size for graphics on the Web. The height and width should be multiples of 16, such as the PowerPoint default size of 320 by 240, in order to take advantage of Windows Media's support of the loss-tolerant JPEG format. Loss-tolerant JPEG allows the viewer to see the frame even if some of the data has been lost during transmission. As usual, I learned about this from Site Builder Network, and learned that all of my animation graphics were the wrong size! Maybe I will fix them someday. As a side benefit, this new information came in handy at my day job, where I have created streaming PowerPoint slide shows that include audio.

ASF? AVI?

I now had my ASF files -- but following advice from the newsgroup, I decided to try creating an AVI file and then use the command line (ugh) utility VidtoAsf to convert the AVI to ASF format. I turned to Adobe AfterEffects to create the AVI. This is a sophisticated tool and is also a significant investment. But money is no object now (yeah, right), because this budding Orson Wells is on a mission to complete the movie. Since I have a day job as a Web developer (I'm a Microsoft Certified Solution Developer), I can only work on this in my spare time. I decided I couldn't wait to learn Adobe AfterEffects and complete the AVI version. I wanted to deliver my movie to the Internet and the (hopefully) anxiously awaiting public. Back to the Web Workshop to learn how to embed ASF files in HTML. All you need to embed an ASF file is an <OBJECT> tag. Here is the code:

<OBJECT ID="WMPlay" WIDTH=160 HEIGHT=112
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
   CODEBASE="http://activex.microsoft.com/activex/
   controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
   standby="Loading Microsoft® Windows® Media Player components..."
   type="application/x-oleobject">
   <PARAM NAME="FileName" VALUE="http://servername/path/asxname.asx">
   <!--NETSCAPE PLUG-IN STARTS HERE-->
   <Embed type="application/x-mplayer2"
         pluginspage="http://www.microsoft.com/Windows
         /Downloads/Contents/Products/MediaPlayer/"
         name=NSPlay"
         src="http://servername/path/asxname.asx"
         ShowControls=0
         ShowDisplay=0
         ShowStatusBar
         width=160
         height=112> 
   </embed> 
</OBJECT>

You may notice a new file extension: ASX. Now I needed to learn about ASX files. Luckily, creating an ASX file is very simple -- as long as you can look it up on MSDN Online Web Workshop! An ASX file transfers control from the browser to the Media Player. Here is the code for a basic ASX file:

<ASX version="3">
   <Entry>
      <ref href="mms://server/path/asfname.asf"/>
   </Entry>
</ASX>

Go to the OSIG

Searching for information on ASX files led me to the Windows Media OSIG and their really great Ask the Expert live broadcasts. The broadcast about ASX files was especially helpful. Embedding the ASF files into HTML is incredibly easy, but have I mentioned codecs? And bit rates?

Codec is short for compressor/decompressor, a driver used to compress and decompress data in order to use less bandwidth on the network. My first try at publishing my movie to the Web resulted in an error caused by using the wrong codec. Back to the ASF Editor. It was easy to convert to the correct codecs, that is, one supported on the client. The Media Player comes with codecs, so those are the only ones that you can be sure of being supported on the client. Which codecs come with the Media Player? You can find technical details such as this in the Media Services area of the Windows NT Server site. When you create an ASF file with the ASF Editor, you must choose a bit rate: 14.4, 28.8, 112.5, or a custom bit rate that you can define. You should create an ASF file for each bit rate, and allow your viewers to choose the bit rate that they need. I chose 112.5 for my ASF file. Unfortunately, using the ASF Editor to create files for other bit rates was not as easy as I had hoped. In fact, you have to start from scratch to create a file with a different bit rate. A major advantage to creating your initial file as an AVI is that you can choose a bit rate when you convert to ASF. In that way, you can create multiple ASF files, each with a different bit rate, without having to change your original AVI file.

Audio Details

Another topic that I needed to learn more about was audio. Did you know that humans are more sensitive to degradation of audio than that of video? This was something I picked up from an Ask the Expert broadcast. The first preview showing of my ASF file proved that to be true. I also realized that I need to find an actor to provide voices for my characters and musicians to write a soundtrack -- but since this is a low-budget indie movie, those things will have to wait.

After all this, I'm beginning to feel as though I need to quit my day job just to have time to work on my 6-minute animation!

Production Status

I published my corrected ASF file, but only the 112.5 bit rate version, but I still needed to finish my Adobe AfterEffects AVI. Meanwhile, another new tool emerged: the Sonic Foundry On-Demand Producer (beta 1), which can convert AVI to ASF. I tried it out on a test AVI file, and it worked great.

This is where it stands today. I finished the Adobe After Effects version of my animation over the holidays and used the Sonic Foundry On Demand Producer (beta 2) to convert it to ASF files, one for 56K bit rate and one for 112K (ISDN) bit rate. The conversion worked flawlessly. These new ASF files don't have the delay before the animation begins that the old ASF file had.

When I started down this rabbit hole, little did I know where it would lead. I might end up with a whole new career. In my daydreams I'm hearing, "And the Oscar goes to "Abdul the Great Versus the Lizard Men from Mars" (the title of my animation ). My acceptance speech will of course include thanks to Site Builder Network!

Ann Pinion co-owns Violet Crown Computing, a consulting firm in Austin, Texas. A Microsoft Certified Solution Developer with 10 years of programming experience and a degree in Fine Arts, she works as a Web developer and network administrator.