Hands-On Tutorial for GIF Animator
Introduction
Embedding
an animation in a larger graphic.
Text
animations.
About Microsoft GIF Animator
Note: this software runs only on Windows 95. To its advantage, however, are
these factors:
- The download file is slightly over 1 MB. (Unlike so much Microsoft "fatware"!)
- The software is free.
- It is easy to use, but it has enough features to produce some sophisticated animations.
- It follows a common Internet standard (the GIF 89 format) rather than try to set up its own that would require a browser plug-in to work.
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.
Back to the Table of Contents
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.
Back to the Table of Contents
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:
- The Options Tab contains
work session settings. This view (29 K)
is the initial display when you start up GIF Animator.
- Toggle thumbnails to be displayed "in position". If you
have small images atop larger images, they will be shown
in their frame (which is set to the size of the largest image)
according to their position settings.
- Toggle main window to be always on top
- Select a palette. The browser colours palette is the default.
- Select a dithering method. This will be used to adjust
colours in different images to a uniform pallette. The
colours of the first image loaded determines the range
of colours in the whole animation.
- Toolbar
This has the usual editting functions plus:
- insert an image or animation before the selected frame
- select all frames in an animation (however, not all image
settings can be applied to the selected set: position, time,
and redraw method can be; transparency cannot, since it is
dependent on the individual image's colour range.)
- move the selected frame down
- move the selected frame up
- run the animation
Use the Open button
to load the Small Blue Butterfly animation
into the editor. Two other tabs now appear behind Options.
Click on the Animation tab to bring its display forward.
- The Animation Tab (29 K) contains
settings for the animation.
- displays the overall screen size of the animation; essentially
this is the screen size of your largest image or the span of motion.
- allows you to set looping
- allows you to include a trailing comment concerning the animation.
- displays the number of images (or frames) in the animation
Now click the Image tab to bring its display forward.
- The Image Tab (28 K) contains
settings for each image. When an animation is loaded, the first image
is highlighted as being the active image. The settings displayed in
the Image tab are those of the active image.
- displays image's height and width
- set distance of image's left side from frame's left side
- set distance of image's top side from frame's top
- set how many centiseconds the image is to display
- set image's redraw method
- set whether an image is to have transparency and the
colour to be transparent
Click on the second image to see its settings. Then click on the
Preview button
to run the animation.
- Preview Screen(7 K) is where you see the animation run.
You can also stop it, rewind, fast forward, and advance or reverse
the animation one frame at a time. Play with the buttons -- you can't affect
the animation here!
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.
Back to the Table of Contents
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.
- Making the background transparent. If your page background
matches that of the animation, this may not be an issue. If you want the animation to
emerge from the page rather than be set off from it, be sure its background matches
your page. In the example you
will also see that transparency allows a background graphic to come through.
- Resetting spacing and time to smooth action. If the action of
your animation seems jerky, consider shortening the times between frames and the
distance moved. These simple modifications are quite effective in
another butterfly animation.
- Change looping. No looping, some looping (a definite count),
or infinite looping -- the choice is yours.
- Changing redraw method. Sometimes "flashing" occurs
because of an improper redraw method in part of the animation. "Tabbing forward"
through an animation in the preview screen can reveal where the "flashing" occurs.
Experiment with the redraw settings of that image, the one before it, and the one after
it to see if you can achieve a better transition.
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.
Animation without a transparent background. |
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.
- Start up the GIF animator.
- Open the butterfy animation in it. Did the Animator file browser remember the directory location of your copy of the butterfly?
- Click on the Image tab. The settings displayed are those of the highlighted image. This will default to the first image.
- 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.
- 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.
- 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!
- 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.
- 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.
- Save out your butterfly.
This button
overwrites the file you loaded in.
This button
saves the animation as a different file.
- 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.
- Start up the GIF animator.
- Open the multi-coloured butterfy animation in it.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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).
- 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).
- The actual width of the animation is now 437. Click the Animation
tab and change the animation width to 437.
- 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.
Back to the Table of Contents
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.
Ingredients:
- One editted photo saved in GIF format. Changes cannot be made to
the photo once it is part of an animation. Do your colour maninpulations,
cropping, and resizing first.
- One small animation in GIF format.
Steps:
- Load the animation into the editor.
- Be sure that all images have transparency set.
- Insert the photo as the first image of the animation.
- Set the location of each image in the original animation to the desired location on the photo.
- If the individual images of the original animation overdraw each other,
set their redraw method to "Restore Previous".
- If the individual images of the original animation build a picture, set
their redraw method to "Leave".
- Set desired looping, if any, for the animation.
- 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.
- Load the butterfly animation into the editor.
- Preview the animation. You'll see that its transparency is set.
- Click on the first frame to make it active. Insert the photo
with
.
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.
- Preview the animation. Notice that the gray background is what
is restored during the butterfly flight. The next step is to fix that.
- 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.
- 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.
- There are several ways to determine the Left and Top coordinates
you need:
- Load the original image into an editor which displays the coordinates
of your cursor as it moves within the image ( Group42 Viewer, Xara Webster,
Micrografx's Photo Magic all do). The X value is Animator's Left, and the Y
value is Animator's Top.
- Wildly guess.
- Estimate by using the smaller image's size as a ruler. If the image is
30 pixels wide by 40 pixels high and where you want to put it is "about 3 images
over and 2 images down", try a Left of 90 and a Top of 80 to position the
image.
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.
- Preview the animation. Redo the Left / Top settings until you are satisfied
with the butterfly's position.
- Set desired looping, if any, for the animation.
- 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!
- 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.
- Click to select the first frame and insert the Tea Table photo.
- 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.
- 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"?
- 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.
- 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.
Back to the Table of Contents
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 
|
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 
|
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 |

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!
|
Back to the Table of Contents
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:
- automatic anti-aliasing
- resizing
- rotation
- skewing
- partial transparency
- bit-map fills
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:
- Flashing:
- background with the text in the "dull" or "off" colour (background may
be a solid colour which will be made transparent in the animation)
- exact same text (font and size) in the "on" colour
- Colour Sequencing: One image for each colour or colour stage
in your sequence. If you want six colours, you'll need six images; if you
nine stages in a fade-in or fade-out, you'll need nine images.
- Incremental:
- one image for each word/phrase to be added
- optional: one background image (you can also set the animation size
to the "background" dimensions and use text with a transparent background)
- Movement: One text image and an optional background image.
- Shrink/grow: One image for each stage of the shrinking and
growing. (Use a vector package to prepare these for best resolution quality!.)
- Scrolling: one image for each step in the scroll. Since English
reads from left to right, the scroll needs to move in from the right. The phrase
"Do it now!" with a one character increment would require 10 images:
- "D"
- "Do"
- "Do "
- "Do i"
- "Do it"
- "Do it "
- "Do it n"
- "Do it no"
- "Do it now"
- "Do it now!"
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.
Back to the Table of Contents
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.
- Start up the GIF animator and open your "on" image.
- Insert your "off" image.
- Transparency was set by the editor used to create the download image set. You can turn it off it you like.
- Click the Animation tap to make that page active. Turn looping on and
make it repeat forever.
- 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.
- Click the Image tab and select the first frame. Try a setting of sixty for the
frame's Duration. Preview again.
- 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.
- If you will be displaying the animation against a page background, you
will want to set the images' Redraw method to "Restore Previous."
- 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.
- 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.
- 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?
- Have fun and trying building a flashing text animation of your own!
Back to the Table of Contents
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!
- Open the saved flasher in the GIF Animator.
- 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.
- Be sure that looping is turned on and set to Repeat forever in the
Animation tab page.
- Select all the images and set their Duration to 30. Preview the animation.
- 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?
- 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.
- 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".
- 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.
- 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).
- 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".
- 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.
- 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!
Back to the Table of Contents
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.
- 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.
- Click the Animation tab. We want a roomy "canvas" to work with. Set
the animation width to 400 and its height to 300.
- 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.
- Select all of the images. Set Left to be 100, Redraw method to be
"Leave", and Duration to 30.
- Select the second frame. Set that image's Top to be its height plus 5.
- Select the third frame. Set that image's Top to be its height doubled plus
10.
- Select the fourth frame. Set that image's Top to be its height tripled plus 15.
- 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.
- 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.
- 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.
Back to the Table of Contents
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).
- Select all the images and set their Redraw method to "Restore
Background" and their Duration to 30.
- Activate the Animation tab page and turn off looping.
- Preview the animation. You'll see the text move from an initial postion to
a final one.
- Want to add a motion reversal? Select the first images and copy it to the clipboard.
- Select the first image and paste in the clipboard contents. Shift the copied image to the last frame.
- Select the second image, copy, and paste before the last image.
- Select the third image, copy, and paste before the last pasted image.
Preview the animation.
- 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?)
- Try a U-shaped path. You'll find you need more images and less spacing between frames to preserve smoothness.
Back to the Table of Contents
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.