Revised April 12, 2007

The one thing most people don't even think about when making an animation with Ulead GIF Animator 5 (GA 5) is the Frame Removal Method. They just make their animation, save it in GIF format (and hopefully UGA format as well!) and forget about it... But knowing what the frame removal setting does can be very handy.

GA 5 usually sets this up nicely for us by default, with it's "Smart" removal method setting. It usually determines nicely what removal method to use in the GIF file created. Once you have saved your animation in GIF format, you can open the GIF file to examine what GA 5 used for the removal method for each frame.

The Frame Removal Method tells the web browser playing the GIF animation how to remove a frame in preparation for displaying the next frame. It's like the web browser saying, "Okay, I've shown that frame and want to show the next one, how do I remove it?"

Frame Removal dialog box The Frame Removal Method for a frame is found by checking the Frame Properties for a frame. This can be done by double-clicking the frame in the Frame Panel.

The methods available are:

Sometimes we have to change the Removal Method... so it's good to know how it works to do it correctly. A couple examples follow...

Example 1

You've opened and edited a GIF file - you removed the background color (with the Magic Wand) to make it transparent, but now it looks a wee bit strange...

gophers original gophers ghosting
Original Background Removed

The gophers in the animation on the right are leaving "ghost" images of the previous frames behind! Why?

If we examine the removal method for all those frames, it's set at "Do Not Remove." As a result, the next frame is being drawn over the other one. Remember, when you create a brand new animation in GA 5, the "Smart" setting is used. But when you open a GIF animation, the removal method will be whatever was used when that animation was saved originally.

If we set the removal method for all frames as "To Background" or use GA 5's "Smart" setting, it will then be displayed as we want.

gophers

That looks a lot better.

Example 2

We can take advantage of the "Do Not Remove" method in some cases. For example, we want to make a simple animation of text being typed out, such as this one:

I Love Animation

Note that the first frame starts with the letter "I" and ends with a blank frame of ½ second duration...

Most folks would add the text with the Text tool, then use the "Split text" function, then Distribute to Frames. As would I. But that's where the similarity ends. The other folks would then be manually adding the appropriate letters to frames, as this is what you will see after doing the above steps:

I Love Animation - missing letters

Instead of clicking the little "eye" button to add the letters to the frames, the far easier way to do this is to change the removal method for all the frames to "Do Not Remove." The one exception is the second-last frame, the one with all the text now showing. We set that frame's removal method as "To Background," because the last frame in the animation is a blank frame. If we leave it as "Do Not Remove," then it's not removed, and the last frame is not blank as we want it to be.

Try doing your own version of Example 2...

  1. Open GIF Animator 5 and click the "New" New button. Choose whatever canvas size you want.
     
  2. Select the Text Tool Text Tool from the Tool Panel. Click in your workspace and enter whatever text you want.
     
  3. Text optionsWith the text object still highlighted in the Object Manager, go to the Standard Toolbar and click "Edit" and select "Crop Canvas."
     
  4. Right-click on the text object in the Object Manager, mouse down to "Text" and select "Split Text."
     
  5. You will now have many text objects in the Object Manager. While they are all still selected, click the "Distribute To Frames" Distribute to frames button in the Standard Toolbar.
     
  6. Frame 1 will be selected in the Frame Panel. Scroll to the last frame and click on it to select it. Now click the "Add Frame" Add Frame button. This last frame we're leaving blank.
     
  7. Scroll to Frame 1 of the animation, hold the SHIFT key on your keyboard, and click on Frame 1 with your mouse. All frames should now be selected.
     
  8. In the Standard Toolbar, click "Frame" and select "Frame Properties." Change the Removal Method to "Do Not Remove."
     
  9. Now select just the second-last frame of your animation. Open the Frame Properties of this frame and select "To Background" as the Removal Method. Set the Frame Delay of the last frame to 200 or so.
     
  10. Click the Preview tab in the Workspace to see the finished result. It should be playing like the one below.
     
    I Love Animation!
     
  11. Optimize and save as a GIF. We're done!
     

Now that you're armed with that extra bit of information, what can you think of to take advantage of the Frame Removal Method? Footprints walking in the sand? An animated progress bar? Hmmm...

I hope you enjoyed this tutorial and learned something from it. Happy Animating!


For my tutorial on Ulead GIF Animator 5's basics, click the following banner...

Ulead GIF Animator 5 banner

longship bar

Valid HTML 4.01 Transitional  Valid CSS!