Images on this site were compressed using e-Vue MPEG4 technology in 2001, which was groundbreaking at the time for its DRM component and higher compression than JPG, however e-Vue is no more — we are transitioning these images to JPEG for 2004.
The most compelling imagery on any Web site is that which moves, and invites interactivity. More so than large graphics, or contrasting color schemes, content that moves draws the eye right to "the action," whether it be an important message, a new feature, or the ubiquitous banner ad. Whether the content is of value, or communicates anything the visitor needs to know is not always of importance to an animator. The movement is the thing.
If you spend a lot of time on the Web, you may have noticed a substantial increase in the number of commercial and private sites which have added animation of some kind to their design strategy. Beyond a subjective perception of an increase in animation use, industry reports bear this out in production dollars.
As an indication of the growth of Web based animation, the 2000 Roncarelli Report on the Computer Animation Industry shows an 89 percent increase over the prior year in Web animation production. Web animation accounts for 4.3 percent of the 25.4 billion dollar global commercial computer animation production market.
To paraphrase a famous TV commercial, if you haven't done Web animation yet, you will.
Fluid Formats
The most popular formats for online animated graphics include the animated GIF, Flash and Shockwave. For the first two, there are many ways to design and publish for these delivery formats, while for the latter you pretty much need Macromedia Director.
The animated GIF format is the most compatible, and can be viewed by almost every Web browser created since 1996 except AOL 3.0. The GIF89a format, called an animated GIF, is an extension of the original GIF format, but adds multiple frames, and the ability to set the length of time each frame is visible, as well as option to loop x number of times, or forever. GIFs are bitmaps and can be created in most image editing applications, with a maximum of 256 colors, and transparency options.
Macromedia's Flash is the child of Shockwave, is less complex and offers fewer scripting options than its parent. Flash is a vector graphic delivery format, and can include bitmaps, sound, and even video and HTML. It requires the Flash browser plug-in be downloaded and installed prior to viewing any content. While milllions of people have the Flash player, and it can be considered the de-facto standard for vector-based animation delivery on the Web, not everybody has it, and thus there is no guarantee that every site visitor will be able to view the content.
Shockwave provides a way to take the more complicated features of Director/Authorware's Lingo scripting to build highly interactive gaming and relational environments and place those games onto the Web. Much more than animation, Shockwave can deliver entire applications. It requires a larger (more than 1MB) player than Flash does, and it not usually recommended for normal Web site animation. Shockwave and Director really fall into the beefier "multimedia" category, and will be covered in a future article.
Another graphic format is around the corner, and that is Adobe's Scalable Vector Graphics (SVG) format. While this format offers a mixture of the benefits of Flash and Adobe's PDF, ostensibly vector-based Postscript, it adds XML, the emerging standard for high-end Web programming. While this format will undoubtedly offer some advantages to Flash for document publishing, it remains to be seen how viable it will be for animation in the Web marketplace. Most "name brand" graphics products are starting to ship with SVG support, as are development versions of the browser plug-ins.
Frames and Timelines
The main difference between the two methods of Web animation, are frame-based and/or timeline-based.
Most GIF animation products take the frame-based approach with each frame having the option to have certain content layers either on or off, and the ability to do transitions, and/or "tweening" of some kind. Tweening is a term that comes from cel-based animation, of doing the "in betweening" cels and for our purposes refers to frames which are created by the application.
FIGURE ONE: Example of frame-based animation, showing banner ad creation in Adobe ImageReady.
Frame-based tools are ideal for animated GIFs because they allow you to work quickly for common tasks like animated banners or moving logos. In these instances, the primary concern is small file size and a limited amount of changes from frame to frame. When the optimimum size of a typical 468x60 ad banner is less than 15k, you generally have no more than six to eight frames to work with.
If you view Figure One, you will see the top example is of two frames with the text in two different locations. In the bottom example, you will see the "tweened" frames which are created by the program (ImageReady) to show the transition between the two original frames.
The other method of Web animation is far more complex, but offers many more options. Timeline-based animation uses a pointer that travels along a timeline (e.g., frame one, frame two, etc.) which comprises both frames and seconds. The number of frames per second (fps) can be set in order to synchronize images with other media, such as sound which is time-based instead of frame-based.
