Making Animations <butterfly> Your Own
Hands-On Tutorial for GIF Animator ------- wooden divider --------

1.Introduction

2.Embedding an animation in a larger graphic.

5.Text animations.

------- wooden divider --------

About Microsoft GIF Animator

Note: this software runs only on Windows 95. To its advantage, however, are these factors:

Microsoft's Composer is intended to be the companion image editor to this. I did download the free preview of that when it was available, but found it to be inelegant compared to other image editors; most of these have smoother interfaces and functions simply because they are older and have been responding to user needs longer. Basically, if you have software that can produce/edit images in GIF 87 format, you have software compatible with the GIF Animator.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Obtaining Microsoft GIF Animator

You easily download this software from NoNags or ZD Net's shareware site. Since it is freeware, other sites probably carry it as well. I also found a copy of it on the enclosed CD of the March '97 copy of British computing magazine PC Plus.

The file is a little over a megabyte. It is a self-extracting, self-installing .exe file. Simply double-click on it in Explorer to begin the install.

The install sets up some extra directories you may want to get rid of, especially if you already have a directory structure set up to store your graphics. The GIF animator does not rely on them in any way, so don't be afraid to get rid of them if you find them to be additional hard-driver clutter you'd rather do without.

If you are viewing this on-line and will be returning here for the Quick Tour and Basic Edits sections, you will want to download these images as well:

To download: right-click on the image as it is displayed. From the menu, choose the "Save as" option and supply the location on your home disk you want it written to.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Quick Tour

Most animations will load into GIF animator just fine. Loading one in, running it, and seeing each image in the animation and its settings will give you a feel for what an animation is about and how the animator software works. The butfly.gif is what I used for the screen shots. You may want to decrease the width of your browser window and start up the Animator to actively follow along this tour.

The help file is concise, covering the Toolbar, Animation Tab, Image Tab, and Options Tab in its contents. These are the interface elements. I have screen shots of each with labels and other text:

Once you are done, close the preview window. Then close the Animator window. If you make changes to the animation by adding/deleting/reordering images or altering any settings for any image or the animation as a whole, you will be asked whether you want to save the animation.

Another noteworthy feature: if you browsed to a specifc directory when opening an animation, this is the directory that Animator will first show in its file browser the next time to you run it.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Basic Animation edits

An animation may look fine when you view it in a compendium, but show a few flaws as you seek to incorporate it into your page. You may also want to change it simply to better suit your purposes. These edits can be easily accomplished in Microsoft GIF Animator.

Setting the transparency of the images in an animation

One colour in a GIF image can be set to be transparent. This is usually the background colour -- although some interesting effects can be done by making one colour in an image transparent and letting a page background show through.

Likewise, one colour in the images of an animation can be set to be transparent. The Microsoft GIF Animator will display the palette of colours in an image so you can pick one to be transparent. Running the animation in the previewer will show you the effect of your choice. Sometimes colours in a palette will be very close, and it may take a few tries to get the right colour match from the palette to the background.

Opaque butterfly Animation without a transparent background. Transparent butterfly Animation with a transparent background. Notice also that the time lapse between images has been changed.

You can do these edits on your copy of the butterfly animation.

  1. Start up the GIF animator.
  2. Open the butterfy animation in it. Did the Animator file browser remember the directory location of your copy of the butterfly?
  3. Click on the Image tab. The settings displayed are those of the highlighted image. This will default to the first image.
  4. Click the Transparency box. White will show in the colour box since this is the dominant colour in the image. Just for interest, click on the colour box to see what the palette looks like for the image.
  5. Click the second image to highlight it. Change its transparency setting as well. All images have to have their backgrounds set to transparent for the entire animation to be transparent.
  6. Preview the animation. Does the wing flutter seem too slow? And isn't some of the full wing (first image) showing during the moved wing (second image)? Close the preview window and we'll change both!
  7. You can select all the images and reset the timing once (both images will have the same display time). Or you can set the timing of one to be slightly different than the other. Play with settings in both methods, previewing your results each time.
  8. At the same time, change the Redraw method to Restore Background. The method Leave does just that: leaves the previous image. When the butterfly background was opaque, this did not matter, but now that it is transparent, the transparency shows the previous left image. Preview to see the proper flutter.
  9. Save out your butterfly.
    This button overwrites the file you loaded in.
    This button saves the animation as a different file.
  10. Congratulations, you've made your first animation "your own"!

Note:You can also use the GIF Animator to set the transparency on a static GIF. Simply load it in, set the transparency, and save it back out.

Changing an animation's moves and timing

Compare the motion of the animation above to that below.

Shortening the move distance between successive images and increasing
the time lapse produces a more natural looking flight effect.

You can do these edits on your copy of the this butterfly animation. The animation itself is a little more complex than the blue butterfly was, and so are the edits. But you'll be coached every step of the way.

  1. Start up the GIF animator.
  2. Open the multi-coloured butterfy animation in it.
  3. Click on the Animation tab. Notice the animation width: 616. This accomodates the movement of the butterfly across the page. There are eight images in all to the animation.
  4. Click on the Image tab. The image itself is 77 pixels width. Transparency is set and the background is restored when the animation proceeds to the next frame.
  5. Let's see the effect of slowing down the frame changes. Select all the images with and change the duration to 30 (this will change in all of the images.) Preview the animation.
  6. Now it's obvious that the spatial gap between images is too big. Click the second image, then the third. You'll see that the left distance (the distance of the left edge of the image from the left edge of the frame) is incremented 77 pixels each frame.
  7. Since left position is different for each image in this animation, it has to be set individually. Start with the second image and increment each image's left by 40: #1 is 0, #2 is 40, #3 is 80, etc.
  8. Preview the animation and you'll see that its action is much smoother. It is also not as wide. You'll have add more images to increase the play width.
  9. Select frame #7. Copy it to the clipboard, then paste it. The copy will be placed before the image that was active and becomes the active image. Use the down arrow to it to frame #9. Set its Left to 320 ( 40 more than frame #8's).
  10. Do the same series of actions to frame#8: select, copy, paste, move it to frame #10, and set its Left to 360 (40 more than frame #9's).
  11. The actual width of the animation is now 437. Click the Animation tab and change the animation width to 437.
  12. Preview the second animation you've made "your own"! Save it if you like.

Note: be sure to use the 437 width for your IMG tag in HTML. If your editor sets the width for you, be sure it has set for the entire play width of the animation, not just one image width.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Embedding an animated graphic in a larger image

Sometimes an image only requires movement in a small subsection to be effective as an animation. The big advantage to this is that the resulting file is smaller. A smaller size means a shorter download time and even visitors with 14.4 modems will be able to enjoy animations.

With the GIF Animator, you can precisely place one image over another. The larger image, which becomes the backdrop, can be a drawn GIF or a photograph that has been converted to a GIF. The smaller image can be an actual piece of the larger image, or a different image altogether.

Embedding an entire small animation in a larger backdrop image means placing each of the animation's individual images where you want it to be seen. This is easy to do with GIF Animator.

Basic recipe for embedding an animation in a photo

The following recipe is written with Microsoft GIF Animator in mind. If you have a different animation package, you may have to adapt it.

Steps:
  1. Load the animation into the editor.
  2. Be sure that all images have transparency set.
  3. Insert the photo as the first image of the animation.
  4. Set the location of each image in the original animation to the desired location on the photo.
  5. If the individual images of the original animation overdraw each other, set their redraw method to "Restore Previous".
  6. If the individual images of the original animation build a picture, set their redraw method to "Leave".
  7. Set desired looping, if any, for the animation.
  8. Save the animation as a new file.

Note: Browsers can get confused about redraw methods if you have a transparent image over a "background" image and then you place the finished animation over a tiled background on a page. You may have to experiment and even compromise on the effect you want if it's vital to your design to place the animation over a tiled background.

Setting up for the hands-on tutorial

If you would like to go through this as hands-on tutorial, you will need to use the following images (download them now if you are viewing this on-line):

To download: right-click on the image as it is displayed. From the menu, choose the "Save as" option and supply the location on your home disk you want it written to.

A Simple Embedding

We'll first give the person in the grayscale photo a colourful pet. There's no great mystery in combining a colour image with a grayscale one, though you must put the coloured image into GIF Animator first. If you first load a grayscale image, then insert a coloured one, the Animator will convert the second one to grayscale in an effort to make palettes compatible.

  1. Load the butterfly animation into the editor.
  2. Preview the animation. You'll see that its transparency is set.
  3. Click on the first frame to make it active. Insert the photo with Insert button. You will see a "Loaded animation has been modified" window with the message: "The logical screen was too small for the images of the animation. Its size has been altered." This is normal, so hit the "OK" button. The new size will reflect the size of the photo image you just loaded. The photo will now be the first image of the animation.
  4. Preview the animation. Notice that the gray background is what is restored during the butterfly flight. The next step is to fix that.
  5. Click on the second image (the first of the butterfly animation) and make the Image tab sheet active. The redraw method is set to "Restore background", but the photo is not recognized as being "background". It is, however, the previous image, so change the redraw method to "Restore Previous". Now preview the animation and you'll see that the gray box has disappeared.
  6. I like the butterfly in my hair. Thank you very much. But how about putting it on my shoulder? To do that, you'll have to change the Left and Top coordinates of each butterfly image.
  7. There are several ways to determine the Left and Top coordinates you need: Yes, it would be nice if you could click on the smaller image and move it to whereever you want, but doing this elegantly in a free software package is extremely difficult. You can, however, additionally select the second butterfly image with a Shift-click and do the settings for both at the same time.
  8. Preview the animation. Redo the Left / Top settings until you are satisfied with the butterfly's position.
  9. Set desired looping, if any, for the animation.
  10. Save the animation as a new file. You've completed your first embedded animation!

An Advanced Embedding

The second embedded animation is a little more complicated. There are seven frames in the animation, but you'll see that many of the same techniques apply. You'll also have more variations to play with!
  1. Load the "mmmgood.gif" into GIF animator. Make the Image tab sheet active and review each image. They all have transparency set, and all have "Restore Background" as their redraw method. Each, however, has a different Top, and Left varies between two settings. Activate the Animation tab sheet and you'll see that looping is set to repeat forever. Now preview the animation.
  2. Click to select the first frame and insert the Tea Table photo.
  3. Preview the animation. Oh, oh, a trail of gray boxes... But why doesn't "Good!" leave one behind as well? Because the animation loop draws the full Tea Table image as it starts the frame set again.
  4. There are two simple ways to get rid of the gray boxes: set the redraw method of the "...mmm..." images to "Restore Previous" or set their redraw method to "Leave". Try both; the resulting animations will be different. What is the result if you set some to "Restore Previous" and some to "Leave"?
  5. You can leave the embedded animation location as it is, or shift it over to, say, above the cup. To do so, change Left for each image. Remember, you can Shift-click to additionally select images and change this setting for all images in the selected set, and selected images do not have to immediately follow each other.
  6. You don't have to keep the "...mmm..."'s in a block, and you can copy one to paste in to additional frames. How about a trail of "...mmm..."'s winding about the cup and food? Of course, more frames will result in a larger animation file, but feel free to play right now.

Congratulations, you now know how to embed a small animation into a larger graphic! And you've gotten more familiar with GIF Animator's capabilities.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Text Animation

Animating text is basically an easy thing to do, and you don't need to be a great drawer to do it. The Web abounds in Java applets that do text animation, simply because they don't have to add a lot of image bytes to their bulky runtime. But you don't have to be a Java programmer to put some effective, efficient text animations on your Web page.

This mini-tutorial will introduce you to some basic techniques for animating text in GIF animations. If you worked through the embedding tutorial, you've already done some text animation work!

As you experiment and expand with these techniques, you may come up with a very nice animation -- which is very big in size. Anything over 40 Kb is not practical to put on a Web page as a decor element. You can feature it on your page: "Click this link to see this really cool animation. " There are some ways, however, that you can check out to reduce the final size of your animation.

Possible Text Effects and their Uses

Effect Use
Flashing text

flasher

This can be quite rude if done with a very short timing or too-high contrasting colours. Moderation is the key in its effective use to:
  • highlight a page section by flashing its title
  • draw a reader's attention to warnins or special notes
  • enliven a page's logo
Colour sequencing

Colour changer

This is more subtle on the eyes than flashing. If you can play with transparency levels in your image editor (Xara Webster, Corel PhotoPaint, and Micrografx Photo Magic have this capability), you can do fade-ins and fade-outs as well.
Incremental text The second embedding example had you work with an incremental text animation. This is a very easy animation to put together, can involve a high level of creative play, and consequently can have a high impact on your viewer. Its uses are various:
  • word/image play
  • list features of a product or event ( see this one for a Fringe Festival).
  • build a phrase
Movement Moving text
The text goes from point A to point B (and more points if desired). It can change colour, size, and/or font as it moves. Hmm, now we're starting to get fancy.
Shrink/grow If you have the set of images to shrink text, you have them to grow it. You can combine them with movement as well.
Scrolling text The most efficient way to do these is with JavaScript (zero load time!). Here's the code to do them. Of course, you're stuck with one font, type size, and colour. Java will give you a wider range of type sizes and colours, but fonts are still limited -- and while you can easily get public-domain scrollers, your viewer still has to wait for it to download and start.

Be aware that while you can have colourful scrolling banner with a unique font, the more letters it has, the longer it will take to put together. Each frame advances the text one or two characters at time (for a smooth scroll). Your information will have to be very well served by a scrolling presentation to be worth the effort!

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Preparing Text Images for Animations

For a GIF animation you need GIF files, even if their content started out as a font somewhere. While some raster image editors let you embed text into an image (though that image may only be a block of colour), it is hard to work with the text as a unified element separate from the background for changing size and colour. You have better, easier control with a vector drawing package such as Corel Draw, Micrografx Draw, or Xara Webster.

Xara Webster is particularly easy to work with for text in images and has an excellent range of effects:

If you have a background image you want to add the text to, you can import the image into Xara Webster, create and edit your text on top of it (the text is a different object than the image), select the two together, and export as a single new image.

For text animations, you'll want control over your successive images. With Xara Webster, once you've exported out the copy of your base image, you can edit the text object, export that object as your second image, edit again, export your third image, etc.

For the effects catalogued above, you'll need the following image sets:

The hands-on tutorial covers flashing, colour sequencing, incremental text, and movement. If you don't have text images on hand you'd like to work with (or still feel unclear on what sort of images to set up), download these:

After going through the tutorial, you'll have enough techniques to set up a shrink/grow or scroller on your own.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

How to make a "flashing" text animation

You will need an "on" image and an "off" image. From the download set, use doit5.gif for your "on" image and doit1.gif for your "off" image.
  1. Start up the GIF animator and open your "on" image.
  2. Insert your "off" image.
  3. Transparency was set by the editor used to create the download image set. You can turn it off it you like.
  4. Click the Animation tap to make that page active. Turn looping on and make it repeat forever.
  5. run in the animation in the previewer. Warning: the effect is similar to a strobe. Obviously, in the interests of public safety and your viewer's comfort, the timing needs to be changed.
  6. Click the Image tab and select the first frame. Try a setting of sixty for the frame's Duration. Preview again.
  7. The "on" image just flashes by, doesn't it? Select the "on" image and set its Duration to 20. Preview it. You can save this as is now for reuse in the next tutorial. If you decide to save later work, use "Save As" and give the next version a different name.
  8. If you will be displaying the animation against a page background, you will want to set the images' Redraw method to "Restore Previous."
  9. If you want to have the image flash for a short time and then stay "on", set the loop counter to something like 20 or so.
  10. If you want the text to be the "off" colour when looping is done, copy the "off" frame to the clipboard and paste it back into the animation. The copy will paste before the active frame. Make the copy active and move it down with the down arrow to the last frame. Set its duration to zero. The flashing will not be affected, but when the animation stops, the "off" image will be left in view.
  11. Try the variations in step 8,9, and 10 with a basic Web page of your own. What kind of background tile does something like this work best with? Put some text on the page and try reading it with the text running. Are some variations of the flash timing more distracting than others?
  12. Have fun and trying building a flashing text animation of your own!
Table of ContentsBack to the Table of Contents ------- wooden divider --------

How to make text change colour

You will use the complete download set for this: doit1.gif, doit2.gif, doit3.gif, doit4.gif, doit5.gif. If you did the flashing text tutorial and saved the animation, you can use it as the start for this animation. You have the first and last frames already in place!
  1. Open the saved flasher in the GIF Animator.
  2. The download set was created in a colour order going from darker to brighter. So insert doit4.gif above the last image, doit3.gif above that, and doit2.gif above that.
  3. Be sure that looping is turned on and set to Repeat forever in the Animation tab page.
  4. Select all the images and set their Duration to 30. Preview the animation.
  5. Play with some Duration variations. Speed up or slow down the colour changes as you like. Do you like the effect if some have longer durations than others?
  6. Do a "Save As" with a new name. (A Save will overwrite the opened animation, and we don't want that!) Let's reverse the sequence of the one in the editor.
  7. Move the first frame to the bottom with the down arrow key. Now move the new first one to above that. Keep doing this until the yellow image is first. Preview the animation. Do another "Save As".
  8. How about going from dark to bright to dark in the same animation? Select the first frame of your current bright-to-dark. Insert the dark-to-bright you saved out in step 6. Its images will be loaded in "above" the bright-to-dark set. Preview the animation.
  9. To reduce the animation's file size, take out the redundant brightest image and darkest image. If you like the longer duration on the brightest and/or darkest, reset the Duration on the remaining image(s).
  10. But you'd rather go from bright-to-dark-to-bright-again? Do a "Save As" to a new name on the animation you've been working with. Click the "New" button on the toolbar. Open the dark-to-bright animation (saved in step 6) in the editor. Select the first frame. Insert the bright-to-dark animation (saved in step 7). Again, take out the repeated brightest and darkest image to reduce storage. Make any Duration changes you'd like and do another "Save As".
  11. The same techniques can be used to set up fade-ins and fade-outs if you can produce images with partial transparency. Figure on five or more degrees of transparency for the fade to be smooth.
  12. Notice that no positioning of images was done. What it all images had their Redraw method set to "Leave" and each image was offset by ten pixels in Top, Left, or both? Activate the Animation tab and change the animation size to 100 more in its width and height before doing this experimentaiton. Have fun, and if you think of more variations, try them! These tutorials are intended to be a springboard to your creativity!
Table of ContentsBack to the Table of Contents ------- wooden divider --------

How to build an incremental text display

If you did the extra variations in the previous tutorial, you've already practice the basics of incremental text animation. You also worked with on in the introduction to basic animation edits.
  1. Start up the GIF Animator. If you are already in it, do a "Save As" on what you were working on and start a "New" animation.
  2. Click the Animation tab. We want a roomy "canvas" to work with. Set the animation width to 400 and its height to 300.
  3. Open one of the "doit" gifs (pick your favorite colour of the set). Copy it to the clipboard and then do three pastes of it into the animation. You now have four images that will display one on top of the other. Preview the animation. Of course not much happened.
  4. Select all of the images. Set Left to be 100, Redraw method to be "Leave", and Duration to 30.
  5. Select the second frame. Set that image's Top to be its height plus 5.
  6. Select the third frame. Set that image's Top to be its height doubled plus 10.
  7. Select the fourth frame. Set that image's Top to be its height tripled plus 15.
  8. Preview the animation. The four images will now be displayed down the animation space. Note that you could have as easily used four different text images.
  9. Let's see the effect of varying the Left setting. Leave the fourth frame as it is, but successively decrease the Left of each frame above it by 30: the first will be 10, the second 40, and the third 70. Preview the animation and see how the resulting text "curves". Do a "Save As" on this; you'll be using it as the base in the next tutorial.
  10. Here's another variation to try: place the four images in the four corners of the canvas. Select the last image and insert your saved flasher three times. Move the last image to above the flashers. Using shift-click, select the six flasher images. Set their Top to 100 and their Left to 125. Preview the animation. Unfortunately, you cannot tell different parts of an animation to loop different amounts; that is why you have to duplicate the flasher to get at least a partial flashing effect.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

How to produce moving text

If you save the animation as was suggested in the previous tutorial, you can start this tutorial with it. Otherwise, you'll have to load four copies of an image place them in the staggered position outlined in the previous tutorial (steps 2 through 9).
  1. Select all the images and set their Redraw method to "Restore Background" and their Duration to 30.
  2. Activate the Animation tab page and turn off looping.
  3. Preview the animation. You'll see the text move from an initial postion to a final one.
  4. Want to add a motion reversal? Select the first images and copy it to the clipboard.
  5. Select the first image and paste in the clipboard contents. Shift the copied image to the last frame.
  6. Select the second image, copy, and paste before the last image.
  7. Select the third image, copy, and paste before the last pasted image. Preview the animation.
  8. Vary the amount you change placement and duration. How far apart can images be placed and timing slowed before you lose smoothness? (Remember the second butterfly in the first tutorial?)
  9. Try a U-shaped path. You'll find you need more images and less spacing between frames to preserve smoothness.

Table of ContentsBack to the Table of Contents ------- wooden divider --------

Shrink those GIFs!

These techniques apply to the individual images that make up animations:
Decrease resolution While it is fine to work in 300 pixels/inch (if you have enough memory to support it) to capture detail and precise colour, a resolution of 72 pixels/inch is quite ample to display Web graphics. Less than one percent of the terminals in use today even have a resolution as fine as 72 pixels/inch.
Colour Reduction If you have sixteen colours in your image, but it is stored as if it had 16 million, you're gobbling unneeded bandwidth when you send it out on the Web. Even your colour photos will often be fine in 256 colours. Keep your originals intact, but save out reduced versions with these tools:
  • Group42 Graphic View (freeware; 16 bit)
  • Xara Webster (shareware; 32 bit); does a superb job of optimizing an image's pallette to 256 colours.
  • PolyView (shareware; 16 bit)
  • GIF Wizard (web utility) will do colour reductions for you.
Size reduction Halve the width and height of an image and you reduce its size to one fourth of its former bulk. You can reduce by cropping or by shrinking (often called "resizing" in image editors).

Using small images that detail only the portion of the larger image that is changing in an animation is the one of the best ways to keep an animation small.