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 Intel 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 breakneck speed.

These days, you can find animated figures all across the Internet! There are a number of technologies
that web designers use to create animation, including:

 Animated GIFs
 Dynamic HTML
 Java
 Shockwave and Flash
In this article, 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).
These factors have forced Internet innovators to come up with a number of clever tricks for delivering
complex content over limited connections.

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 either JPEG files or GIF files.
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.

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 scripting
languages, such as Javascript, to access 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 you.
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 your browser.
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 Programs Work.