Animation Palette

Basics	Image Maps	Slices	Rollovers	Animation

Introduction	Introduction	Introduction	Introduction	Introduction
Jumping	Creating	Creating	Creating	Working with Frames
File Formats	Modifying	Modifying	Previewing	Working with Layers
Optimization	Image Map Palette	Slice Palette	Matching Layers	Animation Palette
Saving				Saving Animations

More about the
Animation palette

Throughout this part of the course, you have been learning how to use the Animation palette to create animations. However, there are some features of the Animation palette that we have not yet touched upon, including:

Matching layers across frames
Tweening
Looping
Delay times
Viewing animations

We will cover these topics in this lesson.

Matching Layers

As you know, when you change a layer using layer effects, the changes only apply to the current frame of an animation. At times, however, you want the change to take effect for the entire animation. Rather than having to repeat the change one frame at a time, ImageReady lets you make the change once and then apply it to all of the frames. Here's how:

1) In the Layers palette, select the layer you want to match across all of the frames in the animation.

2) Choose the Match Layer Across Frames command from the Palette menu:

Tweening

The Tween command will automatically create new frames in-be"tween" two endpoint frames. ImageReady will make incremental changes to the layer attributes (position, opacity, and/or effects) of each frame to create an even continuum of frames between the start and end points.

Follow the steps below to tween your frames. (We'll use the example of a bicycle crossing the screen to show how it's done.)

1) Create the starting frame and the ending frame. Set the layer attributes of each. (We created two frames. In the first frame, the bicycle is at the left of the picture. In the second frame, the same bicycle is now at the right of the picture.)

2) If you want to "tween" the layer effects only for a specific layer, select it in the Layers palette. (With our bicycle, the wheels were on a different layer from the bicycle frame, and so we wanted all layers to be tweened. We ignored the Layers palette selection.)

3) Select the two contiguous frames between which you want to insert intermediary frames:

4) Click the Tween button at the bottom of the Animation palette.

5) The Tween dialog box appears:

6) If you want layer effects for all layers to change across frames, click All Layers; otherwise click Selected Layer. (In our example we wanted all layers to be tweened, so we selected All Layers.)

7) Check which paramaters you want to change across frames: position, opacity, and/or effects. (In our example, we were only concerned with the changing position of the bicycle, so we checked Position, and un-checked Opacity and Effects.)

8) Leave Selection in the Tween With pop-up menu. (Since we selected the two end frames, the Tween with Selection option was automatically chosen.)

9) Specify how many frames you want to add between the two end frames. (In our case, we said five.)

10) Click OK.

In a few moments, ImageReady creates the new frames:

We're done! Our bicycle animation now looks like this:

Note: In multi-layer animations, you cannot use "tweening" to create in-between layers. Tweening can make incremental changes only to layer effects.

Looping

By default, your animation plays continuously. However, you may want it to play just once and then stop, or play a specified number of times. To change this setting:

1) Pull down the Looping Option pop-up menu in the bottom left-hand corner of the Animation palette:

2) Make a selection from the menu: Once, Forever, or Other.

3) If you selected Other, a dialog box will appear. Enter the number of times you want the animation to repeat, then click OK.

Example: the above animation is set to loop forever.

Delay Times

You can control how long each frame of your animation displays on the screen. The default is 0 seconds, and the animation moves rapidly through the frames. However, you can change the default so that there is a longer delay before the next frame appears:

1) Select the frame or frames for which you want to change to delay. (The change applies to all selected frames.)

2) Click on the Delay value below a selected frame to see the Delay pop-up menu:

2) Make a selection from the menu, or choose Other.

3) If you selected Other, a dialog box will appear. Enter the length of the desired delay, then click OK.

Example: the above animation has a .5 second pause on the second-to-last frame, and a 3 second pause on the last frame.

Viewing Animations

Once you are done building your animation, you will want to see how it looks. To do this, you can go into animation preview mode, which will give you a rough idea of what your animation looks like. The animation controls are across the bottom of the Animation palette:

You can use these controls to view your animation, step through it slowly, find a specific frame you want to edit, etc. Just click once on the one you want.

The controls are very similar to a tape player:

If you want to preview the animation in the default browser for your computer, click the Preview in Default Browser button in the toolbox . Your browser will launch and you can watch the animation.

If animation timing is critical, it's important to view the animation in one or more browsers, because ImageReady may not display the timing perfectly.