Smart Solution

Animation is all the rage on the web and is becoming more popular every day. But before you begin to create animations for your web site, you need to consider some basic questions, such as: What is its purpose? What kind of audience do you want to attract? What are you trying to say/promote? Will the animation add interest to your site or detract from it? If you’ve decided that having an animation will add value and interest to your site, we move onto other considerations, which include file formats and size, along with design and execution.

When looking at the available image and animation formats, here are a few things to keep in mind. JPEG, (Joint Photographic Experts Group) is a 24-bit file format and is the overall best choice for compressing photographs, naturalistic artwork, grayscale images and similar material. As a JPEG file is compressed, it discards data and is referred to as a "lossy" format. Repeated saving discards more data and can cause "artifacts," where portions of the image begin to clump together.

GIF, (Graphic Interchange Format) is the format of choice to compress lettering, simple cartoons, and line drawings. GIF images are often made up of Vector graphics, such as lines and curves, which are mathematically defined, so they produce a high quality result, no matter how much they are scaled, but a GIF is a bitmap format, so the scaling options don’t apply. GIF files are often composed of few colors and compress well. Other common animation formats are AVI (Audio-Video Interleaved - a desktop video movie format from Microsoft), MPEG (Moving Picture Experts Group), MOV (Quicktime), SWF (the Flash Player format) and Shockwave.

When using image maps in 3D, file formats to consider are: JPEG and GIF as above, as well as TIFF (Tagged Image Format), TGA (Targa, by Truevision) and PNG (Portable Network Graphics). PNG is worth noting because it offers a 48-bit true color setting and a 16-bit grayscale setting. One advantage is that PNG is lossless, meaning that no matter how many times you save the file, you will not lose data. This is important for maintaining high-quality images. Another factor favoring PNG is gamma correction, a setting used by many image manipulation programs to measure brightness and contrast levels. PNG automatically adjusts the gamma setting and makes sure that images look correct across platforms.

On the down side, PNG files are almost always larger than JPEG images. Another issue involves file size and compression. As an example, let’s say you took a 24-bit TIFF file and saved it as both a PNG and a GIF. The GIF format would be smaller due to the fact that PNG uses up to 48 bits of color, whereas GIF uses only eight. The GIF compression scheme discards a lot of data, while PNG almost always saves images in a 24-bit color format. Thus, there is no way the files can compare. Regardless of PNG quality, JPEG is still a better choice for 24-bit color images. PNG files tend to be five to 10 times larger than a standard JPEG file. Other caveats: Don’t recompress JPEG files with PNG because artifacting can become a problem. And don’t add alpha channels to opaque images because this can create large files unnecessarily.

Below are 10 animation tips designed to help you make clear decisions about animation aesthetics, implementation, storyboarding and optimization, without sacrificing quality. These tips, while aimed at 3D, can also be applied GIF or Flash animations.

1. Before you even begin to create animations, there are several important aesthetic issues to take into account. To elaborate, a single animation on a web page will overwhelm all static images, so placement is important. As mentioned above, make sure that the animation is beneficial to your web site, otherwise you will lose your audience.

2. Before you place a finished animation on your site, be aware that if you have more than one animation on a single page, the effect can overwhelm the viewer and turn them off, rather than draw them in. Also, animations that cycle endlessly can quickly become annoying. Design your animation with a finite number of loops, so that it eventually stops.

3. Once you’ve decided to create an animated sequence, you need to start with the fundamentals. Of these,
a crucial step is the creation of the storyboard. Here, you detail the animation in a precise fashion with sketches, scripts, transitions, timing, etc. It is with the storyboard that you can work out many creative difficulties. And once you’ve finished the storyboard, you have, in a sense, created the animation.

The ‘readability’ of ideas depends on two factors:

1. Good staging and layout, so that each scene and important action is presented in the clearest and most effective way.

2. Good timing, so that enough time is spent preparing the audience for something to happen, then on the action itself, and then on the reaction to the action. If too much time is spent on any one of these things, the timing will be too slow and the audience’s attention will wander. If too little time is spent, the movement may be finished before the audience noticed it, and so the idea is wasted.

To judge these factors correctly depends upon an awareness of how the minds of the audience work. How quickly or how slowly do they react? How long will they take to assimilate an idea? How soon will they get bored? This requires a good knowledge of how the human mind reacts when being told a story. It is also important to remember that different audiences react in different ways. So, for instance, an educational film for children would be timed in a different way from an entertainment film for adults, which requires a much faster pace.

Animation has a very wide range of uses, from entertainment to advertising, from industry to education and from short films to features. Different types of animation require different approaches to timing.