Animation is all the rage on the web and is becoming more popular every
day. But before you begin to create animations for your site, you need
to consider some basic questions, such as: What is the purpose of the
animation? What kind of audience do you want to draw? 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 now move onto other considerations.
Picture formats
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 best choice for compressing photographs,
realistic artwork, gray-scale images, etc. 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, regardless of how much they are scaled. 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) Quicktime and SWF (the Flash Player format).
A simple animation using the GIF format can be quickly built within applications such as Adobe ImageReady or Deneba Canvas. Other animation options include vector or vector/bitmap animations built in Macromedia Flash and Adobe LiveMotion, or 3D animation, which creates more complexity and can introduce greater interest. This article offers 10 tips designed to help you make clear decisions about animation aesthetics, implementation, storyboarding and optimization, without sacrificing quality.
Step 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 site, otherwise you will lose your audience.
Step 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 viewers 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.
Step 3: Once you have decided to create an animation, you need to begin 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.
Step 4: A key issue in storyboard design is complexity, which was a common problem encountered by many of my animation students. Often, they would design animations that were beautiful in theory, but impossible to complete in the time allowed. Whenever possible, keep it simple.
Step 5: For animations that include vector images, use only the minimum number of points to define the shape. This will reduce file sizes. Applications such as Adobe Illustrator 9, or the Corel KPT 6 plug-in, offer a command which automatically reduces the number of points in a path.
Step 6: When working in 3D, reduce geometry complexity for objects that are further away in a scene. At a distance, such detail is not likely to be discernable by the eye.
Step 7: When objects are in motion, the eye is not able to discern information one would normally see in a still image and is much more forgiving. This means that details can be further reduced.
Step 8: In 3D applications, lines and facets can appear on an object that are not seen by the viewer. Turning these off reduces image complexity and rendering time. Also, turning off anti-aliasing will speed up rendering. The down side is that the edges will appear jagged, but this may not affect your animation. Test it and see for yourself.
Step 9: As with vector images, it's important to reduce the number of points and not to rely totally on geometry alone to define create an object. A better option is make use of image maps, which create the illusion of geometry while reducing the file size.
One note of caution: Be careful how you use image maps, as they can bloat your file sizes as well. Until the bandwidth issue is resolved, keep file sizes as small as possible. This issue becomes even more important when you consider that many users still use 56.6Kbps modems.
Step 10: A new method for compressing image maps/bit maps is "Weighted Optimization," available in Photoshop 6 and ImageReady 3. Weighted Optimization uses an alpha channel to vary compression settings across an image. For areas where quality is important, you use a lower compression, and in areas such as sky, you use a higher compression. The end result is an image of a small size but with certain areas having a high quality. Weighted Optimization gives you control over GIF dithering, lossy GIF settings and JPEG compression.
The above tips will help you make wise decisions about animation aesthetics, implementation, storyboarding and optimization, without sacrificing quality. In future articles, you will learn about tips and tricks specific to a wider range of software applications such as 3D Studio Max, Photoshop, LiveMotion, Flash, etc., all designed to optimize your animations for streaming media.
----------------------------------------------
About the author:
Nathan Segal is a Writer who is also active in Stock Photography.