Animations - HTML

There are three main categories of animations. The simplest is an animated GIF file, but even those can be time consuming, because to make a nice animation requires that you create a new image for each frame of an animation. Another category of animation is a Java-based or ActiveX animation. Java is a machine-independent language that requires that the target user have a Java Virtual Machine (JVM) installed on his or her computer.

Inconsistencies in JVMs have forced most Web animation aficionados to abandon Java as an animation platform. Active X animations are even more rare, because they’re limited to Windows-based Internet Explorer browsers. This helps explain why the third category, Flash, has become so popular—along with the fact that Macromedia has created what can only be described as a genuine application environment within the Flash framework.

Creating animated GIFs
Including an animated GIF file is the easiest of all the multimedia tasks. You simply create one in a paint program that supports them, or find an inexpensive or free program that specializes in helping you create them.

All Animated GIF creation programs are different, but their essence is the same. You start off with one frame, and when you want your image to change, you create another frame to represent that change. The frames can be on a complicated timeline, or as simple as the interface, which demonstrate an animated advertising banner being created using Macromedia’s Fireworks.

The animation creation software then generates an animated GIF file consisting of as many frames as you indicate. You can also set the amount of time between the frame changes, the transition between one frame of a completed animated advertising banner and another.

Keeping files sizes small
Generally, you want to keep your file sizes small, and if you’re creating advertising banners, the Web sites that run your ad will probably require you to keep them small. To keep your files small, keep in mind the following tips:

  • Use as few frames as possible.
  • Use as few colors as you can.

This is where a higher-end animation program such as Fireworks or DeBabelizer comes in handy. They help reduce the number of colors in your animation without degrading quality.

The first frame of an animation built in Fireworks.

The first frame of an animation built in Fireworks.

To build the second frame, you simply add the frame using the Frames and History palette.

To build the second frame, you simply add the frame using the Frames and History palette.

Changing the time interval between frame changes.

Changing the time interval between frame changes.

Transitioning between one frame of a completed animated advertising banner and another, part one.

Transitioning between one frame of a completed animated advertising banner and another, part one.

Transitioning between one frame of a completed animated advertising banner and another, part two.
Creating a Flash file

Transitioning between one frame of a completed animated advertising banner and another, part two. Creating a Flash file

Creating a Flash file is not so easy. Flash is enormously popular because it’s a very powerful tool, but in the wrong hands it can spell disaster. The Flash file format (with a .fla extension) is the starting point of a Flash presentation on the Web. two instances of the same Flash file side by side, each in a different stage of the animation.

This kind of animation is much more sophisticated than an animated GIF, because it runs programmatically based on a scripting language similar to JavaScript named ActionScript. In the case of the animation (downloadable as marrow.swf and marrow.fla), the text falls quickly into the pane to mimic someone quickly typing code. This is done through the use of an external XML file, which is simply looped through over and over again.

Done correctly, Flash is a marvelous tool, but it isn’t the most intuitive program on earth, so be prepared for a bit of a learning curve if you want your Flash presentations to look professional. You’ve already seen how to include a Flash presentation in your HTML page in a previous explanation of how to use the object element.

A Flash animation in action.

A Flash animation in action


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics