Current Article All Articles About the Author Q&A Podcasts Teachnology Blog

As sound provokes the ear, animation captures the eye. People pay attention to motion on a Web page. Moving objects can help tell a story or explain a process. An animated diagram may explain a series of events better than any other media. This week's article provides some hints and tips for working with simple animation.

Modern web-page editors such as Dreamweaver makes it easy to use animation - especially Fireworks and Flash animation - on a Web page. But, like sound, you must first prepare the animation outside of the web-page editor, save it, and later insert the animation into the web page.

Preparing Animation

The two most common forms of animation found on the Web are animated GIF or PNG images, and Flash movies. Animated GIFs can be created with Photoshop or with programs such as GIFBuilder and GIF Animator. Flash animations are created with Macromedia Flash. Macromedia Fireworks can prepare PNG animations that are very similar to GIF. The process of making an animation depends on which form you are using.

Making a GIF Animation

To build a GIF animation you first prepare a series of still images of the same size, one slightly different from the next, so that when they are displayed one after the other in rapid succession, they create the perception of movement. The images are most often prepared in an image-editing program such as Photoshop. Then you import these images into the GIF animating program; set the timing, transparence, looping, and other parameters; and save them in the animated GIF format. GIF animations are good for small moving logos and simple banner ads. All of the browsers can display animated GIFs without a plug-in. The animation is saved into the appropriate Web site folder with a .gif filename extension.

Fireworks Animation

Fireworks is best for small vector graphic animations of shapes. You draw the shapes directly in Fireworks, and then use Fireworks' tools to stretch, shrink, move, or rotate the shapes over time. Fireworks animations are saved in the Portable Network Graphics formation with the .png filename extension and are read by all the latest browsers without a plug-in.

Flash Animation

Flash is the most complete and most complex of the animation programs described here. It can help you create vector graphic animations that travel quickly over the Web and look good on the screen.The process of creating animation with Flash works like this:

1. Create or import the graphic elements. Flash provides tools to draw shapes and text, and to set their colors. You can also import images from other sources. These graphic elements will appear on the stage, and also show in the timeline. For best results, put each item into its own layer.
2. Create keyframes. In the timeline, you set up the beginning and ending frames (called keyframes) of the animation of each element. The keyframes in the illustration are indicated with a black dot. The number of frames between the keyframes determines the length (in time) of the animation.
3. Modify the graphic elements in the keyframes. Animation involves some kind of movement or change over time. You can animate the object's location, rotation, transparency, or shape. This is done by setting these attributes in the two keyframes, one at the beginning of the sequence, and one at the end.
4. Insert a motion tween. This creates the intervening frames between the beginning and ending keyframes. In the timeline in the illustration you can see the motion tween indicated as an arrow that stretches between the keyframes.
5. Try the animation. By playing the frames in sequence, you can see how the animation works. You can also test the animation in the Flash Player at this time.
6. Modify the animation.

No matter what your source of animation, make sure it is saved in your Web site folder, with a proper filename and extension.

Inserting Animation

All animations are added to the Dreamweaver document with the Insert menu item. If you are inserting a GIF or Fireworks (PNG) animation, use Insert -- Image. For a Flash animation, use Insert -- Media -- Flash. The GIF and PNG animations will display their first frames in the Dreamweaver document window, while the Flash animation will appear as a gray rectangle. To view the animation, use File -- Preview in Browser. Avoid changing the size of an animation by stretching or shrinking it in Dreamweaver. The results may not be as smooth or viewable as in their original size.

Controlling Animation

Dreamweaver provides no control over GIF or PNG animations; these will simply play in the browser in the manner in which they were created. If you want these types of animations to loop, this parameter must be set in the software you used to create the animation. For Flash animations, you can use Dreamweaver's Properties window to control the looping of the animation and determine whether it plays automatically or waits for the user to click on it.

Where to find animation tools

This article mentions many different tools for creating and inserting animations into a web page. Most are available for download on a free-trial basis at the following web sites:

• Dreamweaver: http://www.macromedia.com/software/dreamweaver/
• Flash: http://www.macromedia.com/software/flash/
• Fireworks: http://www.macromedia.com/software/fireworks/
• GIFAnimator (Windows): http://www.ulead.com/ga/trial.htm
• GIF Builder (Macintosh): http://www.apple.com/downloads/macosx/imaging_3d/gifbuilder.html
• Photoshop Elements: http://www.adobe.com/products/tryadobe/main.jsp#product=40

To learn more

Animation with Flash: The Web Wizard's Guide to Flash, by Michael Kay, Published by Addison-Wesley, June 2002, ISBN 0-201-76434-2

Using Dreamweaver: The Web Wizard's Guide to Dreamweaver, by James G. Lengel, ISBN: 0-321-14265-9, Publisher: Addison-Wesley, Copyright: 2004