Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
    • Software for Making Web Page Animations
    • Creating the Pictures You Want to Animate
    • Assembling the Pictures into an Animation
    • Putting a GIF Animation onto a Web Page
    • Generating Transitions and Text Effects
    • Summary
    • Q&A
    • Workshop
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Creating the Pictures You Want to Animate

The first step in creating a GIF animation is to create a series of images to be displayed one after the other. Each of these images is called a frame. (By the way, this use of the word frame has nothing whatsoever to do with the frames you learn about in Hour 21, "Multipage Layout with Frames." ) You can use any graphics software you like to make the images, although Paint Shop Pro is an obvious choice if you plan on using Animation Shop to put the animation together.

Figure 12.1 shows three pictures I drew with Paint Shop Pro. In each picture, the icon of the man and the "NO" symbol around him are exactly identical, but the flames and smoke on his body are slightly different. When these three images are put together into an animation, the flames seem to flicker.

Figure 12.1 Use Paint Shop Pro or any other graphics program to produce the individual frames of your animation.

If you know how to use Paint Shop Pro's (or any other advanced graphics software) Layers feature, you'll find that creating animation frames is easier because you can easily turn parts of a picture on and off to make variations or move layers to simulate motion. For example, I actually created one image with separate transparent layers for the man, the "NO" symbol, and the flame and smoke variations. I then used Edit, Copy Merged and Edit, Paste, As New Image to make the three individual images in Figure 12.1, with different opacity settings for each layer.

Don't fret, however, if all that layer manipulation is a bit beyond you at the moment. You can easily make very effective animations by copying an ordinary one-layer image and painting on some variations, or moving some parts of it around to make the next frame.

When you have your animation's individual frames ready, use Colors, Decrease Color Depth to limit them to 256 or 16 colors, and then save each of them as a separate GIF file. (Refer to Hour 9 for more detailed instructions if you need a refresher on creating and saving GIF files.)

Share This