Microsoft GIF Animator

Ukio · (#1 (**permalink**))

You've decided to use Microsoft GIF animator. It is a good choice if you have Frontpage 98, though you may require an additional program to convert the frames into GIF format. If you don't have time to find a program like that right now, don't worry. Feel free to download all the images in this tutorial so you can create the animated GIF and get used to working with the animator. If you haven't taken the 2D design tutorial, I suggest that you do so since the methods of drawing used in this tutorial are explained there.
Ok, now to the real stuff. To begin making an animated GIF you need to know what you want to animate, and how you want it to move. Let's say you want to animate a circle to make it bounce like a ball. Here is how you need to go about doing this. First you need to open a drawing program.
Once the program is open, set the size of the canvas to 2 by 2 inches. Next draw a circle that's small enough that it can be seen moving when animated (See diagram 1). Save this images in a new folder as circle001.bmp

Diagram 1.
Once a circle like the one above has been drawn, take the select tool and box in the circle. Move the selection of the circle up a bit (See diagram 2).

Diagram 2.
After an image like diagram 2 has been created, select the circle again with the selection tool in Paint Brush. Move the circle down just past the original position (See diagram 3). Save this image as circle003.bmp

Diagram 3.
After all three of these images have been drawn you need to convert all three of the images to GIF format. To do this, open each of the frames in an image converter, and save them in GIF format. This will make the images compatible with Microsoft GIF Animator. If you don't have a program to do a conversion like this just download the diagrams on this page. Now you are ready to animate the circle.
Using Microsoft GIF Animator

It is an easy process to animate a circle. To begin, open up Microsoft GIF Animator. On the GIF Animator screen there should be a tool bar with a folder icon. Click that icon and open the first image (circle001.gif). This should fill-in one of the boxes on the left of the animator window. This is your first frame.

To insert more frames choose the icon on the top with the page and a plus sign on it. Insert the next image you made (circle002.gif). This should make another thumbnail on the left. Highlight that thumbnail by clicking on the image. Move the image below the second image. To do this just press the down arrow on the keyboard or the down arrow icon on the toolbar. Insert the first image again and move it below the second frame using the same method as the insertion of image 2. Now insert the third image(circle003.gif) and move it below the all the frames. Your animation is almost done.

You can play the animation by pressing the play button on the left of the "?" icon on the toolbar. This shows how the animation looks when played once. To make the animation play a couple of times click on the tab "Animation" on the right of the screen. After the tab has been clicked click the box that says looping. Here you can insert the number of times you want the animation to repeat or have it repeat forever. After you are satisfied with the end product, click the Save As icon on the toolbar and save your animation. Now you can insert your animation on your web page. Here is what the animation would look like if you used the Repeat Loop Forever option with the frames on this page.