Animation on the Web
by Paul M. Carhart

In the increasingly diverse world of Web sites and ads on the World Wide Web, it is becoming harder to make a site or ad stand out from the others. One way to expand design possibilities is by utilizing movement within your site or ad.

Webster's Ninth New Collegiate Dictionary has this to say:

animate (v.) : 1) to give spirit and support to : encourage 2) a : to give life to b: to give vigor and zest to 3) to move to action 4) to make or design in such a way as to create apparently spontaneous lifelike movement.

Naturally, such dynamics would set apart any Web site or ad on the Internet. Since Web browsers are capable of viewing many different formats of animation, it is important to be aware of a browser's possibilities, including the capabilities and limitations of each animation format.

GIF89a

The most common form of Web animation is the GIF89a, more commonly known as the "animated GIF." Pioneered by Compuserve, a GIF file is merely a graphics file that has been saved in the GIF format that was pioneered by Compuserve some years ago. An animated GIF is a series of these files that have been scripted and timed to run in sequence. Each new image or frame replaces the previous one, creating the illusion of movement and allowing the message to be played out over the course of several of these frames. These files can be scripted to loop continuously, stop after a given amount of run-throughs or stop on the last frame of the animation.

Pros

Both of the popular sophisticated browsers (Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0) can see GIF89a animation without additional software.

Animated GIFs can be made "transparent" so they do not have to appear rectangular in shape and are perfect for putting on a site that has a textured or colored background.

GIF files have an indexed color palette that allows colors to be edited out to make files smaller, increasing load time in some instances, especially if low bandwidth is a problem.

Cons

GIF files can have only 256 colors maximum, less if quick loading is desired, this does not fare well for photo realistic graphics with shadows and shading.

Movement is somewhat limited by the number of frames and by file size used in an ad.

 

Shockwave

A very popular way of getting animation onto a Web site is by utilizing Macromedia's Shockwave software. One reason for its popularity is that animation of this type is created in Macromedia Director, a program that is far and away the standard in interactive multimedia authoring (i.e. - interactive CD ROMs, product demonstrations, software tutorials, etc.). This means that many multimedia designers already know how to create the animation. Historically, this gave Macromedia a built-in user base when the technology first emerged and created a quasi standard. Indeed, Shockwave was the only way to put animation on the web until animated GIFs recently came to the forefront.

Pros

Shockwave animation is generally smoother and its creation is more intuitive than in animated GIFs.

Macromedia Director utilizes a PICT file format which allows for better color depth than an animated GIF.

Macromedia Director is an interactive medium which means that Shockwave files can have "hot spots" for the mouse to roll over and click on. It can be scripted to run much like an interactive CD. This brings a higher level of interactivity to the Web project in question. Entire games and stories have been generated in Shockwave format and put up on the Web.

Most designers are familiar with the authoring software.

Cons

Shockwave files require the user's browser to download an enabler, a plug-in that allows the browser to load the animation. This is often time consuming and inconvenient since the user would first go to a given site, find out that Shockwave animation is being used, then go to the Macromedia site and download the plug-in. From there, the user could go back to the site in question and finally be able to view the animation. This could be a timely process, especially for one with low bandwidth, just to view some animation. However, the good news is that once the plug-in is installed, the browser will see all other Shockwave and Flash (see below) without any fuss whatsoever.

Shockwave files tend to be fairly large, requiring a load time above and beyond the time needed to get the plug-in. However, they are usually worth it.

Flash

Relatively a newcomer to the game, Flash is becoming a popular means of creating animation on the Web, especially for interstitial pages and ads. Like Shockwave, Flash (previously named Future Splash before being acquired by Macromedia) requires the user to have a plug-in installed in the browser. However, since it is also a Macromedia product, it utilizes the same Shockwave plug-in. Flash animation differs from Shockwave in that it is largely vector-based graphics which keeps the file size smaller than the usual Shockwave file. Unlike Shockwave, however, Flash is a relatively new program that few designers are familiar with, making it less commonly encountered on the Web.

Pros

Lower file sizes than both Shockwave and GIF89a to help with load time.

Unlike any other Web animation format, Flash files can be scaled.

Like Shockwave, it is fairly interactive, allowing the creation of "hot spots" and clickable buttons within the file.

Cons

If you don't have the Shockwave plug-in, you can't see it unless you download and install the plug-in.

Scaling is not perfect. It tends to cause the graphics to "jag" in many cases.

Most current designers are not familiar with the authoring software.

Programming Languages, Java and Java Script

Much of the animation utilized on the web can be created by a programmer utilizing Java and/or Java script. These "applets," as some of them are called, can create movement on a site without having to go into graphics programs and create images. Examples of such movement are text scrollers, drop down menus, and mouse roll-over animation.

Pros

• Both of the popular sophisticated browsers (Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0) can see Java and Java Script without additional software.
• These kinds of movements are easily edited. When information in a text scroller, for example, becomes obsolete, the programmer merely puts in the new information instead of the time consuming process of re-creating an animated GIF or Shockwave file.
• Programming is customizable to the exact needs of the project. A good programmer will know how to write scripts that work.
• Java and Java Script can be a fairly interactive language, allowing the programmer to write scripts that cause the user to interact with the elements of the site.

Cons

• Dynamic animation and effects are somewhat limited unless used in conjunction with animated GIFs.
• 
  

Animation in Web Advertising

Now that you know a little about what is possible regarding animation on the Web, let's cover how you can use that knowledge to make your advertising dollars count. There are many different ways to advertise on the Internet.

Ad Banners

The term "ad banner" has come to mean a variety of things. Most high traffic sites that offer advertising space offer one form or another of ad banner space.

In the past, the dimensions for these ads differed greatly between each site, requiring ads to re-designed for every site for which they were slated to run. As of this writing, most of these sites have changed to a standard banner size of 468 x 60 pixels. Some sites also utilize what is termed the "half banner" which is exactly that: 234 x 60 pixels. Unfortunately, all of the sites still vary in actual size (measured in kilobytes) and usually range from 8k to 15k.

Nearly every site offering ad space requires the ads to be in GIF format. Most sites now support animation (GIF89a) but some still do not. Because the medium of the Internet is always changing, there are some higher-end sites that are now beginning to take Shockwave and Java-encoded ad banners. This evolution will certainly continue to support new technologies as they become available.

Interstitial Pages

An interstitial page is one that appears between the link the mouse has clicked on and the true destination of that link. It usually displays an image or a message, then forwards the user on to the desired destination.

Interstitial pages can be utilized many different ways.

• Pay off a static or a mystery-creating ad by having that ad link to the interstitial page. All forms of animation can be utilized on the interstitial page (i.e. - GIF89a, Shockwave, Flash, Java, Java Script, etc.).
• Give the user a choice of destinations on the interstitial page when they come from an ad, and before the page automatically forwards the user to a default destination.
• Use an interstitial page to advertise products or services within your own site. When the user clicks on a link, a quick interstitial page can come up, giving the user an opportunity or choice to make. This is a great way to introduce new products or spotlight a product or service on your site.
• Set up an empty interstitial page for an ad that forwards the user to where you want them to go. The hits on this interstitial page can then be counted to find out how many people clicked on the ad. This gives you independent access to your ad statistics, usually well before the reports will be generated.

PointCast

The PointCast Network runs animated ad spots on all of their channels and on their screensaver. These ads are much like Shockwave animation in their capabilities except that they are not interactive. Because of the popularity of PointCast and the high amount of traffic, these ads are a desirable means to drive viewers to a given site. PointCast ads entail smooth animation and a 256 color palette, making picture quality similar to the that of high-end animated GIFs with the smoothness, abilities and many of the effects of Shockwave animation.

Related Information

This article was originally written for Toshiba America's 1997 "Guide to the Internet."