animated Gifs

back How to add animation to your Web pages

There are several ways you can add animation to your web pages. Moving pictures are so popular that it seems that almost every week, there is a new way to animate your site. You can use video clips or animated drawings. Some ways are complicated and some are very easy. How you do it will depend on the needs of your animation and how fancy you want to be.

Most web animation methods require your user to have plug-ins or small applications that get put with the browser so that the user can play your animation. Sometimes the animation takes a long time to load and creates problems for the user. You need to watch the size of your animation carefully.

Regardless of how you get the animation on your site, first you need to create the animation. For video, you need to have your idea, shoot the idea, edit, put in sound if needed and then get it ready for the web.

completed animationFrame 1Frame 2Frame 3Frame 4Frame 5Frame 6Frame 7Frame 8Frame 9

One fairly easy way to put video on the web is to convert your video to a QuickTime movie. Not everyone who looks at your site will want to wait while your movie downloads.You could put one frame of the movie on your web page and then link it to the movie so only those that were really interested would be waiting. They will also need the QuickTime plug-in to play the movie. Though some browsers come with that plug-in, it would be good to have a link on your page to where they can download the plug-in.

There are also many ways to create animated drawings or action logos such as ours, but the easiest is to create an animated GIF using GIF89A, a plug-in that comes with Adobe PhotoShop (you can also get it free on-line) and GifBuilder 0.4, a freeware program that you can also get on-line.

First you create your different frames in any draw program. We used PhotoShop because the layers feature makes it even easier. We put one frame of each action on different layers and then exported the file using the GIF89A plug-in. Then we opened the file using GifBuilder 0.4, which automatically made the animation frame by frame. You can also place any PICT or GIF in GifBuilder 0.4 to create a frame or you can delete frames you don't want. You can also loop your animation so that it plays continuously or as many times as you want it to. After you save your GifBuilder 0.4 file you can place it on your web page just as you would any other image file.

That's it, it's that easy. The hardest part is coming up with the animation idea and then drawing it out frame by frame. Remember, you need at least 24 frames per second to make the action totally smooth, but sometimes you can use fewer. An also remember to keep your file sizes small or your animation will take forever to load and may even crash your user.

Click here for Gifbuilder.