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.
Ninth New Collegiate Dictionary has this to say:
(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.
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.
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.
of the popular sophisticated browsers (Netscape Navigator 3.0
and Microsoft Internet Explorer 3.0) can see GIF89a animation
without additional software.
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.
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.
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.
is somewhat limited by the number of frames and by file size used
in an ad.
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.
animation is generally smoother and its creation is more intuitive
than in animated GIFs.
Director utilizes a PICT file format which allows for better color
depth than an animated GIF.
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.
designers are familiar with the authoring software.
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
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
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.
file sizes than both Shockwave and GIF89a to help with load time.
any other Web animation format, Flash files can be scaled.
Shockwave, it is fairly interactive, allowing the creation of
"hot spots" and clickable buttons within the file.
you don't have the Shockwave plug-in, you can't see it unless
you download and install the plug-in.
is not perfect. It tends to cause the graphics to "jag" in many
current designers are not familiar with the authoring software.
Programming Languages, Java and Java Script
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.
of the popular sophisticated browsers (Netscape Navigator 3.0
and Microsoft Internet Explorer 3.0) can see Java and Java Script
without additional software.
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.
is customizable to the exact needs of the project. A good programmer
will know how to write scripts that work.
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.
animation and effects are somewhat limited unless used in conjunction
with animated GIFs.
in Web Advertising
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.
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.
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
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 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
pages can be utilized many different ways.
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.).
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.
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.
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 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.