Working with Layers

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

How do I use
layers to create
the animation?

Working with layers is the key to creating an animation. You make changes to a frame by making changes to its layers.

Using Layer effects, you can create several types of animation effects. You can:

hide or show a layer
change or add layer styles
move a layer
change a layer's opacity
change a layer's blending mode

However, just as with rollovers, you need to be aware that changes you make using painting and editing tools, color and tone commands, filters, type, and other image-editing commands, will have a universal or global effect on the layer, rather than applying to just the selected frame. If you wish your animation to incorporate some of these global effects, then you need to create an animation with multiple layers, and hide and show the layers as appropriate.

How do I create
a single-layer animation?

A single-layer animation has only one layer, and uses the various layer effects to create the illusion of motion. Even with single-layer animation, you can create many kinds of effects, like moving an object, fading it in or out, making it flash, or moving through a series of layer styles. Here's how:

1) Show the Animation and Layers palettes. If the palettes are not already visible, pull down the Window menu and select Show Layers, then Show Animation. You should only have one frame in the Animation palette to start, and the layer you want to animate should be selected in the Layers palette.

2) Decide when you want the animation to occur. If you want the animation to happen when the web page is first loaded, make sure that the Normal state is selected in the Rollover palette. If you want the animation to happen only when a certain rollover effect occurs, select that rollover state in the Rollover palette.

3) Create the initial graphic to be animated. If you haven't already, create the initial graphic to be animated, and locate it where you want the animation to begin. A thumbnail of this graphic should appear in the first and only frame in the Animation palette.

4) Make a new frame. Create a new frame and select it (as described in the previous lesson). This new frame will be a copy of the immediately previous one.

5) Make a slight change to the graphic. For example, if the goal is for the graphic to move across the screen, nudge the layer in the appropriate direction. If you want the graphic to fade out, reduce the layer's opacity a little bit.

6) Duplicate steps 4 and 5 over and over, until your graphic is completely moved across the screen, or until it is completely faded out, or whatever effect you are trying to achieve is completed.

If you want to create an even and smooth transition from beginning to end, you can use a technique called "tweening" to instantly create all of the intermediary images; you only have to create the beginning and end frames. (We will discuss "tweening" in the next lesson.) However, if you want to create an irregular or irratic animation, you will have to create the individual frames by hand.

Note: The animation will be smoother, the more frames there are in between the beginning and end. On the other hand, the more frames there are, the longer the animation will take. You must make a decision about the number of frames based upon the desired effect.

7) Select the Normal state. When you're done, click on the Normal thumbnail to make sure that you don't inadvertently make other changes to your animation.

To the left is an example of a simple, single-layer animation, where a single layer with a round circle is moved from frame to frame to simulate a bouncing ball.

How do I create
a multi-layer animation?

There are some animation effects that require the use of more than one layer. Image-editing tools (such as painting, editing, coloring, changing tone, using filters, and editing type) have a global effect, changing the edited layer across all frames. Thus, one layer cannot be used to animate such changes. For example, you cannot have text grow, or make a graphic shift through all of the colors of the rainbow, without using multiple layers.

Here's how to create a multi-layer animation:

3) Create the first graphic in the series to be animated. If you haven't already, create the initial graphic to be animated, and locate it where you want the animation to begin.

4) Make a new frame. Create a new frame and select it (as described in the previous lesson). This new frame will be a copy of the immediately previous one.

5) Duplicate the previous layer. Duplicate the previous layer, then hide the previous layer using the Layers palette.

6) Make a slight change to the current layer. For example, if the goal is to make some text grow, increase the font size of the text just a little bit.

6) Duplicate steps 4, 5 and 6 over and over, until the effect you are trying to achieve is complete. Make sure that each frame has visible only the layers you want to display for that frame.

7) Select the Normal state. When you're done, click on the Normal thumbnail to make sure that you don't inadvertently make other changes to your animation.

Below is an example of a simple multi-layer animation. Each text size is on a different layer, and each frame hides the previous layer and shows the next one.

Important Tip! When you are working with your animation, always be sure you have selected:

the right frame in the Animation palette,
the right state in the Rollover palette, and
the right layer in the Layers palette

If you don't, you will often get surprising and undesired results!

The last example in this lesson is a bit more complicated. This animation uses both layer effects and multiple layers to achieve its effect:

How was it done? Six frames were created (one for each of the six colors of the rainbow). Six layers were also created, and on each layer the word "ImageReady" was a different color. All of the layers were left visible in all of the frames. In the Red frame, the opacity of the Red layer was set to 100%, and the opacity of the other five layers was set to 0%. In the Orange frame, the opacity of the Orange layer was set to 100%, and the opacity of all of the other layers was set to 0%. (And so on.) Three intermediary frames were then created in-between each of the original six color frames, and the opacity of the layers were slowly shifted from the one color to the next. Here are the first five frames of the animation: