Gif Animation

Creating Animation for your Web Site
by Sue Vanderveen

rainbo_d.gif (2501 bytes)

Introduction

GIF animation, used appropriately, can really spice up a web page. While animations can be created in various formats including QuickTime, Flash, and Shockwave, for this presentation we will concentrate on GIF animation.    

Animations are a series of images linked in such a way as to give one the sense of movement. Think of movie film where frames are linked together then run through a projector to simulate movement on a screen.  Individual frames are first created using one of many graphic programs available.  After the images are created and saved in GIF format, animation software is used to create the 'film strip' by linking the images together.

There are several animation software programs on the internet which can be downloaded on a trial basis.  I selected Ulead's GIF Animator to learn to create a few fun animations and special effects for demonstration purposes.  At Ulead's web site there is an excellent How To tutorial and I will defer you to this tutorial for the lessons on creating animation.  My site will show a few simple animations I created and some of the special effects GIF Animator can do with them.

Block 1 and Block 2 below show the original 2 images I chose to animate.  Using the Animation Wizard in GIF Animator, I created the third animated block.

qbloc1.gif (1461 bytes)

Block 1

 qbloc2.gif (1461 bytes)

Block 2

 quilt1.gif (1410 bytes)

Animated Block

GIF Animator offers several special effect plug-in's to further add to the animation's creativity.  Below are a few of the many effects offered.  I applied the special effects to the simple 2 image animation I created above. Go to plug-ins and select the desired option. Within the selected option, additional modifications can be made such as the direction of the effect, number of frames and the speed of the animation.  There is also a preview option which allows you to view the animation before saving it to file.

Gif Animator also has an optimize wizard which reduces the file size of the animation by reducing redundant pixels, using a 64 pallet color scheme, and more.   The original file size and download times are listed along with the optimized file size and it's new, faster download time.  I used all the recommended defaults in the optimize wizard including reducing the palette to 64 colors.

Cube Effect quiltcube1.gif (21926 bytes)

 

Original Size:     48,114 bytes; 15 second download time
Optimized Size:  21,926 bytes;  7 second download time
67% reduction

 

3D Gate Effect

 quiltgate1.gif (10467 bytes)  

Original Size:      33,614 bytes; 11 second download time
Optimized Size:  10,467 bytes;  3 second download time
68% reduction

 
FX Iris Effect quiltirisopt.gif (18438 bytes)  

Original Size:      35,021 bytes; 12 second download time
Optimized Size:  16,587 bytes;   6 second download time
53% reduction

 
3D Peel Effect quiltpeel.gif (31820 bytes)  

Original Size:       31,820 bytes; 11 second download time
Optimized Size:   16,683 bytes;   6 second download time
48% reduction

 
3d Slide Effect quiltslide1.gif (12100 bytes)  

Original Size:       32,998 bytes; 11 second download time
Optimized Size:   20,898 bytes;   7 second download time
27% reduction

 

Using the Diamond A-FX plug-in and 2 other quilt blocks, I created this kaleidoscopic effect:
rosebud.gif (1995 bytes)

Rosebud
quilt block

 

  

+

 daffodil.gif (2154 bytes)

Daffodil
quilt block

  

=

 diamondblock.gif (24017 bytes)

animation using
FX- Diamonds A
 

After selecting the following individual button images off the internet, I linked them in sequence using the animation wizard, creating these simple animated buttons:

u-001.gif (1526 bytes) + u-002.gif (1526 bytes) + u-003.gif (1526 bytes) + u-004.gif (1526 bytes) + u-005.gif (1526 bytes) + u-006.gif (1526 bytes) + u-007.gif (1526 bytes) + u-008.gif (1526 bytes) + u-009.gif (1526 bytes) + u-010.gif (936 bytes) =  u-999.gif (1526 bytes)

bullet1.gif (1526 bytes) + bullet2.gif (1526 bytes) + bullet3.gif (1526 bytes) + bullet4.gif (1526 bytes) + bullet6.gif (1526 bytes) =  u-999.gif (1526 bytes)

Learning to animate GIF images has been an enjoyable and fairly easy lesson.  The difficult part is in creating your own graphic images. This requires, as mentioned before, having the knowledge of a graphics program for drawing the step by step frames to be animated.  As the tutorial mentions, they don't have to be complicated drawings.  In fact, the simpler the better. If you like animation on your web site, and want to do it yourself, download one of the many shareware versions of animation software off the internet and give it a try.

If you choose to use images off the internet as I have, please respect the copyright of the artists who created them.  Many will allow you to use the image for personal home page use but not allow its use anywhere else, including animations.  Ask their permission to use it.  Most will allow it and be flattered by the request.

  Links to graphic and animation programs 


You are visitor # Hit Counter

This page was created on October 28, 1998 and last updated on October 16, 1999. Please contact the webmistress if you have questions or update suggestions for the site.