This is a beginner-level tutorial to introduce you to rollovers, layers and animations in Adobe ImageReady 2.0. This assumes you'll be creating a very simple animation from within ImageReady itself. In fact, it's quite easy to import a movie as animation frames to use in a rollover/animation sequence. But let's take this dumber approach for now. (Incidentally, some might say this is the hard way to do things. If you think so, I invite you to write your own tutorial for this site.)
Step 1. To start it off, create a new document with three layers (Layer 1, Layer 2 and Layer 3). Layer 1 will be your background. In this example, I've chosen to use a night sky created with KPT 6 SkyEffects. You can use anything. In the foreground, Layer 3, I've placed a masked-out image of Jeff Bolkan, producer of Digital CAD and Digital DTP, for no particular reason, other than his views of the Macintosh differ from mine, which, of course, is unacceptable. Layer 2 is where we'll create our animated sequence, starring me, masked out, making a victory symbol slightly over Jeff's head level. Place the masked-out image (of me, in this case) in Layer 2 and move it off screen (or whatever starting position you'd prefer). Before you go on, make sure you have your optimization selected from the beginning. This will save you trouble later. For the sake of argument, select GIF 128 Dithered from the pull-down menu in the Optimization Pallet.
Step 2. Make duplicates of Layer 2, as many as you think you'll need to complete this sequence. In my case, I needed nine. Make sure that only the original Layer 2 remains visible. Later on, you'll make each layer visible one by one as you insert animation frames.
Step 3. Go to the Slice Pallet and enter in the hyperlink, if any.
Step 4. Go to the Rollover Pallet and click on the New Page icon. This should create what looks like a duplicate of the original image. No go back to the Slice Pallet and make sure this new rollover state has inherited the hyperlink you desire.
Step 5. Go to the Animation Pallet and click on the New Page icon. Again, you will see a duplicate of the original image. Now make Layer 2 invisible and make Layer 2 Copy visible. Select the Move Tool and bring the middle image slightly into the frame (or whatever you want the second animation frame to look like). Now go back to the Animation Pallet and click the New Page button. You should see a duplicate of the previous animation frame. Make Layer 2 Copy invisible, and make Layer 2 Copy 2 visible. Use the move tool again to make a slight alteration to the middle image, and you're on your way. Repeat this until you've completed all of your animation frames.
Step 7. In this particular example, ImageReady has produced two image files for me, "bolkan4_01-over.gif" and "bolkan4_01.gif." Knowing this, you might be able to understand the following code, which you will cut out of the automatically generated HTML file and place into the final HTML document you'll be using for presentation on the Web.
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
ImageReady Slices (bolkan4.psd) -->