InformIT: Sams Teach Yourself HTML 4 in 24 Hours > Assembling the Pictures into an Animation

Assembling the Pictures into an Animation

Once you have the individual GIF files saved, select File, Run Animation Shop from within Paint Shop Pro to start putting them together into a single animation file.

The basic idea here couldn't be simpler: You just need to tell Animation Shop which pictures to show and in what order. There are also a couple of other picky details you need to specify: how long to show each picture before moving on to the next one and how many times to repeat the whole sequence. Follow this step-by-step procedure to assemble an animation:

Select File, Open (in Animation Shop, not in Paint Shop Pro). Select the image file that you want to be the first frame of the animation. It will appear as shown in Figure 12.2. Notice that the transparency is preserved, as indicated by the gray checkerboard pattern showing through.

Figure 12.2 This is a single-frame GIF image as it first appears when opened in Animation Shop.
Select Animation, Insert Frames, From File to get the dialog box shown in Figure 12.3. 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. Click OK.

Figure 12.3 Selecting Edit, Insert Frames, From File gives you this dialog box. The Add File button lets you choose an image to add to the animation.
You should now see all the frames laid out next to each other like a filmstrip (see Figure 12.4). You can 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.

Figure 12.4 Animation Shop displays all of an animation's frames side-by-side, like a filmstrip.

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 it; the border around it will turn blue and red. Select Edit, Frame Properties; alternatively, you can right-click the frame and pick Properties from the pop-up menu. You'll get the dialog box shown in Figure 12.5, where you can specify the display time in hundredths of a second.

Figure 12.5 Right-click a frame and choose Properties to set the amount of time that frame should be displayed.

One final detail, and your animation will be done! Select Edit, Animation Properties (alternately, right-click the gray area below the filmstrip and pick Properties from the pop-up menu) to get the Animation Properties dialog box shown in Figure 12.6. I want my flames to flicker as long as someone is viewing my animation, so I chose 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.

Figure 12.6 Right-click the gray bar below the frames and choose Properties to set the number of times the entire animation will repeat.
Your animation is complete. Select File, Save As to save it. You are presented with a control like the one shown in Figure 12.7, which allows you to choose a balance between good image quality and small file size.

Figure 12.7 When you save a GIF animation, Animation Shop automatically figures out which optimizations will work best.

The long list of optimizations may seem bewildering—and all the choices you'd have to make if you clicked the Customize button is even more mind-boggling. Fortunately, 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.

How do you decide where it goes? Animation Shop helps there, too. Pick a setting and click Next. After some chugging and crunching, you'll see a report like the one shown in Figure 12.8. This makes it much easier for you to decide how big too big is; return to adjust the slider by clicking Back. When the file size seems acceptable, click Finish.

Figure 12.8 When you set the slider in Figure 12.7 and click Next, this report helps you decide whether you found the right balance.

Putting a GIF Animation onto a Web Page | Next Section

Previous Section