animation word.gif (14288 bytes)

Prepared by Iva Haddad & Suha Maria

divider.gif (4493 bytes)

Introduction:

GIF animations are easy to make; you use commonly available tools, there is no programming necessary, no plug-ins are required, and you use the common HTML tag to display them on your web page. A GIF animation is simply a single GIF file that is composed of a series of individual still images plus some timing information. Playing these images in sequence gives the effect of motion much like one of those flipbooks that you probably made as a kid.

There are two goals to designing optimum animations;

bullet.gif (491 bytes) First, to select colors that will display well in a variety of computer monitors, browsers and                  platforms.

bullet.gif (491 bytes) Second, to design animations that can compress well to small file sizes so they download quickly. With the Back-button and Stop button only a click away, many surfers will bail out waiting for a large, slow animations to creep across the page.

Creating A GIF Animation File:


There are two ways to start a GIF Animation file

ONE WAY TO START AN ANIMATION GIF

1.Select FILE/OPEN from the menu and select your first GIF.
2.Select FILE/SAVE AS and rename the GIF to it’s final animation name. Click on OK DON’T PRESS
[ENTER]!!! [ENTER] CANCELS!

SECOND WAY TO START AN ANIMATION GIF

1.Select FILE/NEW from the menu. A blank GIF Block list with only a HEADER will appear.
2.Start inserting images.

http://members.aol.com/royalef/gifmakf.htm

GIF Animation Instructions:

Here is an example of how to make an Animated GIF VERY easily.

1.Draw some pictures. For example, drew enter signs, each one with a different text color:


Enter1.gif (1322 bytes)     Enter2.gif (1332 bytes)   Enter3.gif (1320 bytes)

Save your pictures in one folder with the name of your GIF!
2.Next label the pictures with easy to remember names. labeled as these, e01.GIF, e02.GIF, and e03.GIF.
3.Now, open up your GIF Construction Set. Go up to File, then click on Animation Wizard. This will take you through an
EASY step by step guide. It will ask you stuff like if you will use this on the web, (your answer to this is probably yes),
and how much time you want between each frame of your animation(in hundredths).
4.When done with the Wizard, you might want to press view to see if it turned out right.
5.Now save it...give it a name like enter.GIF . It will also make a file with .THN on the end. The file of this was called
enter.THN.
6.Upload it. All you need to upload is the GIF file. Skip the other ifs along with the .THN file.
7.Look at your work! Remember, no lousy Navigator 1.0 will do!

enter.gif (2650 bytes)

Common Problems when Animating GIFs:

pushpin.gif (979 bytes) Large space below and to the right of the GIF; GPF on animation.

pushpin.gif (410 bytes) Looping animation repaint on screen when they restart.

pushpin.gif (410 bytes) Transparent animations leave trails or aren’t transparent at all.

pushpin.gif (410 bytes) Timing or transparency doesn’t take place at the correct points in the animations.

pushpin.gif (410 bytes) Animations get stuck, don't loop, or don’t animate at all.

pushpin.gif (410 bytes) Animated GIF Backgrounds, User Input, and Previous Image Removal/Disposal.

pushpin.gif (410 bytes) Timing Delays too slow, too fast, not at all.

pushpin.gif (410 bytes) Looping and stopping problems.

pushpin.gif (410 bytes) Animations are slow.

pushpin.gif (410 bytes) Graphic HTML tag not working.

buttonclick.gif (1061 bytes) to get more information " http://members.aol.com/royalef/topten.htm"

Summary:

GIF Animation is the poor man's format. Simple, but efficient enough for many
animations. From this report we learned the following:

GIF allows for any number of colors between 2 and 256. The fewer colors the less data and the
smaller the graphic files.

GIFs have the ability to store a local palette with each image inside it. GIF palettes use three bytes for each color.

Also, we learned that you need some software to make your animations, which are:

Diamond Bullet.gif (742 bytes) a graphic program to make the individual images

Diamond Bullet.gif (742 bytes) a GIF animation program to assembly the images into a single GIF file and add the timing information.

Diamond Bullet.gif (742 bytes) a compression program to compact the animation file.  

There are several good programs available for free or very inexpensively.

Paint Shop Pro 4.0

GifBuilder

 

References for the animated object on the page:

http://members.aol.com/royalef1/galframe.htm

http://www.bellsnwhistles.com/page13.html

http://www.gifworld.com/mainframe.php3?page=icons.htm

http://www.kaleidoscapes.com/kidstuff/dcard.htm

 

end.gif (2435 bytes)

Revised April 11, 1999

By Iva Haddad & Suha Maria, ihaddad@mail.gcccd.cc.ca.us & smaria@mail.gcccd.cc.ca.us

for CIS 212, Cuyamaca College