Assembling Images into an Animation

After you have the individual GIF files saved, launch Animation Shop to start putting them together into a single animation file.

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.

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. 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.

Figure 7.12. 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 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.

Figure 7.13. Selecting Animation, Insert Frames, From File gives you this dialog box. The Add File button lets you choose images to add to the animation.

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.

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

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.

Did you Know?

Animation Shop remembers the last setting you made for the frame display time and will automatically set the display time of newly added frames to this value. So if you initially set the display time of the first frame before adding new frames, the new frames will automatically take on the initial frame's setting.

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.

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.

Did you Know?

Figure 7.12. This is a single-frame GIF image as it first appears when opened in Animation Shop.

Figure 7.13. Selecting Animation, Insert Frames, From File gives you this dialog box. The Add File button lets you choose images to add to the animation.

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

Did you Know?

Figure 7.15. This report helps you decide whether you found the right balance of image quality and file size.