The working of web animation and technologies used to create them

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!

Introduction to How Web Animation Works

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.

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 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.








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 animation.

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.