Animating for the web
The Golden Rule of web animation is: if you don't need it, don't do it.
Web audiences are generally media savvy -- they won't be impressed by gratuitous moving things. Only use animation if you need it to make or emphasis the point of your page.
Possibilities include
Background animation
The 4.0 browsers allow a GIF89 to run as a background image in the entire BODY or TABLE, or in an individual table cell.
<BODY BACKGROUND="name_of-GIFanimation.gif">
<TABLE BACKGROUND="name_of-GIFanimation.gif">
<TD BACKGROUND="name_of-GIFanimation.gif">
This lets you overlap animations and strategically place images, text, form elements, or other objects over the animation.
Remember that background images cannot be resized through html but will be displayed at the size you made them. The GIF animation will tile to fill the entire window space
JavaScript Rollovers
Use JavaScript to combine an animation with static images. This gives you better control over timing and infuses your pages with more interactivity.
Meta refresh
The meta-refresh allows you to create more dynamic, multipage-page experiences with your animations or stills.
<meta http-equiv="Refresh" content="#of seconds; URL=xx.html">
GIF89 Animations
GIF stands for 'graphic interchange format'; the format adopted by CompuServe as a standard for compressing 8-bit images and which has since become a de facto standard for web browsers. GIF images are compressed using the LZW (Lempel-Ziv-Welch) compression scheme. LZW works by analysing the binary code which makes up the image and replacing long code 'strings' with shorter equivalents. Because it doesn't alter the image, LZW compression is lossless. However, it is better at compressing repetitive data, therefore areas of flat colour compress better.
GIF animations are the contemporary equivalent of the 19th century kinetoscopes or flip-books. They use a small program to compile a series of consecutive GIF images, but do not require any special plugins to play. GIF animations are added to web pages using the image tag;
<IMG SRC="name_of_GIFanimation.gif">
All the other attributes of the <IMG SRC> can be applied, including specifying height and width display and alignment. Like still GIF89as, GIF animations can display a nominated colour as transparent.
As noted above, they can also be used as background images either in the BODY tag
<BODY BACKGROUND="name_of_GIFanimation.gif">
or using the same BACKGROUND possibility in the <TABLE> or <TD> tags.
There are a number of programs which can be used to make GIF animations; the most common, particularly since it can be downloaded free, is GIFBuilder. It includes a very good tutorial to get you started. It can take GIFs, PICTs and Photoshop images (converting the latter two to GIFs when the animation file is saved), and includes many static and dynamic transitions and wipes.
For very quick results, Director can be used
to generate animation sequences (remember to keep the stage as small as possible
to minimise file sizes), the frames exported as PICTs and then imported into
GIFBuilder.
KISS; Keep it Small and Simple
Don't believe anyone who tries to tell you that size doesn't matter. On the web, file size equates directly with download speeds -- and everyone knows that webbers won't wait. If your page takes too long to download they're going to hit the 'stop' button and go somewhere else. If it is important enough to spend your time making an animation about it -- then it is important enough for your audience to see. If you make it big they won't.
Keep in mind the total size of the web page including the total size of all images, etc, to be displayed on it -- rule of thumb is that your page should be no bigger than 40kmbs. This obviously limits the size which you can make your GIF animation.
Another limitation is that the computer has to 'rewrite' each image to display it -- small and simple images therefore display faster (thus creating a better illusion of movement) than large and complex animations. Try to keep the number of frames you use, the bit-depth and the dimensions of the animation to the smallest possible.
|
|