Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 9: Creating Animated Graphics

 

 

Objectives:

This chapter discusses concepts that are more related to art than programming. The actual practice of creating animations is discussed, but the use of this skill is a bit beyond the scope of this class. The objectives important to this chapter are:

  • understanding animated gifs
  • using animation
  • creating transparent backgrounds
  • editing animated gifs
  • understanding the features needed in a high end graphic application
Concepts:

Animated graphics are created like animated cartoons. Animated GIF files are supported by Netscape and Microsoft. A series of pictures are displayed to the viewer, each a little different from the last. The set of pictures (called frames) are saved as one file, and browsers show the sequence in order, in a continuous loop. They are displayed in the same space, so each frame that is shown requires that the previous one be removed. I have displayed a sequence from your CD below. In the sequence below of five frames, the second one actually comes about five frames later in the sequence after frame one, the third frame is about five frames later, etc. Laura displays them this way in her table to show that a progression is taking place. In actual usage, there is not so much difference between any two frames in an animation. A viewer might not notice the difference between any two sequential frames.

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5

The psychological phenomenon called persistence of vision causes the each image to remain in the viewer's mind. It is compared, mentally, with the next image, and the illusion is created that the image in the picture moves.

Animated images are often gif files. They can also be avi files, QuickTime files, MPEG files, or other proprietary types.

Some uses of animated files are discussed in the text. The key to each topic Laura mentions is not to overdo it. Animated files add to the download time for your pages, which is not desirable. Also, animations that serve no purpose are to be avoided. Since each animation tends to run continuously, and is meant to draw attention to itself, it is counterproductive to put multiple animations on the same page that are in competition with each other and with the other material on the page.

When using animations, it is good to let the reader know what to expect. If a file is in QuickTime (an Apple file format), and thus requires the user to have a QuickTime viewer installed on the PC to view the file, it is only polite to say so. Warn the user what format your media files are in. If possible, place a link on the page to allow the user to download and install the appropriate helper application. QuickTime viewers are free, and may be downloaded from Apple's web site.

When creating your own GIF files from original art, or other media, you may wish to save them with a transparent background. This means that the actual background color in the GIF file is not meant to be displayed by the browser. The browser only displays the foreground image of the GIF, animated or not, allowing the actual background of the web page to show as the background of the image in the GIF.

Creating GIF images requires the use of an art program. Several are mentioned in the text, running from the simple GIF Construction Set to the more advanced Adobe Photoshop. We will use Photoshop in class, since it has been made available to our lab.