Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
Photoshop Tutorials - Free Fonts
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[About Mike]
[Related Sites]

  Understanding Animation Layers vs. Frames

Adobe® ImageReady™ and Macromedia® Fireworks

Two of the leading web graphics programs are Adobe ImageReady and Macromedia Fireworks. This tutorial describes ImageReady version 2.0 and Fireworks version 3.0. Both of these programs support animation, but each handles frames and layers slightly differently. The following animation (lenseffect.gif) wiil be used as an example in this tutorial:

This animation was created with
Deneba Canvas™ 7. Click Here

Adobe ImageReady uses a layer-based file so it will be compatible with Photoshop®. If you were to open lenseffect.gif in ImageReady, it will build a Photoshop file with as many layers as there are frames and create a frame for each layer. The frames are just like a movie film strip. The graphic below illustrates the point:

If you were to open the same animation in Macromedia Fireworks, it will build separate frames. Here again, the frames work just like a movie film strip. In addition, Fireworks allows you to add multiple layers to your animation. This can be visualized as a stack of film strips, one on top of another, moving through time:

ImageReady File Format and Animation

The native file format for ImageReady is the same as Photoshop. Both use Photoshop PSD files. This is very handy because the same file can be used for image-editing as well as for web graphics. While editing an image you can jump from ImageReady to Photoshop with the click of a button. The ImageReady document window is shown below:

In ImageReady, the animation frames are stored in the file as pointers to one set of layers. You add frames to the Animation Palette and make layers visible or hidden for each frame. In other words, the state of layer visibility is unique for each frame. The graphic below shows that you work with layers in the Layers Palette, and animation frames in the Animation Palette.

Fireworks File Format and Animation

The native file format for Fireworks is the the PNG format (Portable Network Graphics). PNG files can store vector and raster data in the same file (click here for more on vector and raster graphic formats). Additionally, it supports layers and frames. Many other graphics programs will open and save PNG files but will flatten them and completely rasterize them in the process. Therefore, If you save a PNG file in Fireworks, then open it in another graphics application that doesn't respect Fireworks, you will destroy the Fireworks features when you save it. The Fireworks document window is shown below:

As you can see, there is a striking similarity between the document window in ImageReady and Fireworks. Both have tabs you can select for 2-up and 4-up previews as well as a view of the original and a preview of the current optimized version of an image.

Both the Layers and Frames palettes are in the same palette group. But instead of frames having pointers to one set of layers (as in ImageReady), each frame has its own layer stack. That's the main difference between the two programs and how they handle layers and frames. Like ImageReady, you can turn visibility on or off for any layer of any frame.


Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy