Web Pages That Wiggle: Web Animation Software Buyer's Guide

Seems like everywhere you visit on the Web these days, you find pages with more than just text; you see pages with pictures that spin, change color, scoot across the screen and even move in synchronization with an audio track. Some even provide full-blown cartoons with lip-synched sound and just as much visual allure as Bugs Bunny or Mickey Mouse.

Remarkably, all of this motion and sound can get to your computer screen by way of plain old telephone wires and a 28.8k modem. Innovative authoring software has made it possible to create and transmit moving images and sound over the Web without the use of traditional video technology and its bandwidth-hogging files. If you're involved in delivering moving pictures over the Internet, consider adding some of these tools to your video creation toolbox.

In this article, we'll look at software packages that enable videographers, Web designers and home users to create movement on their pages. The category is a fairly broad one, so we'll divide it into four categories: .gif animators, DHTML animators, vector animators and full-blown multimedia authoring packages. We've got a lot of ground to cover, so let's start with the simplest type of animation software: .gif animators.

Animated .gifs

A .gif (pronounced either giff or jiff, take your pick) is a type of image file commonly found on the Internet. The online service provider, CompuServe, developed the .gif format for delivering still images through the Internet a number of years ago. Gifs were not designed to move. Some programmers discovered, however, that a quirk in the way .gifs are encoded gives Web designers the ability to load a series of images within the same file, then play them in rapid succession as the page loads. The resulting animation, called a .gif animation (or sometimes .gif 89a animation), is usually jerky and inconsistent, but sufficient for a number of uses. When designing a .gif animation, experienced Web designers usually keep it down to just a few frames that suggest a simple motion. As a technology, .gif animation is not robust enough to support long cartoons or any kind of precise, sophisticated movement. Following is a sampling of tools available for making animated .gifs for the web.

GIF Animator 4.0
Ulead Systems
$30

This handy .gif animation software, which is available in a shareware version from your favorite download site (such as www.tucows.com), is well worth the $30 price of registration. With GIF Animator 4.0, you can easily string a series of images together and create an animation for a Web page. It's popular among amateur Web designers, not only because it's inexpensive shareware, but also because it offers one of the simplest software interfaces. The only things you can manipulate are the order of the images, the amount of time each image is on the screen and a small number of optimizations, which tend to disrupt the steady playback of your Web animations.

In short, GIF Animator 4.0 is excellent for novices, but professionals will probably want a lot more control over their creations.

Cool 3D 3.0
Ulead Systems
$60 downloaded; $80 shipped

Cool 3D provides a simple and affordable approach to animated 3D graphics for output to animated .gif, QuickTime or .avi files. With a host of pre-set colors, .gif palette optimization options, styles, lighting scenarios, models and other nifty features, the aim of Cool 3D is to get you started animating with a minimum amount of time and effort.

In short, Cool 3D is a godsend for those who need to output animated .gif files and want the impressive look of 3D without the steep learning curve and hours of toil that usually accompany 3D graphics.

ImageReady 2.0
Adobe Systems
Included with Photoshop 5.5

ImageReady 2.0 is Adobe Systems' answer to easy, quick creation of .gif animations for Web pages. It has everything you'd expect from an Adobe product, including an almost bewildering array of tools and options. However, it doesn't take long to learn the basics of ImageReady 2.0. Users work through a simple animation timeline that displays the order of images loaded into ImageReady. If you've worked with other Adobe products, then you should have no problem learning how to use Adobe's ImageReady software.

Once sold separately, ImageReady 2.0 is now exclusively bundled with Adobe's industry-standard Photoshop imaging software.

Animation Shop 2.0
Jasc Software
$39

Jasc's Animation Shop 2.0 provides another simple drag-and-drop method of quickly and painlessly making a .gif animation. Built-in wizards provide a truly simple animation-creation experience, and Animation Shop 2.0 works together seamlessly with Jasc's popular and inexpensive Paint Shop Pro image editing software.

Image and text effects add a nice touch of spice to this inexpensive .gif animator. Like some others, it's not the best solution for professionals, but amateur Web designers should appreciate its simplicity and affordability.

DHTML Editors

Dynamic HTML (DHTML) allows developers to rapidly load a number of Web page layers to create animation effects with ordinary images, text, tables and colors. Perhaps the biggest drawback to the protocol is that dynamic HTML pages require the latest versions of Internet browsers to work properly, a fact which could limit your potential audience somewhat. Here are a few products that output DHTML animations.

Dreamweaver 3
Macromedia
$199

Dreamweaver uses a timeline approach to let users create simple animations in dynamic HTML. Dreamweaver is much more than a Web-animation program, however; it is a full-featured Web site design and production package.

GoLive 5.0
Adobe Systems
$289

Similar to Dreamweaver, GoLive is a DHTML editor that allows users to animate their pages. With support for most popular web-ready file formats, Adobe's GoLive also features tight integration with other Adobe products like Live Motion.

The WYSIWYG (what you see is what you get) interface features drag-and-drop media placement and ready-to-use JavaScript Actions that can assist in your animations. DHTML animation is achieved using the integrated timeline interface. GoLive's JavaScript and DHTML features enable you to create and deploy animations that interact with your viewers.

One for Java
JavaRazor 1.0
Ulead Systems
$60 downloaded; $70 shipped

For those who wish to use the Java programming language to deliver simple buttons and animations but don't want to go through the hassle of actually learning how to write Java code, there's JavaRazor. Consisting of two separate products bundled together Ulead Button.Applet and Ulead Animation.Applet-JavaRazor allows you to easily create animated banners, image transitions, rippling water effects and more.

Perhaps the biggest downside to JavaRazor is its reliance on Java, a programming language that's prone to playback problems on the Web. Java wasn't specifically designed for animating Web pages, so it's no surprise that it isn't the best technology available for creating Web animations.

Vector This

Now, let's take a look at vector-based animators. These powerful tools are capable of creating full-motion cartoons with synchronized sound, among other things.

The main difference between vector animators and other kinds of animators is the way in which vector animators store their images. For example, .gif animators use what's called raster-based storage techniques (also referred to as bitmaps). Raster-based image files store each individual pixel, along with its color information. This is not a very efficient method of storage, especially when you're working with animations that are composed of hundreds of individual images. Vector-based image storage methods, on the other hand, store each line and color that makes up an image as a mathematical expression. It's like sending the recipe for a pie rather than sending the pie. Remember your ninth-grade algebra? No big deal if you don't; a vector-based animation program handles all of those complex algorithms on its own, so you don't have to worry about them.

The upshot of all this for you, the Web animator, is that you can create animations that take up very little space, which makes for smooth playback, even on slow 28.8 modems. With a vector animation package, you can animate any attribute of an imagesize, shape, color, etc.without creating gargantuan files that get bogged down at the viewer's slow Internet connection.

Flash 4.0
Macromedia
$299

Though vector-based standards for the Web have been discussed by industry leaders for some time, the software that really got the ball rolling in this field was Macromedia's Flash. For this reason, vector animations for the Web are often referred to as Flash animations. Flash uses a timeline to manipulate keyframes, layers, individual objects (referred to as Symbolsin in the Flash lexicon) and audio in an intuitive way.

Flash does provide a workable, though quirky, interface that will look familiar to anyone who has ever used Macromedia's flagship Director product (discussed in the section on multimedia authoring packages below). The program's ability to work seamlessly with Freehand ($399), Macromedia's powerful vector-based illustration program, is a big plus; Macromedia bundles the two web creation products together for $499.

LiveMotion 1.0
Adobe Systems
$399

Not content to sit back and watch Macromedia control the whole Web-animation marketplace, Adobe Systems, providers of the popular Photoshop, Premiere, Illustrator, PageMaker and After Effects products, has developed its own Internet animation product: LiveMotion. LiveMotion incorporates many of the features found in earlier Adobe products. In the LiveMotion interface, users have a familiar-looking array of palettes, windows, swatches and controls at their disposal. With support for full-featured, layered Photoshop and Illustrator files, as well as a number of output options (including .gif animations, vector animations in Flash's .swf format, and others), LiveMotion is bound to impact the web animation market in a significant way.

Make Mine Multimedia

For those who want an integrated software package that provides a deep level of interactivity, programmability and power, the following Web-based multimedia authoring packages should be of interest. Designed to give users the ability to create complete, functional multimedia applications, these products offer the ultimate in flexibility, at a cost in convenience and download time.

Director 8
Shockwave Studio
Macromedia
$999

Macromedia's flagship Director products made a name for the company in the multimedia-CD-ROM-creation marketplace. Since its initial release in the early 1990s, Director has changed its focus significantly from CD-ROM production to Web page production (via Shockwave, the interface that ports Director content to the Web). Even the name of the product has changed, from just plain Director to Director Shockwave Studio.

Director is primarily used to provide animations and other forms of audio/visual interactivity on the Web. Output formats include Shockwave movies (.dcr), Shockwave movies that are protected from import (.dxr), Java Applet and a stand-alone projector file for use outside of a web browser. For viewers to see your Director content, they'll have to download and install the Shockwave player in their Web browsers (over 250 million have been installed to date). Also, viewers must wait a bit while the content loads into their browsers - a process that can be quite frustrating to the fast-paced, point-click-and-view-it-now crowd that inhabits the Web.

But if it's raw programming power you want, Director 8 Shockwave Studio has got you covered. Incorporating its own scripting language (Lingo), Director gives those who want to spend the time learning the language the ability to create highly sophisticated computer programs that run within a Web browser. To see examples, visit www.shockwave.com.

As the bandwidth of the Internet increases, we'll likely see more and more Shockwave-style content produced for the Web.

Astound 6
Astound
$395

Originally designed as a direct competitor for Macromedia's Director, Astound has found a niche in the online business community. The product's most recent revisions include optimizations for business-style presentations. Users develop their content via a timeline interface, or they can use the quick-start approach by going through the handy Wizards that guide the user step-by-step through a typical process. On-line employee training for business, for example, can be handled quickly and easily through Astound's Quiz Wizard, which helps the user develop any number of Q&A slides. Output options include DHTML and a stand alone player.

Though Astound has successfully developed its niche in the business community by providing a simple, approachable interface, its main drawback is the large size of the files it creates. (Another reason for focusing on the business community: Astound files work great over a corporate computer network, where bandwidth is much less of a concern.) Also, if you're looking to develop non-business-related content, Astound may not be the best choice for you, because many of the tools it provides are business-specific.

Onward and Upward

This is an exciting time for Web enthusiasts. Web pages now provide much more dynamic content and interactivity than they used to, and as a result, the Internet is a more exciting place.

You don't have to be a professional Web designer to give your Web pages that kind of pizzazz. All you need is a little creativity and one of the nifty Web-animation products listed in our Buyer's Guide grid. Before you start animating, however, a word of caution is in order: don't over-do it. How often have you come across a page that had so much distracting animation and interactivity that you could hardly get to the content underneath? A sensible Web designer - whether amateur or pro - will use animations only where appropriate. When designing your pages, try to keep things interesting, but don't let the animation technology detract from the more important content of your site.