Animation can be a great way to attract visitors to your Web site. This article offers some tips on how to it.
If you're like most Web
authors, you want to take your online offerings to the next level. Static text
and graphics are fine, but a surefire way to catch the attention of the jaded
Web surfer is add moving images, text, or a banner to your site. Let's face it:
animation gets noticed.
Adding animation to your Web
pages is fairly easy. All you need to do is decide what you want, pick the
software to do the job, and away you go.
Types of Web Animation
There are several ways to create
animation for Web pages. Some are simple, others aren't. The two most common
and popular types of Web animation are frame-based animation and Flash.
Frame-Based Animation
The oldest form of Web
animation is the animated GIF. GIF is the most common graphics format on the
Web, and it can store and display multiple images. Animated GIFs are a lot like
traditional animation. Each image in an animated GIF is a single frame. Each
frame does nothing on its own, but when played they appear as a continuous
sequence. This is why animated GIFs are often called "frame-based
animation".
GIF isn't the only image format
the supports animation. Two younger formats, PNG (Portable Network Graphics)
and MNG (Multi-Image Network Graphics), can also do it. What's more they support
more colors than GIF -- 16 million instead of 256. The only problem is that
users may need a Web browser plug-in to view animated PNGs and MNGs.
Frame-based animation is that
it's simple, and you don't need expensive
software to create it. On the downside, complex animations increase the
file size tremendously. On top of that, you can't add sound effects to your
animation.
Flash
Flash has become an incredibly
popular and widespread Web animation format. And for good reason: it produces
beautiful, rich content. With Flash, you can create your own images, or import
existing ones. Then you can add some amazing effects as well as sound. In fact,
Flash is so powerful and flexible that people have created complex
presentations and games with it.
Flash's biggest selling point
(besides its flexibility) is that animations look the same, regardless of the
browser or operating system visitors to your Web site use. Flash files are
often quite small, although large ones aren't uncommon. But in order to view a Flash
animation, Web surfers need to download a free plug-in.
The Tools
There are literally dozens of
Web-enabled graphics programs out there. Here are a few of the best ones for
creating Web animation.
The Big Guns
Macromedia Flash rules the
world of Web animation. For professionals, and some amateurs, it's the only way
to go. Flash packs enough power for the high-end user, while remaining
accessible to the Web authoring tyro. It boasts a powerful set of drawing
tools, it also has a great selection of filters for importing common graphics
formats.
On top of that, Flash has a
built-in scripting language named ActionScript. With ActionScript, you can
build complex animations quickly and easily. If you're new to Flash and
ActionScript, you can use menu options to create scripts. Hard core programmers
can do it the old-fashioned way in a text editor. All in all, Flash is a
powerful tool for Web authors of all levels of expertise.
Xara X is an overlooked gem for
building Web graphics. Xara X is a full image editing and creation tool, with a
number of Web features for creating like buttons and image maps. Xara X's
animation functions are really impressive, though. You can import just about
any kind of graphic, turn it into a frame-based animation, then export it as an
animated GIF. Or, you can export it as a Flash animation. This gives Xara X a
flexibility lacking in most of its rivals.
Small But Strong
If you want to build
frame-based animation, then check out these three powerful yet easy-to-use
tools.
The first two are GIF
Construction Set and PNG/MNG Construction Set. As you probably guessed from
their names, the tools are build animated graphics in the GIF, PNG, and MNG
formats. Each application lets you build your animations in two ways. There's
the techie way, which represents each graphic in the animation as a separate
block. Then, you add blocks for graphics, comments, and transition effects.
There's also an Animation Wizard, which takes you through a set of steps to
automatically build the graphic. You don't get as much control with the Wizard.
However, both the GIF
Construction Set and PNG/MNG Construction Set lack image editing functions and
their interfaces take some getting used to.
The other tool is Animation
Shop. It's easily one of the most powerful frame-based animation tools around.
Animation Shop has a powerful wizard, a nice set of image and text editing
tools, and a range of transitions and effects. It can also automatically
generate the HTML code for your animation. This feature is very handy if you're
in a hurry!
A Few Considerations
Try not to make animation the
centerpiece of your Web pages. Animation should be purely decorative. Don't
include any important information in the animation because some visitors to
your site, like the visually impaired or people browsing with graphics turned,
won't be able to see it. If you're using Flash, keep in mind that not everyone
will have the necessary plug-in. And, believe it or not, some won't want to
download the plug-in.
Most people will come to your
Web site for the content, not just to admire your creative skills. So, try to
use animation sparingly. By positioning an animation near some texts, the
animation can add to the page rather than overwhelm it. Or, you can use
animation on an introductory page (often called a splash page). A
splash page welcomes visitors to your site. Many Web authors craft
often-elaborate Flash animations for their splash pages.
Also, consider the size of the
animation. Your file must be small enough to load in a few seconds, and no
larger than the smallest screen resolution you'll encounter (usually 640 by
480). If an animation is too big and takes to long to load visitors are going
to leave your site, never to return.
Here are a few ways to reduce
the size of your animations:
Build an animation with the smallest images possible.
Use images with less than 16 million colors.
If you're using frames-based animation, try to use a
maximum of 12 frames per second. Or, use a type of animation that doesn't
require frames.
Also, try to use simple images.
They're a lot easier to manipulate than complex ones. You won't lose any detail
when they're displayed in a Web browser.
Steps for Creating the Animation
Now that you know about the
formats and tools, it's time to get to work. Here are the basic steps to follow
when building an animation:
Prepare your images, either in
a separate graphics package or your animation tool if it supports image
editing. If possible, try to keep the size of the images to a minimum.
Plan the animation. Think about
how the image will change, how many frames to use (or how many seconds it will
run), and where the animation will appear on the Web page. If you want your
animation to attract attention, don't put it at the bottom of a long page. And
don't have the animation run for more than 10 to 15 seconds. You have about
that long to catch viewers.
Build the animation in your
tool of choice. While working on the animation, adjust the timing of the clip
so that the transitions appear smooth. Most tools let you do preview the
animation while working.
Adding the Animation to a Page
This is the easy part. All you
have to do is insert some HTML code into your Web page. The tags you use will
depend on the type of animation you've created. While most applications
generate the necessary code, you may need to edit or copy the code to another
page. Knowing what tags to look for and how they work will come in handy.
Putting an animated GIF, PNG,
or MNG your page involves the same HTML tags as adding a static image. Use the
<img /> tag like this:
If you need to resize the
image, use the HEIGHT and WIDTH attributes. Remember to include the ALT attribute for people
who surf with their graphics turned off, or who use text-only browsers.
Adding Flash files to a page
can be complicated if you decide to do it manually. Fortunately, though, Flash
can generate the necessary HTML. All you have to do it copy the HTML into your
Web page and make sure that the Flash file (which has the extension .swf) is in
proper directory on your Web server.
Conclusion
Building Web animation is a relatively simple, though
time consuming process. But if you want to kick things up a notch on your Web
pages, it's time well spent.
External Links:
Macromedia - Makers of Flash, the top Web animation tool
Xara X - A nice Web graphics and animation application