These days, you can find animated figures all across the
Internet! For example, the How Stuff Works
Animation Tour contains dozens of the best animated
figures from How Stuff Works articles. There are a number of
technologies that web designers use to create animation,
Shockwave and Flash
In this edition of How Stuff
Works, we'll give you an introduction to how all of
these technologies work, along with their advantages and
disadvantages. We'll also take a look at the newest
innovations that will further expand Web animation!
Evolution of Web Animation In its brief
history, the Internet has been constantly and rapidly
evolving. Part of this evolution has been driven largely by
two opposing forces:
Internet authors and readers always want to be able to
transmit more elaborate sorts of content over the Internet.
To reach most users, the file size for Web content has
to be small enough to transmit quickly over standard
Internet connections (telephone modems).
factors have forced Internet innovators to come up with a
number of clever tricks for delivering complex content over
A Flash animation from our nuclear
radiation article. This is a fairly complicated figure,
but it fits in less than 7,000 bytes!
In the following sections we will look at how each
technology and how they handle these competing forces.
Animated GIFs One of the biggest innovations
in the history of the Internet was the ability to integrate
photographs and other illustrations with text on a web page.
The illustrations come in the form of bitmap files. A
bitmap file simply describes the color of each pixel in
the image. To decrease the file size of these bitmap images,
several different techniques are used to compress the
image data. Typically, Web sites post these sorts of images as
files or GIF
Animation is just a series of still images shown in
sequence, so the most obvious way to add animation to a Web
site is to post a series of bitmap images that the user's
browser displays in sequence. This sort of animation, called
GIF animation, or GIF89, was the first Web
animation to catch on, and it is still very popular today.
The main advantages of GIF animation are that it is
incredibly simple to work with and it is automatically
recognizable to most Web browsers. With a shareware program,
such as GIF
construction set for Windows or GifBuilder
for Macintosh, all you have to do is provide the individual
bitmap images that make up the frames of your animation. You
then post the file and code the tag for the image, just as you
would with an ordinary static GIF.
The disadvantage is that you have to keep the animation
pretty simple to keep the file size down. After all, each
frame is a full bitmap image. Four simple frames transmit very
easily to most users, but when you get up to something like 20
frames, your file size could be too big. And you can't even
accomplish very much with 20 frames -- the fluid animation we
see in movies includes at least 24 still images every second
-- so animated GIFs are fairly limited. To create a movie of
any substantial length, you have to make pretty big jumps
between each frame, which means the animation is not very
fluid, as you can see in the example below.
The individual frames in an animated
The final animation.
This is an excellent way of illustrating a simple concept,
or just adding some eye-catching decoration to your site; but
Web designers and Web users found it to be wholly inadequate
for communicating more complex ideas or adding a real sense of
motion to Web sites. Furthermore, you can't add sound to a GIF
Dynamic HTML As we've seen, the main problem
with GIF animation is that each frame of the "movie" adds
considerably to the total file size. One way of getting around
this problem is to eliminate individual frames entirely.
Instead, you simply tell the computer to take one still image
and move it across the screen. In a sense, you do this with
your computer all the time, when you move the cursor across
the screen with your mouse.
Originally, Web pages were, for the most part, static files
-- that is, once you loaded them, they pretty much stayed the
same. This is inherent in hypertext markup language
(HTML), the basic programming language of Web pages. HTML
basically consists of simple tags that tell a Web browser
where to display Web page elements.
As the Internet continued to evolve, Web designers found
this static quality fairly limiting. They wanted to add
dynamic content to their Web sites -- that is, content
that could change once the user had already downloaded a
particular Web page. Dynamic HTML, or dHTML, is the term for
the software technology that makes this possible. DHTML
content is actually produced by using a number of complex
something called the document object model on your
Internet browser. Basically, the document object model (DOM)
controls everything about how a browser displays a Web page.
These days, almost all users have browsers that will expose
the DOM to scripting languages, so that this script can alter
HTML elements (to change the text color as you move the mouse
over a word, for example).
DHTML was not created with animation in mind, but it will
let you alter HTML elements in a way that will add movement to
a Web page. A dHTML script can simply tell the browser to keep
changing the placement of a particular image on the page, so
it travels around the screen. If you do this with several
different images, you can move a series of graphic elements
around each other to make interesting movies.
Like GIF animation, dHTML animation is automatically
recognized by most Web browsers, without the user having to
download any extra components. However, it is fairly tricky to
create dHTML content that works the same way on all browsers,
so this sort of animation is not nearly as simple as GIF
animation. Actually coding the animation program yourself is
quite difficult, but there are user friendly software
applications, such as Macromedia's
Dreamweaver, that will produce the correct script code for
DHTML is fairly limited in its animation applications,
because all it can really do is move still images around on
the screen. It's much more fluid than GIF animation, but for
many applications, it is a much less effective way of
displaying a changing image. DHTML is pretty much the limit of
a Web browser's built-in animation ability. To add more
complex animation abilities to the Internet, innovators had to
come up with programs that supplemented the users' browsers.
Java Applets Another way
to provide Web animation is through the universal,
network-oriented programming languages known as Java.
With Java, programmers can create applications that users
download off the Internet. Java-enabled browsers use a
virtual machine, a piece of software that recognizes
the Java language and translates it for the user's computer
system (Windows, MacOS, Unix). The virtual machine is
basically a kind of plug-in, and it must be installed with
Java Web content is generally created as programs called
applets. Applets aren't complete software applications
-- they work only in conjunction with a browser. There are all
sorts of things Web designers do with applets, and one of the
most popular applications is animation. The main advantages of
Java are that it works on all operating systems and it is very
flexible. You can create an animation program that draws
simple vector shapes for the individual frames, or one that
uses bitmap images. Java is particularly suited for creating
interactive animations and combining animation with other Web
page elements. For more information about Java, check out How Computer
Plug-ins In the early '90s, the Internet
really started to take off in popularity, and the number of
Web sites skyrocketed. There was suddenly a wide variety of
people producing Web pages, and they had all sorts of
multimedia content they wanted to be able to include. Rather
than trying to change browsers to recognize and display these
many different forms of content, Web innovators launched the
idea of browser plug-ins.
Plug-ins are programs that work with your browser to read
and play a certain type of file. They are relatively small
pieces of software, so it doesn't take users forever to
download them off the Internet. They are specifically designed
to work with a particular type of file, so they can accomplish
a lot of things that a basic browser can't.
Video Streaming video
generally uses a plug-in approach that lets you view video
content on the web. Web video can include sound and much more
These days, Web designers can use dHTML scripts to detect
whether or not you have a particular plug-in. If you don't
have it, your browser will display a message that tells you
how to download the plug-in. This varies from application to
application, but it often takes a good while to go through the
entire process, which is a definite disadvantage of handling
animation this way. If you already have the plug-in, most
browsers will start playing the movie as soon as enough of the
file has started downloading.
Different plug-ins work in different ways. Video player
applications such as QuickTime
Player show a sequence of still images, just like an
animated GIF or a movie on video, but they are able to
transmit the images faster by compressing and
streaming them. Compressing is the process of
simplifying the information that makes up an image so that its
file size decreases. Streaming simply means that the player
begins displaying the content before the entire file has
Even with these capabilities, this sort of movie file takes
a long time to download or has poor quality if you have a slow
Flash and Shockwave By
far the most common plug-ins for dealing with animation are
Flash and Shockwave, both from Macromedia. These are
vector-based 2-D animation viewers. The following
sections discuss Flash and Shockwave in detail.
Flash and Shockwave Macromedia
has had a great deal of success with two closely related
Flash is now the standard format for rich animation on the
Web, and Shockwave is a very popular format for presenting
more complex animated content. Unlike Real
Player and QuickTime
files, Flash and Shockwave movies actually appear as part of
the Web page and include a high level of interactivity, just
like a straightforward HTML page. The Shockwave player not
only plays animation, but also recognizes user input and then
controls how the browser responds.
An interactive Flash movie from our submarine
article. Click on the buttons to make the sub surface and
Flash and Shockwave are not the only formats for this sort
of animation, but they have caught on more than any other
similar format. Flash in particular has been successful
because it comes bundled with most browsers and can transmit
fluid, attractive animation very quickly.
Quick Download Time There
are a couple of different factors that make quick download
time possible. First, there is the nature of many Flash files
and Shockwave files. Unlike GIF animation, Flash and Shockwave
files are largely vector-based. This means that instead
of saving the picture as a series of pixel values, the
authorware program describes the image as a series of lines
and shapes, which it records as mathematical values. A
straight line, for example, is described by the angle of its
ascent, its coordinate position in relation to the other
shapes and its length in relation to the other shapes.
Describing images this way allows the program to save wide
sections of an image -- sections that might consist of
hundreds of pixels in a bitmap file -- as a couple of figures.
Both Shockwave and Flash can also use bitmap images, which
webmasters can condense and scale down to keep file sizes
small. These bitmap pictures can also be moved around the
screen by paths, much like still images moving around
in dHTML animation, which helps keep the total file size down.
Most Flash files are completely vector based, however, which
makes them especially quick to load.
When your images are produced this way, it decreases the
number of frames the animator has to create. Flash and
Shockwave technology can create tween frames very
easily between vector-based key frames, by calculating
the change in geometric information between the two images.
This takes up a lot less space than straight bitmap animation,
which has to store every frame as a unique image.
The other chief innovation is the way in which the files
are actually transmitted. Flash and Shockwave files are
streamed over the Internet so that the browser can
begin playing the "movie" before the entire file has
downloaded. Just as a server sends the text of a Web page
first and then any picture files, a Flash site can be
configured to send an introduction movie while the rest of the
Flash content is loading. Webmasters can code the file so that
a browser will start playing the movie once a certain amount
of the file is downloaded. This is timed so that each part of
the file is transmitted before the movie plays to that point.
This is also the way streaming video works.
Availability Flash and
Shockwave have caught on with so many Web users and Web
designers largely because of Macromedia's dissemination
strategy. These days, the plug-ins come packaged with the
major Internet browsers and computer operating systems, and
it's very easy to get the free plug-in if you don't already
have it. All installation procedures occur in the background,
so the user doesn't have to exit the browser program for a
lengthy download process. The authorware is expensive, but it
is readily available.
It's also easy to update the plug-ins, allowing Macromedia
to continually develop and then distribute new technology. The
company intentionally designed the Flash and Shockwave players
to adapt to future modifications, so the user doesn't have to
do anything to update the player but download the file. And
since these files are fairly small in size, it doesn't take
much time to do this. Additionally, if a site detects that you
don't have the newest version of the plug-in, your browser
will tell you, and direct you to the Macromedia site to
download the update.
The different animation formats on the Web all have
particular strengths and weaknesses. But many webmasters end
up using Flash, even when another format might be better
suited to their needs, simply because they know that most Web
users already have Flash capability; and if they don't, it's
really easy for them to get it. The universality of Flash and
Shockwave leads more webmasters to include Flash content,
which further spreads the acceptance of the formats.
The Difference Between Flash and
Shockwave Flash and Shockwave software applications
cover a lot of the same ground, and they are produced by the
same company, but there are a few significant differences.
Most of these are directly related to the origins of the two
file formats. Director, the software application used to
create Shockwave files, has been around for a long time,
longer than the Internet in its current form. It was
originally developed to create dynamic content for CD-ROMs, and it
is still used for this purpose. As dynamic content has become
more popular on the Internet, however, updated versions of
Director have included more features that tailor Shockwave
files for use on the Web.
Flash, on the other hand, was built from the ground up for
use on the Web. Macromedia adapted Flash from Future Splash
Animator, a vector art animation program. Macromedia's version
was tailored specifically for transmission over phone line
connections. So at their heart, Flash and Shockwave have two
different specialties. Consequently, they have a number of
contrasting strengths and weaknesses:
Flash files load more quickly than Shockwave files.
Shockwave is more versatile. You can create more complex
games, more elaborate interactivity and more detailed
You can use more types of files with Shockwave. You
could, for example, import a Flash file into a Shockwave
movie, but it doesn't work the other way around.
Flash is more universal. More than 90 percent of Web
users have the Flash plug-in installed, while a little less
than 60 percent have the Shockwave plug-in.
Flash creation software is cheaper. Director costs a
little less than $1,000, while Flash costs about $400.
Flash is an open-source
format. Anybody can see how it works and is free to adapt it
for their own purposes. Director uses a compiled file
format, so it is extremely difficult to modify the program.
With each software update, the two formats move
closer and closer together. Shockwave has better Web
capability with each version, and Flash gets more versatile.
Eventually, the two formats will probably be merged into one
comprehensive format that encompasses the best qualities of
Creating Flash and Shockwave Movies Flash
and Director are designed to be fairly easy and fun to use --
they both have a straightforward interface and many automated
tasks. The two programs handle movie creation somewhat
differently, and they have different names for almost
everything, but they share some basic components. To make a
movie, you need to manipulate the movie elements in three
different ways. You need to:
Create and edit the individual images that make up the
Arrange these images as they will appear in individual
frames of your movie.
Order those frames so that they form a movie.
Flash and Shockwave both have a means of importing,
generating and editing movie elements. In Flash, you store
these elements in the library; in Shockwave, they go in
the cast. In both programs, you assign these elements
any dynamic characteristics and arrange them on the
stage. The stage represents what will actually appear in
the final movie. Using the stage, you create key frames
that you position in sequence to layout the movie. In Flash,
the area for arranging your frames is called the
timeline, and in Shockwave it's called the score.
One reason you see so much Flash animation on the Web today
is that it is surprisingly easy to generate. The Flash
program, as well as Director, puts a functioning animation
studio right on your desktop, and automates a lot of the
complex tasks involved in multimedia. If you want a globe to
roll from one side of the screen to the other, for example,
you don't have to animate every frame of the globe as it moves
along; you simply tell Flash where the globe starts and where
it stops and assign it a rolling motion in between these
frames. For a good introduction on how to make Flash movies,
check out Webmonkey's animation
The Future of Web Animation The next big
thing for Web animation is 3-D Web graphics. This gives Web
users another level of interaction with online content. In 2-D
animation, the Web designer decides what you see, just as
animators decide what you see when you watch cartoons on
television. In 3-D
graphics, you can actually access a 3-D model, so you
control the display. You can turn the model around, activate
certain functions, and in some cases actually alter its
dimensions. How Stuff
Works has featured a few 3-D models of this sort. Click here
to see a 3-D champ car, and here
to see a 3-D engine.
As with Flash and Shockwave 2-D animation, you need to
download a plug-in to view 3-D Web graphics. There are already
a number of companies that have developed this software. Viewpoint
has had some success, and NxView
has a plug-in available on their site. In July, Macromedia and
announced that they were developing 3-D capabilities for
Shockwave. Users will be able to add 3-D to their Shockwave
players by simply downloading an update. Intel chose to work
with Macromedia on this project because of the success the
company has already had with disseminating multimedia players.
The companies hope that the Shockwave 3-D format will become
the Web standard for 3-D graphics.
The Shockwave technology has a way of scaling 3-D
graphics so that they work well with different connection
speeds. Basically, if you have a slower connection, the
Shockwave player will download a model with fewer
polygons, the geometric shapes that combine to form a
3-D model. This means that you'll lose some detail, but you
won't lose any image clarity or fluidity of movement.
This 3-D Web technology allows for all sorts of interesting
site content. One of the most promising applications is in e-commerce.
Instead of choosing products based on still pictures, online
shoppers will be able to look at the object from every angle,
as they would if they were shopping for the object in a store
at the mall. Some sites are also using 3-D graphics to create
"virtual dressing rooms." The user can create a 3-D model of
their body shape and see how different clothes fit that body.
This technology can also add a new level of content to
educational sites like How Stuff Works. We have already
published a few articles using 3-D graphics generated by
NxView, and we plan to develop more 3-D content in the future.
These graphics let users get a clearer picture of technology
and processes -- they can look at an engine from any angle,
just as if an actual engine were in front of them.
This technology is really amazing, and it will most likely
revolutionize the look and feel of the Internet, just as still
pictures and Flash animation changed everything up to now. In
a future article, we'll delve further into how this technology
works and what it can do, and focus specifically on what
Macromedia and Intel are doing to develop the Shockwave player
as the Web standard.
With more and more Web users getting high-bandwidth
connection, there will definitely be some big changes in Web
animation in the future. One such idea is to make the Web less
like a book and more like a video game -- you would access
information in a 3-D, interactive world. Another notion is to
make it more like television, with lots of high quality
animation and video. It really all depends on what Web
designers want to include on their sites, which in turn
depends on what Web users want to see. In any case, there is
every indication that the Internet will continue to evolve at