Jumping Jack-O-Lantern - Tweening an Animation

For this example, we'll create a bouncing jack-o-lantern (we've copied the pumpkin from PhotoSpin's image #0100004). It is, of course, easy to substitute a ball or other object. Before we start working on the animation in ImageReady, we'll use Photoshop to create a few layers to use as the basic frames.

The pumpkin must be on a separate layer so that it can move independently of the background.

Because we want to make the pumpkin "squash" a little when it hits the floor, we can copy its layer (drag to the New Layer button in the Layers palette) and use Edit> Free Transform. Bringing down the top of the transform marquee and sending the sides outward gives use the look we need.

(The original pumpkin layer is still visible in the background.) To extend the squash, we can copy that layer and flatten/widen a little more with Free Transform.

Although the final animation will have over 20 frames, we need create only these three layers. Although no longer required with Photoshop 6, it is good idea to save your work before jumping to ImageReady. (Photoshop 5.5 requires that the image be saved before it can be opened in ImageReady.) To make the jump, simply click the button at the bottom of Photoshop's Toolbox.

In ImageReady, we'll work with the Animation and Layers palette to create the animated GIF. Remember that you show and hide layers to produce the contents of each frame of the animation. We'll start by hiding the two "squashed pumpkin" layers, giving us our initial animation frame.

Next, we'll copy that frame by clicking on the Duplicate Frame button at the bottom of the animation palette.

To show the pumpkin at the top of the bounce, we must make sure that the appropriate layer is active in the layers palette, and then simply use the Move tool to reposition the pumpkin.

Before we start tweening, we should think ahead: What goes up must come down. We can click once on the first frame to select it, then click on the Duplicate frame button. Now we move that new frame to the end of the animation. The Animation palette shows three frames, down-up-down.

Here's the easy part, making ImageReady earn its keep. We'll select the first two frames by clicking and Shift-clicking, then choose the Tween command from the Animations palette menu. As you can see in the Tween dialog box, you can choose to create new frames based on changes in position, opacity, or layer effects. You can also elect to make changes to the animation based on one layer or all visible layers.

In this case, we want ImageReady to produce frames using all visible layers (we want the background visible in each frame), and base the new frames on changes in position. We'll generate eight new frames.

ImageReady calculates a uniform transition from frame to frame to generate the new frames. Now we'll want to tween between the "up" frame and the second "down" frame, using the same parameters. Again, we simply select the frames between which we want the new frames and use the Tween command from the Animation palette menu.

Because ImageReady can't tween scaling of an object, we have to insert our "squash" frames manually. Because we want them to appear between the two "down pumpkin" frames (the very last frame and the first frame), we'll place them at the end of the animation. Simply select the last frame, click the Duplicate Frame button, and make the changes in the Layers palette. We'll keep the background visible, hide the original pumpkin frame, and show the first copy.

Another new frame must be created to show the pumpkin in the fully squashed position (the second layer copy), and then a transitional frame at the "half-squashed" level. (If we don't add that last frame, the pumpkin jumps from completely squashed to unsquashed too abruptly.)

In the larger thumbnails (available through the Animation palette's options in the palette menu), you can see the transition from unsquashed, to half-squashed, to fully-squashed, to half-squashed. The next "unsquahsed" frame is actually the first frame of the animation.

The final steps are to adjust the timing and use the command File> Save Optimized As. (Remember that you can click on the first frame, Shift-click on the last frame to select all frames, and then adjust the timing for all by changing the pop-up menu for any selected frame.)

Using ImageReady's Tween command makes this animation a breeze to create. Without tweening, creating the intermediary frames would have involved these steps:
--Duplicate frame.
--In Layers palette, move pumpkin a small amount.
--Duplicate frame.
--In Layers palette, move pumpkin a small amount.
--Duplicate frame.
...and so on, for 17 frames. And keep in mind that ImageReady did an excellent job of spacing the pumpkin between frames, far more precisely than we could have done it.