Cool Websites

All cool websites have animations. Therefore, if you want your website to be one of the cool websites, you must know how to create simple animations and of course implement them into your site.

GIF animation is the most widely used form of animation on the Internet. A GIF animation is composed of individual frames, or cells, each of which represents a single piece of the whole animation. Although GIF animations can be comprised of any type of images, they are typically clip art, cartoons, or text. For example, creating an animated walking character generally involves 8 to 10 individual cells. Because walking involves placing one foot in front of the other (as your parents so dutifully taught you when you were a child), to create a continuing animation of a person walking, you need to create only one walking cycle. When the animation reaches the last cell, it automatically returns to the first cell and repeats the animation all over again. Repeating a series of cells is called cycling.

To create the individual cells, you can sketch them on paper and then scan them into your computer, or you can create the cells using any one of a number of image-editing programs such as Photoshop or ImageReady.

After you complete the cells in the animation, you must assemble them in a GIF animation program. You can check out http://www.shareware.com or http://www.tucows.com, for several Macintosh or Windows shareware programs (and do not forget, you are required to pay for shareware). GIF Construction Set, for example, sells for a modest price of $20. Other programs, such as Adobe's ImageReady, come with more features, but at a higher price. ImageReady comes bundled with Adobe Photoshop, which costs about $600.

After you have all the cells assembled in the animation program, you save the animation sequence to a file with a .gif extension. In this example, we save the file as walking.gif. Finally, use an <> tag to insert the completed GIF animation (that is, the file with the .gif extension) into a Web page's HTML statements as shown here:

<>

<>

<> This is a simple GIF animation < /title >

< /head >

<>

<>

< img src="walking.gif" alt="Animation" width="50" height="120" / >

< /center >

< /body >

< /html >

In this example, the src attribute in the image tag instructs the Web browser to load the GIF animation file named walking.gif. Because GIF animations are supported by almost all Web browsers, creating a GIF animation file and inserting it into an HTML source document is almost certain to result in an animation that plays on the Web page. In a rare case where a visitor's browser does not support GIF animation, the visitor will see a still frame (typically the first cell in the animation).

When you create and save GIF animation without modifying the animation settings, the application saves the file using the program's predefined settings. These settings typically instruct the Web browser to display a new cell, or frame, every tenth of a second, and continuously cycle (that is, repeat) the animation sequence. For example, if you create a GIF animation of a rotating logo, the logo will continue to rotate, displaying a new animation frame every tenth of a second, for as long as the Web page remains onscreen.

Although default settings may be fine for some animations, configuring the GIF animation's settings when you save the file is always best. Note that you save the settings that control the GIF animation playback within the GIF file, and not as a tag or attribute within the Web page HTML:

< src="neon.gif" width="75 height=">

In this example, the <> tag instructs the Web browser to load the GIF animation file neon.gif. The options that control the animation's playback are contained within the neon.gif file. After it loads the animation file, the Web browser extracts and executes the playback instructions it finds within the file.

Suppose that you want to create a neon sign for your Web page. You would open a graphic in an image-editing application such as Photoshop, and use the program to create two GIF images. The first image represents the neon sign glowing, and the second shows the neon sign off. All Web animation programs (such as ImageReady) give you the option to change the number of frames displayed per second (fps) and the number of times the image cycles (that is, the number of times

the animation repeats).

• Frames per second (fps) - On the Internet, frame rates vary between 1 and 30 frames per second. To prevent the animation from appearing jittery, use a minimum of 10 fps to create the illusion of smooth movement in the animated GIF. However, in the case of a neon sign, to create a "buzzing" neon-like effect, you might reduce the number of frames per second.
• Cycles - The count that determines how many times the Web browser loops through the cells in the animation. Cycle counts can be forever (never stop cycling), or any number from 1 to 30,000.

The frames per second and number of times the animation cycles depend on the type of animation effect you are trying to create. For example, because a neon sign does not move like a typical animation (it just goes on and off), you set the frames per second to one second for the neon sign "on" image, and one-half second for the sign "off " image. In addition, the sign's objective is to attract attention to the Web page, not continually annoy the visitor. Therefore, you might set the cycle count to 5 cycles, so that the sign stops flashing after a while.

Some Web animation programs have an fps rate defined as No Delay or Zero Seconds. You should always select a specific period for the fps rate of the GIF animation as a number of seconds or fractions of a second. When you choose the No Delay or Zero Seconds option, you instruct the Web browser to flip through the animation frames as fast as possible. Therefore, you let the Web browser and the processor speed of the visitor's computer system determine your animation's appearance. As a result, your animation will look great to some visitors and will look like an indistinguishable blur of motion to others.

When you save the animation to a disk file, the GIF animation program saves the cycle and frames per second settings within the file along with the graphics images that make up the animation sequence. When the Web browser opens the image, the browser adjusts the playback of the animation according to the settings you specified when you saved the file. When the Web browser opens the neon.gif file, for example, the sign blinks on for one second and off for a half-second. After repeating this on/off sequence five times, the browser stops the animation on the last frame in the sequence. Notice that the last frame in the sequence shows the neon sign glowing, or "on." Therefore, when the animation stops, it will stop with the neon "on."

I really hope you understood the importance of the animation in cool websites. Animations are cool stuff for websites so, now, get to work and animate you website.