This hour introduces you to animated GIF images, which are the easiest and quickest way to add some action to your Web pages. You find out how to use Animation Shop, the animation module for Paint Shop Pro, for putting together GIF animations. (For Macintosh users, I recommend GifBuilder, which is available free at www.shareware.com.) GIF animations can be placed on Web pages using the same <IMG> tag as ordinary, unmoving images. All the <IMG> attributes and options discussed in Hour 9: Putting Graphics on a Web Page also work with animated images.
(No HTML tags covered in Hour 11.)
No Smoking or Flaming(Figures 11.1 - 11.12)
JASC Software's Animation Shop is one of several programs avaiable to assemble multiple images into a single animated GIF file. Animation Shop also has the capability of generating some or all frames of an animation using a variety of special effects and automatic transitions.
If you'd like to try creating this animation yourself with Animation Shop (or your favorite GIF animation software), right-click on each of the three images below and select Save Image As from the pop-up menu. Then open one of them (noburn1.gif) with File | Open, and select Edit | Insert Frames | From File to add the other two (noburn2.gif and noburn3.gif). Alternately, you could use File | Animation Wizard to step you through the process of creating an animation.
If you'd like to see how I created these images using Paint Shop Pro's layers feature, click here to download noburn.psp. Open it in Paint Shop Pro and press the letter L to show the layers palette. For more help with layers, select Help | Topics and choose Working with Layers.
A page I developed for the CD-ROM in my book, Web Page Wizardry. As with any GIF images on a Web page, you can save these GIF animations to your hard drive by right-clicking (or holding down the mouse button on a Mac) on each of them, and selecting Save Image As from the pop-up menu.
If you would like the multi-layer Photoshop files (also Paint Shop Pro compatible) with the animation frames, click on these links: vision.psd, action.psd, brew.psd, mirror.psd, book.psd.
"If you don't tell it any different, Animation Shop normally puts a tenth of a second between each frame of the animation. That was actually about right for my little burning-man icon. However, you will often want to control the length of time each individual frame is displayed before the next one replaces it... To set the timing for a frame, click on it (the border around it will turn blue and red) and then select Edit | Frame Properties... where you can specify the Display time in hundredths of a second."
Web Page Wizardry