Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

Did you Know?

The fastest way to create a simple GIF animation with Animation Shop is to select File, Animation Wizard. This starts an "interview" that leads you through all the steps discussed next.

In this hour, however, I show you how to create animations by hand, without using the Animation Wizard. This will give you a head start when you want to use the advanced animation tricks discussed toward the end of the lesson.

1.

Select File, Open in Animation Shop. Select the image file that you want to be the first frame of the animation. It will appear as shown in Figure 7.12. Notice that the transparency is preserved, as indicated by the gray checkerboard pattern showing through. In this case, you're building an animation of a film projector.

2.

Select Animation, Insert Frames, From File to get the dialog box shown in Figure 7.13. Click the Add File button and choose the image you want to appear second in the animation. Click Add File again to add the third frame, and so forth, until the list contains all the images you made for this animation. Change the Insert Before setting to 2 so that the new frames are inserted after the original frame. Click OK.

3.

You should now see all the frames laid out next to each other like a filmstrip (see Figure 7.14). You can resize the animation window and use the scrollbar to move forward and back through the filmstrip if all the frames aren't visible at once. If you'd like to see a preview of the animation, select View, Animation. If any frames are in the wrong order, simply grab and drag them into the proper positions with the mouse. Of course, the animation is likely moving so fast that you can't tell the order. This is because Animation Shop defaults to putting a hundredth of a second between each frame of the animation. You will typically want to increase the length of time each individual frame is displayed before the next one replaces it.

4.

To set the timing for a frame, click it; the border around it will turn blue and red. Select Animation, Frame Properties. Alternatively, you can right-click the frame and pick Frame Properties from the pop-up menu. You'll get a dialog box that allows you to specify the display time in hundredths of a second. In this example, 25 is a decent setting for the display time of each frame, which results in each frame being shown for one-fourth of a second; a setting of 100 would result in 1 second.

5.

One final detail and your animation will be done! Select Animation, Animation Properties (alternatively, right-click any of the animation frames and pick Animation Properties from the pop-up menu) to get the Animation Properties dialog box. You want the projector film animation to run as long as someone is viewing it, so you should click the Looping tab and choose Repeat the Animation Indefinitely. In some cases, however, you may want your animation sequence to play only once (or some other number of times) before stopping to display the last frame as a still image. In that case, you'd select the second choice and enter the number of repetitions.

6.

Your animation is complete. Select File, Save As to save it. After specifying the filename and clicking the Save button, you are presented with a slider control that allows you to choose a balance between good image quality and small file size. Animation Shop usually does an excellent job of choosing the most appropriate optimizations for you based on the slider setting. Move the slider up for better image quality, down for smaller file size. Pick a setting and click Next.

After some chugging and crunching are done, you'll be prompted to click Next once more, after which you'll see a preview of the animation. Click Next one more time to see a report like the one shown in Figure 7.15. This makes it much easier for you to decide how big too big is and return to adjust the slider by clicking Back. When the file size seems acceptable, click Finish.