[Previous]
[Find]
[Next]
|
[Previous] |
[Find] |
[Next] |
Royal Frazier's
- MIRROR sites: closer, faster, non-English
-
[Home] [Introduction]
[Find] [UrlMinder]
[Viewing]
[Software]
If you have a few minutes, please fill out the Visitor Survey. It will help in making this site better.
NOTE: Due to excessive size, this tutorial is now in three parts.
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
SECOND WAY (I prefer this way) TO START AN ANIMATION GIF
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.
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.
Any ideas, suggestions,utilities, or examples, please mail them over for inclusion in this page.
(Go to the TOP of PAGE for MENUS)
| Copyright 1996,1997 Royal E. Frazier Jr. | Last Updated: March 1997 |