How to make GIF Animations?

Fonte: AOL

NOTE TO THE READER: The next three pages cover the entire process of creating an animation.
  • First, the preparation of individual frames and what to consider
  • Second, putting together an animated GIF file
  • Third, looping animated GIFs and other information

At some point you will need to go to the SOFTWARE TOOLBOX to get software for your computer. If you run into a problem, go to the Common Problems of GIF Bugs pages for a listing of solvable and unsolvable bugs.


Constructing Animations

NOTE: Due to excessive size, this tutorial is now in three parts.

Some Thoughts about GIF Animations on the Web

1st Thought: make your images the right size, number of colors, and appropriate. The Conservation on the Web discusses this in length, explaining terms, concepts and what you can do to make your GIFs smaller. The Conservation page has a great example of how you or better software can reduce images greatly. On that page, a blackboard with an Apple next to it is animated over with the letters: A, N, I, M, A, T, E. Animating the whole blackborad, each time adding one letters would result in eight 2K 256-color images, or about 16000 bytes of animation. But by using the blackboard on the first image and adding images of just the letters (positioned with x,y coordinates) the same animation can be done in 3,960 bytes total(also speeded up the animation without any timed delays). Editing each image block allows for x and y positioning to place the letters where they belong. Not very difficult to do and extremely effective in conserving bandwidth. The animation looks identical. Some programs will let you input the seven large images and calculate the parts that change or add to each image. This is often called calculating "dirty rectangles".

GIF allows for any number of colors between 2 and 256. The fewer colors the less data and the smaller the graphic files. Not all software will let you set the bits per pixel for GIFs. Some programs will let you do 256 color, 16 colors, or black and white. Not all do adaptive palettes-that is construct a palette that is specifically for the colors you used in your image.

Making A Sequence of Animations

Well, first thing you'll need is a series of images that look like an animation sequence. Like this series of counter-clockwise spinning stars:

Animation sequence example

Each cell or frame of the animation changes slightly. Notice each star is in an identical "bounding box" of red. This gives a frame of reference for the animation, like the edge of a movie screen. If you don't work with a fixed-size "bounding box" each frame of your animation will shrink and grow by a few pixels as the object changes shape. When inserted into a GIF sequence, the object will shift up, down, right and left with each change of size. Like so...Sliding error(CLICK to replay)

I use Corel Draw, but you can use anything that you are comfortable with. You'll need to save each frame of the animated sequence into a separate GIF or other bitmap format. It you are using GIF Construction Set or another GIF assembly program, you may be able to save your animations into any format and import them when you insert the images into the final GIF. Each program accepts different images. Some only accepts GIFs. Some now accepts other movie formats, such as QuickTime MOV, AVIs, MPEGs, & FLiCs and convert them straight to a GIF89a animation. Newer software is also adding special effects, transitions, morphs, and other features which will generate in between images on certain simple types of animation. This saves you from producing individual images. Many of them are simple like, a sliding image, dissolving image, fade in/out. Advanced 2d and 3d animation programs will allow you to create models and vector paths to execute "actor" along. Some of them can be complex others simple, but more restricted.

Besides the above star animation, there is also another style that is a bit more difficult. The star works almost like a flip-book. It constantly replaces the entire "bounding box." But what if we wanted to show a ball bouncing around inside of a big box. To redraw the box every frame (GIF) would waste precious bandwidth in the download. Wouldn't it be nice if we could just draw the tiny ball and move it around the box. :->

Bouncing ballBouncing eraserClick on either image to replay them. Unfortunately Netscape doesn't allow this yet. The left image uses the Remove By Previous Image. The right Remove By Background. As you can see the right image of the ball is replaced by the background of the HTML page. This gives it the effect of an eraser. The left image should have had the effect of the ball bouncing in a box, but Netscape doesn't support Remove by Previous Image. Previous image should restore the image back to the way it was before the ball was painted on. I placed the last frame of the ball far below the box's bottom edge. This ball is outside the Header GIF89a Screen description of how big this GIF is. Consequently, since it has been placed "off-screen", it is not displayed.

But all is not lost. There is a way to do the above animation, with a little ingenuity.

The bouncing ball animation has the first GIF as a box. Then all the remaining GIFs as 32x32 pixel balls. The same GIF of the ball is reinserted over and over. I edit each image block and change the top and left position of each ball image to simulate movement over the image of the box. This will reduce size greatly, but means more up front work in getting the animation done. However, we still have the problem of the trail of blacks balls. I could reinsert a patch of the background after each ball's appearance. This would paint the background of the box over the ball. This effectively, is what the Previous Image setting would be doing. Yes, the flicker is annoying, but you may not have to paint over EVERY position like I did with this example. One way would be to have the ball's image include a "trail" of white that would paint over where it's been. Once again, planning and time can overcome what software can't (yet). This also brings up a buga bug in GIF Construction Set for Windows. The positioning of the images inside the GIF file is off by one pixel down and one pixel right. If you set the position at 0,0, GIFCon will position it at 1,1. Netscape does NOT make this mistake.

How will all this look to non-AnimGIF clients?

Non-animated GIF browsers will only show the first frame of your sequence. A few older ones show the last image but they have disappeared from the market. Having the first image being the only one seen can be a problem for certain effect. Say you want something to appear from nothing. The first frame is nothing and that's what non-animated browser will show-nothing. If I include a copy of the full end graphic it will ruin the effect. The best solution is a Javascript detection routine that will serve up different images, animated for known animation clients, non-animated for unknowns.

Scattered Tips & Tricks

Okay, so I didn't know WHERE to fit these in!

If you aren't looping your animations:

remember the last frame will be the final one, the one that will stay on screen.

you can remove the last frame completely, having the graphic apparently vanish once it has played.

If you are looping you're animations:

The first frame should be the presentable one. Most browsers will display this as a static GIF so this will make the most pleasant appearance in the most browsers.

Want to fade an image out? An easy way is to take the image into a bitmap editor. Use a spray paint tool, like the rudimentary one in Paintbrush. Set it to hard settings, no transparency. You want it to paint random dots of a specific color. Pick the color that will be your transparent color. Paint some random dots on the image. Save as a frame. Paint some more. Save as a frame. Continue till there is nothing left of the image. When sequenced in the GIF this will look this the image is disintegrating or, if in reverse, materializing. I used this on my EMAIL animation for the fade in of the letter, and the fade out of the hand. Both looked good, and the process was extremely quick.

Trying to think up some animations? STEVEMD showed us that animations can be more then decorative. He uses GIF animations to instruct home page visitors how to juggle. Unfortunately, the pages are no longer available. There are definitely some exciting applications out there, so be creative.

I like to create a directory for each animation and EXPORT or SAVE each frame of the animation into it. If the final animation will be called STAR.GIF, name each animation STAR01, STAR02, STAR03. I often get lazy and just name them S01.GIF, S02.GIF, S03.GIF.

Looking to use animation programs to help out with the process. Here are some recommendations from other visitors:

Hans Huter : When creating gif-animations on a mac, I found that nothing beats the combination of Macromedia Director + Gifbuilder :

- just animate your sprites in Director (keep the stage as
  small as possible, and the frame-rate very low)
- Then export the frames as picts (in a new folder)
- Open Gifbuilder, drag the images into the gifbuilder-window
- set the options and choose build from the file-menu..
- voila !

Although it may not be the most efficient in file-size, you can create animations in a matter of minutes rather than animating each frame in Photoshop, and corrections to the animation can be made in a few seconds if you have both the programs opened...

Glenn Steffler suggests using Gold Disk Animation Works Interactive, or better yet, Astound for Windows.

Fenil Patel suggests Egor to create animation on web by Sausage Software people. It is available to download.

Lisa Carter suggest this: After reading your tutorial, I noticed one of the major sections was on tips and tricks to force your gifs into a single color palette - which can be a lot of work, particularly if your images dither badly. I would like to *highly recommend* a great utility called "Dave's Targa Animator".

Contrary to the name, DTA works with much more than Targas. It will both read and write GIF files, as well as TGA, BMP, TIF, FLC, FLI, PCX and a number of other formats. DTA is a DOS command-line utility that was designed to process a directory full of numbered images and turn them into an Autodesk animation - although it will write to another directory and created numbered pictures, instead if you want it to.

DTA would be very useful for GIF animations because it can read a directory full of GIF files, calculate a single, optimized color palette, and then re-write the GIF files with the new, optimized palette - a big time saver.

DTA can also bulk resize images (with anti-aliasing!), and can do many neat fade and transition effects. DTA will also interpolate frames. (say, for example, you had an animation with 30 frames and decided that was way too big. DTA can cut that down to 15 images from averaged frames.) It will also do rotations, red-blue 3d and many other features.

Constructing Animations, part two

NOTE: Due to excessive size, this tutorial is now in three parts.


Creating A GIF89a Animation File

Start GIF Construction Set. (Register it to prevent a hideous fate from befalling you.)

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. Now 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 (I prefer this 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.

Why do I prefer it, here’s why:

The first image you bring in, should be the one to make the global palette. Even if you delete that image from the file afterwards. Why? Here’s my reasoning (If it is flawed someone please tell me) The global palette should contain the widest range of colors for all of the images. So I would think that if you have a frame where a rainbow of colors bursts open, insert that image first so that wide palette will be covered.

On a particularly troublesome set of images I found that color shifts were being introduced along the way. Especially with whites turning gray, greenish or yellow. I solved it by creating a composite bitmap of all the major images in the animations. Everything on a single large bitmap. I inserted that and created the Global Color table from it. I then discarded the image and began inserting the actual images in order. No more color shifts.

GIF89A HEADER & LOGICAL SCREEN DESCRIPTOR BLOCK

Every GIF stars with these two blocks. GIF Con lumps these two blocks into one. The Screen Block defines the extremities of the displayed GIF. A blank GIF has a default size of 640 by 480 pixels, width by height. This is the size of a standard VGA screen on an IBM Compatible computer. This logical screen is the amount of space Netscape will give to your image when displayed. This star uses a 90x90 logical screen to display a 60x60 image of a star. Notice the right-hand and lower borders.
(NOTE: Netscape's IMG tag attributes: HEIGHT & WIDTH, can scale a single image to any size. The scaling however, is based on the logical screen size.) These three star all have the same source file (STAR.GIF 59x59) but have been scaled to display at different sizes. Other browsers don't pay attention to logical screen or Netscape's HEIGHT & WIDTH attributes. 

    HEADER GIF89A Screen (640x480)

The size should be shrunk, typically to the largest dimensions of the inserted images. By this, I mean find the largest width out of all the files and use that. Then find the largest height of all the images and use that. Don't assume all your images are the same size. Most of the time they are not. Inserting a image larger than the screen size will cause a GPF in Netscape. Also, remember that this is your movie screen. Move part of an image off an edge and that part of it will not display in Netscape. GIF Con will show you the screen area by using a dotted lines to define it. Anything that falls outside the dotted lines, when viewed in GIFCon, will not be displayed elsewhere.

INSERT AN IMAGE

Click the INSERT button. Click on the IMAGE button. A file dialog box opens. Find your image file, or type its name in. DO NOT HIT [ENTER]! That CANCELS in version 1.0c! Click on the OK button.

If any colors in the image are not represented by the global palette, a dialog box will pop up with up to six choices. You must choose one of the active choices (inactive choices are grayed out). True color, 24-bit images, are internally converted to 256 color images in GIF Construction Set. GIF does not support more than 256 colors.

Check out the Image Palette page for photographic examples of the following options.

USE A LOCAL PALETTE

This increases the files size by as much as 779 bytes. A new palette of colors is generated for this image only. The only problem I see is some 256-color displays may not handle too many palette swaps very well. You may see what appears to be a colorful negative images, or flashes on screen.

USE A LOCAL GREY PALETTE

This inserts a palette that is composed of 256 levels of gray. Color #0 is black, color #1 is white, and #2 through #255 range from near-black to almost white. You can use this to convert a color image to grayscale. Though, because of sorted palettes this method of conversion will often leave the image very dark.

REMAP IMAGE TO THE GLOBAL PALETTE

Similar to DITHER below. GIFCon simply replaces colors absent in the global palette with one that is closest to it. REMAP is not a good option for photographic images.

DITHER IMAGE TO THE GLOBAL PALETTE

This means that GIFCon will repaint your image to make up for colors that are not in the global palette. This may include using a dot of red and a dot of orange next to eachother to get that odd brownish-orange color you used. This is known as dithering. This is best for photo-like images. Some detail may be lost.

USE AS THE GLOBAL PALETTE

You only get this option once. One image can have its palette copied into the global palette. Once done, you can’t choose another. For this reason I suggest picking your global palette first, rather than do it as an afterthought.

USE AS IS (MAY CAUSE COLOR SHIFTS)

This option causes a GPF in GIFCon when I go to save. Be very cautious if attempting to use it. What this means is what every color #0 is use that color. Whatever color#253 is use that color. You see GIFs work like a color by number set. If a particular pixel is color #197, the decoder goes to the color palette, finds #197 as paints the pixel that color. USE AS IS will simply use the GLOBAL palette. This option often does not work.

FIFTEEN BIT QUANTIZE

This option will produce more attractive images if your palette requires color matching and remapping. However it’s also pretty slow, especially on older machines. It does, however produce smoother gradients, and more exact representations of higher color images.

If you are running into real problems with color variances that cause GIF Con to perform color shifts, here's a solution. Create a bitmap that is a composite of all the pieces of animation, a large bitmap. Insert that composite into GIF Con so that it picks a palette that covers all the variation in the images. Then delete the image, and insert the sequence of animation remapping to the available colors.

The IMAGE BLOCK will now appear on the Block List. It will show how big the image is in pixels (width by height) and how many colors are in the image. 

    HEADER GIF89A Screen (640x480)
    IMAGE 503 x 86, 256 colours

If the image is wider or taller than your screen, adjust your logical screen to hold it. For the previous example it should be adjusted to read: 

    HEADER GIF89A Screen (503x86)
    IMAGE 503 x 86, 256 colours

Let’s edit the image block and see what options we have. Select it on the list, and hit the EDIT button.

You can specify the X & Y position of the image, relative to the SCREEN area defined in the HEADER GIF89A Screen Block. Zero (0) left and zero (0) top means the image starts at the upper-left hand corner of where the GIF is placed on your web page. A top of 12 means the images starts 12 pixels down. A left of 25 means the image is displayed 25 pixels to the right. Negative values are not allowed, so if you have an image that should move left, start with a number higher than zero and decrease the number to show movement to the left. The same is true for moving up, negative top values are not allowed. GIFCon has a bug that misinterprets these values. WIth a zero top and zero left, images are inserted 1 pixels down and 1 pixel to the right. Netscape does not make this error.

INTERLACED IMAGES

In the Image Block you can specify an interlaced image. Interlaced images in an animation may not interlace past the first frame. My first animation was interlaced for every frame. I would consistently see interlacing occur on the first image, but not on any of the subsequent frames. A GIF must be set to be SAVED as interlaced, to be displayed at interlaced.

GRAPHIC CONTROL EXTENSION BLOCK

Control Blocks can be inserted into the GIF file. Only one should be inserted before each image. It should be placed immediately before the image it is meant to control. Let’s INSERT a CONTROL BLOCK before the image we just inserted. Click on the block ABOVE the image (probably a header block if you’re following the tutorial). Whenever you insert, the new block will always appear just below what is highlighted on the current list of blocks. Hit the INSERT button, choose CONTROL. 

    HEADER GIF89A Screen (503x86)
    CONTROL
    IMAGE 503 x 86, 256 colours

Let's edit that CONTROL Block by either selecting it and hitting the EDIT button, or double-clicking on it.

Transparency

Now you get to specify a color to be transparent. Click on the check box for transparency. The default transparency color is 0 (usually black). By clicking on a color, you get to see the current palette associated with this image. Select the color that should be replace with transparency. If you see multiple instances of the desired color (this happens often with white) choose the first instance of it in the map (reading left to right and down). In version 1.0F and later, an eyedropper feature is provided. With this you can simply point to the color you want to be transparent. This is much easier. You should use the VIEW button to verify that the transparency has the desired effect. Only one color can be transparent per image.

You must insert a control block with transparency set before every image to get an animation with a consistently transparent background. Control blocks only affect the first image that follows it. If you have an HTML-defined background, you must have a control block before the FIRST image with transparency set. EVEN if it doesn't need it, set it and point it to some color. IF the FIRST image, is preceded by a Control Block WITH transparency ON, Navigator will recognize the HTML-defined background. Otherwise, it uses the color set in the Navigator menus for the background. This is usually a gray.

Lastly, For transparent animations to work you MUST use remove by background for EVERY frame unless you want a trail of previous images left on th screen. If remove by previous is implemented, this will become an alternate choice. Until then use "background".

There is a bug in Transparency with frames. My Link Cruiser page often displays the white background of the logo, rather than transparently displaying the background JPeG image. This only occurs in this framed instance. It is a problem in beta6.

Wait for User Input

This would normally cause a pause that would wait for some form of input from the user (or an expired timed delay) before preceding. Netscape ignores this.

Delay

This Delay is measured erroneously in seconds by GIFCon before version 1.0G. It should be 1/100ths of a second. This makes it near impossible to test time delays in earlier versions of GIFCon. Get 1.0G from the Alchemy Mindworks site. Netscape handles the timing this way: display the IMAGE, waits the desired time, performs the removal. The next control or image block then takes over. This is correct according to the GIF specifications. The star should revolve over 12 seconds. The afterimages occur because the remove by is set to nothing (see below).

GIF Construction Set fixed the timing problems in 1.0G but introduced a serious problem by supporting Looping. When viewing and animation in GIF Con you cannot interrupt the rendering on a frame. That is, as it is drawing a frame, it ignores input. During delays you can ESCape to stop an animation from playing. If you implement an animation WITHOUT delays, DO NOT PLAY IT IN GIF Con 1.0G. If you have a loop in it, you will never be able to stop it. You will have to Control-Alt-Delete and reboot your computer.

Netscape 2.0 does have some problems with this. Beta3 will hang on any timed delay in a GIF. Beta4 through the final version for Windows contains a bug that prevents the GIF from playing faster than 34/100ths of a second between images. Also note that if you have a long delay, like two seconds, the STOP button will gray out and Netscape will stop taking processor time to play the GIF. When the long time delay is up, the STOP button becomes available again, and Netscape begins executing the remainder of the GIF. While this is not a bug, it prevents you from stopping the execution of the animation while it is idle.

Remove by

This determines what is done with the IMAGE after the time delay or user input has occurred. There are four actions.

Nothing - Don’t do anything. When overwriting the entire frame with the succeeding frame this is the best and quickest choice. “Nothing is done with the image” This will cause afterimages in transparent images though.

Leave As Is. - Same as Nothing. Under other circumstances these two options may be treated differently.

Previous Image - This is supposed to restore the image to the way it look before this image was laid down. Netscape doesn’t support this yet (2.0beta5). It is the same as Nothing for now. You can emulate this by restoring the wiped out area yourself with small cropped "patches" of the original image

Background - Paint the background of the Netscape browser over the image's area. This is normally gray. It is set in the Navigator Menu under, OPTIONS, GENERAL PREFERENCES, COLORS. You say you want your HTML-defined BACKGROUND or BGCOLOR to be used? Well it is a little unconventional, but the first image needs to be preceded by a CONTROL block with transparency turned on (any color-doesn't matter.) Then the HTML set background GIF/color will be painted over the image’s removal area. Use this with transparent animations.

Creating A Stream of Images

Okay, so now you've inserted your first image, it's time to create that "stream of images" that GIF allows us. With the last IMAGE BLOCK in GIF Construction Set highlighted, you now want to insert the second image in the series, then the third, then the fourth, then the fifth, etc. Like this... 

    HEADER GIF89A Screen (503x86)   <- Check width and height
    CONTROL
    IMAGE 503 x 86, 256 colours
    IMAGE 502 x 86, 256 colours
    IMAGE 499 x 86, 256 colours
    IMAGE 501 x 89, 256 colours     <- Note height (89)
    IMAGE 504 x 88, 256 colours     <- Note width (504)

Notice that the example images I used here are changing shape slightly. Image #4 is the tallest at 89 pixels, and image #5 is the widest at 504 pixels. Both of those dimensions exceed our Screen (503x86) so we need to increase the Logical Screen in the Header accordingly or risk a GPF in Netscape. If you need to position each image within the logical screen, you will need to EDIT each image. Yes it's tedious, but if you need to, you need to. If these images have a transparency color, you will need to insert a Control block before each and every one. Now, here's a little short cut. Unless you need to alter the timing on the individual images, you will probably have a series of identical control blocks: same transparent color, same time delay, same removal by. If you set one Control Block, you can EDIT/COPY it into the clipboard. Then click on the first image (so the next will be inserted at the right point.) Now With your hands on the keyboard... [ALT]+E, P, [down arrow] ...and repeat. You can put this in a macro if you have a real long one with a lot of images. These three keystrokes, will insert the copied Control Block, after it is inserted, the Control Block will be highlighted. The down arrow will highlight the next image. This is the perfect point to insert the next Control block. Once you get the rhythm down, inserting twenty or thirty of these is a snap. Deleting them can be done the same way. What you will end up with is something similar to this... 

    HEADER GIF89A Screen (504x89)
    LOOP                             <- 1.0b versions before 1.0G of GIFCon
    CONTROL                             APPLICATION-DEFINED will show instead
    IMAGE 503 x 86, 256 colours         of LOOP.
    CONTROL
    IMAGE 502 x 86, 256 colours
    CONTROL
    IMAGE 499 x 86, 256 colours
    CONTROL
    IMAGE 501 x 89, 256 colours
    CONTROL
    IMAGE 504 x 88, 256 colours

This is what a animated GIF should look like when you're finished. Note the LOOP, is what you will see when the GIF is set up to loop. Let's get onto that.

Assinar: Postagens (Atom)