Animation on the Internet: The Tools

Welcome to the constantly changing world of animation on the Internet. It wasn't too long ago when the simple Gif89a, known as the animated GIF, was the only game in town. However, with first the use of plug-ins for browsers, and then the invention of cascading style sheets and DHTML, the world of animation on the Internet is exploding.

This look at the current status of animation tools for creating animation on the Internet is based on different levels of complexity for the audience browsers. Animated GIFs are the most universally viewed by the Internet audience. Most of the client browsers can view this type of animation without any additional software.

Animations that require plug-ins, or additional software add-ons for browsers, allow for greater diversity and more interaction, but require the audience to download additional software to be able to view them. This was more troublesome in the recent past, but luckily this process is getting more automated in the more recent browser versions.

Most recently, the latest browsers allow for animations without plug-ins, but these browser versions haven't been fully populated among the Internet audience. Known as Dynamic HTML (DHTML), this style of animations is viewable with the 4.0 or greater browsers. Unfortunately, browser companies have implemented slightly different versions of this technology, so sometimes one has to choose which browser type to support or create two different versions of the animations.

What Type Of Animation Do You Want To Create?

In determining which tools to use you first have to decide what type of animation you want to create. Below I've listed the different types o Internet animations, and what they are generally used for, plus, I have included the benefits and drawbacks for each tool:

Gif89A

Benefits: Both repeating and single animation; Plays on almost all browsers with no plug-ins needed. Drawbacks: No interaction; Entire file has to be downloaded before starting; Complex animations create very large file size; No audio

Plug-ins

Benefits: Greater interaction; Audio can be used; Ability to start animation before entire file is downloaded; Can transfer existing animations into some formats. Drawbacks: Most browsers need additional software to show animations; Requires some level of audience expertise to load software

DHTML

Benefits: No plug-ins needed; Allows for animations and scripting of animations Drawbacks: Need the most recent browsers to use; Competing standards require different versions of content

The First Animations

The GIF89a technique allows for multiple images to reside in one file, and then be played back in sequence after being downloaded to a browser. Once a series of images is created using such image editing tools as Adobe Photoshop, Adobe Illustrator, Macromedia Freehand, Corel Draw, etc. or video authoring tools like Adobe Premiere, they are imported into a GIF89a tool for the animation composition.

Old Favorites: GIF89a Tools

Windows: GIF Construction Set (Alchemy Mindworks) This shareware tool allows for both transparent and interlaced GIF creation, as well as video-to-GIF animation conversion. This program also has an Animation Wizard to simplify the process for the newcomer. For Windows 95, there are more deluxe features such as greater pallet choices, transitions and special effects.

Macintosh: GifBuilder This freeware utility from Yves Piquet has a scriptable utility for creating Animated GIFs from PICT, GIF, TIFF, and Photoshop images, as well as Quicktime and FilmStrip file conversion.

Cross-Platform Tools

WebPainter From Totally Hip comes an inexpensive tool to create animations that combine standard design elements (spray can, various brushes, smudging, etc.) with animation features such as onion skinning (layering). You can download a free sample of this product from the Totally Hip web site. New Products on the Block Both Adobe and Macromedia are introducing new tools to aid in the creation of web graphics and animated GIFs. Both Adobe's Image Ready and Macromedia Fireworks promise to combine image creation, animation and image compression tools in one. While both of these tools cost more than the freeware or shareware tools shown above, they promise to become one stop shopping for web image creation. These tools will be available for both the Windows and Macintosh platforms. Plug-ins: The Next Evolution These groups of tools allow for much more interactive capabilities or the ability to take your existing animations directly to the web. They require a plug-in or additional piece of software to be included in the viewer's browser. Sometimes these plug-ins ship with the browser, such as Apple's Quicktime, or the viewer must download it onto their computer. Luckily, in the more recent versions of both Netscape and Microsoft's browser, this has become much easier to do. For your existing animations or animations created on current animation software, exporting the animation to Quicktime or AVI will allow you to place this into a web page. There are many places on the web that will show you how to format your web page to insert this media type into the HTML. For the viewer to play this file, they will have to download the entire file before playback, so keep an eye on file size. One way to address this in a large animation piece is to break the animation up into smaller pieces, and allow the user to download a segment at a time. To reduce the delay to the viewer of having to download the entire piece, there are streaming video technologies that will allow you to encode the animation in a format that requires a special plug-in to view. The two most prevalent technologies of this type is Real Network's Real Media and Microsoft's Netshow. Real Networks Real Media allows for an animation piece to be encoded in a specific file type, and then streamed or downloaded and played in real time across the net. Adobe's Premiere and other digital editors will export into this format. For multiple viewers to see this animation at the same time, Real Media sells their server software which is available in various flavors of Unix and NT. Ask your Internet service provider or hosting company about this service. Netshow, from Microsoft, is a similar product, but the server is free for NT servers. The early versions of this technology were not at the same quality level as Real Media, but Microsoft is introducing Netshow 3.0, which will be a great improvement. While Internet video, either downloaded or streaming, can be used for your animation, it is highly compressed and appears in a small (160x240 pixels) window in the browser or helper window. For full screen animations, or greater interaction, you need to create your animation in the tools designed for Internet Animation.

Let's review the current tools and their pros and cons for original Internet plug-in animations.

Old Favorites: Plug-in Animation Tools

Shockwave (Macromedia PC and Mac) This technology twist from Macromedia allows for Director files to be compressed and played back in your viewers' browsers. Bundled with both Microsoft and Netscape browsers, this allows for the interaction and animation capabilities of Director to be available to your Internet audience. It will allow you to convert existing Director files into a Shockwave version, and in recent versions of Director, allows you to determine if you want to have the entire file downloaded before playing or streaming to the browser. This is the most prevalent interactive animation tool on the Internet, allowing for bitmap graphics, audio files, Quicktime embedding in files and many other advanced features, but file sizes are large and it requires more viewer memory for acceptable playback.

Flash (Macromedia PC and Mac) This is a simple vector-based animation program that keeps getting better with age. By using vector based graphics, this format allows for smaller downloads and scalable graphic sizes (the same graphic will automatically scale for the browser size window). The tool is less complex than Director, and doesn't include the variety of tools found in higher end traditional animation tools. However Flash allows for simple animations that create fast and easy roll-over buttons and animations with simple sound use. Real Flash (Real Networks, Macromedia) Recognizing the small and fast file transfers of this technology, Real Networks and Macromedia have worked together to create Real Flash, a streaming animation program that combines the streaming audio capabilities of the Real Network's Real Media server with the vector graphics capabilities of Flash. This allows for streaming vector-based animations, and is pushing the Internet closer to real-time animation. Many content companies are creating original animations for the web using this technology. It's fast, easy to author in, and syncs higher quality sound with streaming animations. Look to Macromedia or Real Network's web sites for examples of this style of Internet animations. Coming Down The Pike Based upon the success of the products listed above, many newcomers are looking at plug-in based animation tools for the Internet. One new one is Liquid Motion (Microsoft), which allows for both ActiveX utilization (on IE 4.0 and greater browsers) and a Java implementation on other browsers. This tool set appears to be competing with Macromedia's Flash, and we should wait to see what the adaptability of this new tool will be. The beta is available from the Microsoft web site. 7th Level is presenting Agent 7 technology in both Netscape and Microsoft, but only for Windows clients. This is an interesting streaming 2-D animation program, but the tool set for creating this style of animation is not yet announced. Watch the 7th Level site for more details. For an alternative way of delivering animations to the desktop, Togglethis allows for delivery of animations via the Internet's first killer application, e-mail. After downloading a player from their site, an animation can be delivered via e-mail. This allows for a much smaller file size (10-25 kilobytes), but the animations play back on your desktop, not within the browser. Warner Bros. Online and Togglethis have created Bozlo the Beaver, a new Warner Bros. cartoon character. Look for this creature at either one of their sites. DHTML: The New Kid The new kid is Dynamic HTML, which allows for animation, style sheets and other ways to better format HTML. There is a growing set of Internet tools that will allow you to create DHTML. One benefit is that it works across browser types and needs no plug-ins for playback. One problem is that Microsoft and Netscape have different implementations of design specifications, so the HTML plays back differently on each browser. DHTML is still in its early stages. At some point the standards board will finalize the specifications for this format, and both Microsoft and Netscape have agreed to conform to this specification. It may not be able to do the complexity of animations and interactions that the plug-in tools will allow, but it is the easiest format for complex animations for the user since animated GIFs.

Windows: Dynamite (Astound, Windows): This standalone DHTML tool allows for the creation of DHTML for Windows based platforms. This tool allows for simple DHTML creation, but doesn't allow the customizing of some of the other tools. However, for most people however trying to learn this style of animation creation, this tool offers good training and an on-line tutorial.

Macintosh: CyberStudio 3.0 (GoLive): This update to the top ranked Macintosh web site creation tool has added the capability to author DHTML pages. It allows for many pre-authored effects, along with the ability to author and store your own animation techniques. It is only available for the Macintosh, and is not yet shipping. A beta is available from the GoLive web site. Cyberstudio appeals to authors from a page layout, less programming level of comfort.

Cross-Platform Tools: Dreamweaver (Macromedia; Both platforms) The first industrial strength web site creation tool, Dreamweaver excels at DHTML. It allows for both pre-defined and author created animations, and can author out to either browser type. It also keeps cleaner code than other site creation tools, but can be a little imposing to those authors unfamiliar to HTML authoring.

But Wait...There's More!

There are many more tools for creating animation on the Internet then we have time to explore. Many tools for creating all types of animation are used everyday in the web industry, and most of them have very loyal users. The best way to keep up on this field is to use the on-line search engines for tools in these areas. Yahoo has a very good listing of multimedia tools.

Most important is for you to find a tool that you are interested in using. You may want to stay with a tool from a provider with whose interface you are accustom to working. You may feel more comfortable on Adobe or Macromedia's layout. True innovation, however, will come from the smaller tool providers. The key is to create animation on the Internet, that starts with a good idea, a desire to draw, and the understanding that your audience is a diverse and non-homogenous viewing environment. By keeping your audience in mind, along with the type of browser and operating system that they use to view your work, you will have a great start for animating on the Internet. Good luck, and I'll see you on-line.

Robert Gonzales is director of Technology & Operations at Warner Bros. Online.