(Continued — 2)

Most timeline-based animation tools use "tracks" instead of layers, which is more analagous to audio or video editing tools than Photoshop layers. In practice, though, one you get used to the idea of tracks being pretty much the same as a layer, it's not much more difficult than working with frame-based tools. Plus, you get the added benefit of being able to more easily specify when certain content is "on" or "off" over a period of time. For opening "movie trailer" style animations on a Web site, the timeline approach is the only way to fly.

In Figure Two you can see a complex timeline-based animation created in Flash 5 which includes audio, and time-based events. The three frame examples show the animation changing, as well as the timeline changing over time based on content becoming active.

Graphics In Graphics Out

There are many ways to get your graphics and animations onto the Web in the two most likely forms, GIF and/or Flash. In fact, many applications can export both from the same work files.

The most popular animation tool for the Web is inarguably Macromedia's Flash 5. This powerful tool potently brings together a slew of technologies to serve up animation to the masses effectively and now includes advanced scripting support. Whether you want to create animated cartoons, presentations, or "movie trailer" style openings for your Web site, Flash is the king of the hill when it comes to being the format everybody wants to work with. Flash can create animation in other formats, too, including GIF, QuickTime, and AVI.

Adobe LiveMotion is a powerful tool that is somewhere in-between ImageReady and AfterEffects in the Adobe family. It brings true timeline-based animation to the familiar Photoshop and Illustrator workspaces. It adds features like basic audio editing (trim, pan, levels), time-based filters, creation and editing of vector graphics, and per object compression (versus global compression). LiveMotion is a natural "step-up" if you're comfortable with Photoshop and ImageReady, and want to do more complex animation. It's also a good choice if you use Adobe Illustrator. It doesn't offer all of the interactivity of Flash yet, but it does offer Web links, HTML, and much of the most common needs of the average Web animator. It also supports Flash export.

For GIFs, there are many dedicated applications including GIFanimator5 from Ulead, which has added round-trip functions in their newest 5.0 version, allowing easy import from Photoshop, PhotoImpact, and Paint Shop Pro. For ultimate compatibility, it will also export to Photoshop layers, and Flash.

Boxtop Software's GIFmation 2.3 offers a novel feature, in that it supports QuickTime 4.0 transitions, allowing for some interesting video effects without having to build transitional frames manually. It also exports Flash.

Beatware's e-Picture Pro adds a few differing features to your basic all-around Web animation package, like 3D text from within the program, and the ability to import 3D object files. Additionally, it's one of the few that can export to RealVideo format in addition to GIF, Quicktime, SVG, and Flash.

Corel Draw 10 now includes Corel R.A.V.E, which allows Corel graphics (.cdr files) and Photo Paint files to be animated using a timeline approach. These can be exported as both animated GIFs and/or Flash.

Free tools for the Mac include Yves Piquet's GIF Builder, which is a straight-forward tool to convert multiple image frames into animated GIFs. It is also the tool I used for all of 1996 and much of 1997 to create all of my early Web animations. For Windows there are more than fifty shareware applications which allow simple to complex GIF animation, and far too many to list or review here (visit Download.com, or Tucows.com, and search for "animation").

Many Photoshop users choose Adobe's ImageReady or LiveMotion because of their tight integration with PS layers and built-in filters and text formatting. ImageReady is not a dedicated animation product, but does allow for many simple tasks like common banner ads, animated logos, roll-overs, and the like.

Finally, Macromedia Fireworks is not strictly an animation tool, but provides better frame-based animation than ImageReady because of its "live effects" features.

In Practice

Bob Self, an animation professional who creates fictitious Web site content and simulated computer applications for television production (including Boston Public, Ally McBeal, Gilmore Girls and Grosse Pointe), uses different tools for actual Web delivery than for film production projects.

"Typically, I use Adobe After Effects and Macromedia Director for production purposes and Adobe LiveMotion for web content," says Self. "Most of the work I do centers around bitmap (as opposed to vector) art. Since most of my source images originate in Photoshop, After Effects and LiveMotion (both of which allow round trip editing in Photoshop) are the obvious choices for me. Also, because the LiveMotion timeline is so similar to After Effects, I find it easy to work in either application."