![]() A BRIEF GUIDE TO PRODUCING ANIMATED GIFS To Enhance Your HTML Files Animated gifs help to bring a little life to HTML pages, but care
should be exercised to ensure the the file size is not so great that
it interferes with the other functions of the page. The most time consuming part of producing an animated gif is the initial preparation of the individual pictures which are used in building the final animated gif file. I use CorelDraw6, although Corel 3, 4 or 5 would be just as good. I only use Corel because it is the drawing package I am familiar with. You will probably use your own favourite drawing programme. The Clown.gif (2,891 bytes) above is just two gif files built
together, one being a mirror image of the other. Normal gif files
consist of two parts, a header and the image. However gif type 89a
allows for control blocks, plain text blocks, comment blocks,
application blocks, loop blocks and block name blocks.
![]() I won't go into the details about producing each gif image prior to constructing the animation. Just keep in mind the balance between file size and smooth animation. The bomb.gif above has 16 gif images in it and occupies 92,527 bytes. Just like the frames in a movie, apparent movement is achieved by smooth advancement between frames. I will assume that you have produced say 4 gif images, these are of a white ball in a red box. The ball has been moved progressively within the box, so that when the four gif files are put together we get a simple animation.
![]()
In Gif Construction Set open up one of their example files and notice
how the file is constructed. Delete each image line in the file and
leave just one control for each of your gifs (in our example we need
four controls). If you need more controls they can be added
(or deleted) with the insert button. LOOP CONTROL IMAGE CONTROL IMAGE CONTROL IMAGE CONTROL IMAGE COMMENT BLOCK NAMES Click on view to preview the animation. It may be necessary to adjust the timing between the individual gifs, if so highlight the control block preceding the image block and click on edit. There the time can be set from zero upwards in 100ths of a second.
![]() The above animated gif is our four box images constructed and the control times are all zero. Below is a gif file constructed using the same four box images but with repeats for the return movement. The images are inserted in the order 1, 2, 3, 4, 3 and 2. I have also included 10 hundredths of a second delay in each control block. ![]() You should remember that there are several browsers which do not support these animated gifs. In such cases it is only the first frame which is displayed. So make sure the first frame is a nice picture or it may spoil your page. Transparent backgrounds can be utilised in the animations (see "Pet dog" below). I would suggest that you become proficient with normal gifs first. Help yourself to the gifs below (The old clock is my favourite!) |
Swann Internet Services Copyright (c) '96, '97 All Rights Reserved. Individual trademarks are the property of the respective trademark owners... 5 November 1997 If any of these images infringe copyright, please let me know and I will remove them. |