Using Animation
There are some
very good reasons for using animation on a page:
- It draws the
user's eyes to the point of the movement.
- It adds interest
to a page.
There are some disadvantages,
however.
- If not used
wisely, you can draw the user's eyes to the wrong point on the page. For example,
from the Internet you can find many cute little animated icons that can dress
up your pages. Using these icons, however, draws the user's eyes to an object
that can take the reader off the page. For example, an animated arrow
icon to move to the next page encourages the user to move to the next page
instead of reading the current page. In the same way there is generally little
content in a horizontal bar. Why animate the bar when it will distract from
the message? When animation is used, it should be a part of the content.
- If not used
correctly, animated images can be large files that take too long to load.
Animated GIFs with many colors and frames are particularly bad at this, as
well as large animated images.
You can do animation
several ways:
- Use animated
GIFs. This involves storing multiple images in a single GIF file. You can
see an example of this with the kitten on this page. There are plenty of shareware
and commercial programs that enable you to do this and some animated images
on the Web. Some of best animated GIFS do it by adding a small touch of animation
to a larger (generally vector) image. An example is at: http://www.urlsinternetcafe.com/staff/staff.html.
Only the smoke is animated - the rest is a static image. This site has several
other examples of this technique.
If you are doing animation this way
- Use as few
colors as possible. You can specify the number of colors when saving a
GIF in Adobe Photoshop(TM).
- Keep the
image as small as possible.
- Use as few
frames as possible. No more than three or four.
- Using Flash(TM)
or Adobe's LiveMotion(TM). Both support both animation and sound. This requires
the client's browser to have the free shockwave plugin installed, but almost
all users now have this plugin, as it is an integral part of later versions
of both Netscape and Microsoft browsers. To check your browser and to get
the plugin if necessary, go to http://www.shockwave.com
or http://www.macromedia.com
. Flash supports vector graphic images, which load faster than GIFs and
can be easily resized without losing resolution.
- Using JAVA or
JAVASCRIPT (see the status bar of this page). These are essentially programing
languages, so you can do a lot of interactive programming using these. JAVA
is a compiled language, which offers protection of your code. With Javascript,
you don't need a JAVA compiler, but your code is exposed to any user.
- Using DHTML.
This gives you smaller files than Flash and requires no plugins. The newer
browsers all support DHTML, but the implementations are different. This means
setting up the pages to test for the user's browser and branching accordingly.
- Various movie
formats (as QuickTime(TM)) and Shockwave are also supported. These are all
slow loading and require plugins.
In our design work,
we generally use Flash(TM) with some Javascript, and occasionally small animated
GIFs.
All Rights Reserved
© 2004, Oregon Professional Microsystems
Portland Web Site
Design, Search Engine Optimization, and Web Site Hosting
(503) 697-4773
9/23/2004