Web Based Animation Tools

There are many different ways to incorporate animation into your web site, ranging from the most simplistic animated graphic to the most advanced "interactive" Flash module. For the purposes of TCNJ course web site development, animation is broken down into two different categories.

Basic animation can be likened to the flip-books of yesteryear. It is necessary to draw an individual "frame" of animation depicting each discrete state of the movement you are attempting to convey. After this has been accomplished, the images are assembled together into a self-contained package that can easily be inserted into a web page.

The most common type of basic animation is the animated GIF file. Some examples can be seen below:

The advantage to using animated graphics like the ones above is easily seen - they are mildly engaging and easily inserted into existing web sites in the form of an image file. The disadvantages are many, though. Animated graphics by nature are much larger than their "static" cousins. This occurs because you are effectively adding an additional graphic (or frame) for each bit of motion you wish to simulate. Animated graphics do not allow for any interactivity as well. But they definitely have their niche, and will continue to be used for quite some time.

To get started creating animated graphics, you first need to draw each individual frame of animation. You can do this in any popular image editing software package. If you're a novice, begin by using the Paint program. Paint can be located under START->PROGRAMS->ACCESSORIES. Draw each frame individually and save each one as a separate file.

Next, you need to combine these files into one cohesive unit. To do this, you need to utilize a GIF animator program. Two of these programs are linked below. Please note that you need to download an "unzip" program to open the archives. The most popular unzip program, Winzip, may be downloaded free of charge from http://www.winzip.com.

Please note that TCNJ does not support the above products. If you have trouble with the program, please contact the vendor directly.

That's pretty much it! Once you've generated an animated image, you may follow the directions located here on how to insert an image into a web page.

Advanced animation is bit more complex than the simple flip-book paradigm outlined in the basic animation section above. If you wish to create anything more than a basic, infinitely repeating series of images, this is the section for you.

The primary tool used to create advanced animation is Macromedia Flash. TCNJ currently has a limited usage license for Flash, and access to the program will be distributed on an as-needed basis. If you are interested in working with Flash, please contact the Instructional Technology Coordinator at kapp@tcnj.edu.

Rather than outline the rather long list of projects that can be created using Macromedia Flash, we will present a number of demonstrations that outline some of the broader features that this technique can support. The list below is by no means complete. Please note that the Flash Plug-In is required to view any of the movies below. If the animation does not show up, visit the Macromedia Website to obtain the plug-in.

Genre	Description
"Advanced" Basic Animation	A simple demonstration of the powers of Macromedia Flash. File created in under 5 minutes.
Tutorial Animation	A more extensive demonstration of how Flash can be used to illustrate difficult concepts.
Interactive Animation	A technical illustration take to the next level. Contains a slight level of user interactivity.

All movies were created by Craig Kapp. Please request permission via e-mail if you wish to use any of the demos above.

A more complete tutorial will eventually be housed here. For now, please check it out as a work in progress by clicking here.