February 22
A Simple Animated Rollover Using Adobe ImageReady

by David Nagel
Senior Producer

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 6. Under the File Menu, select "Export Optimized As..." and save the HTML file. ImageReady will automatically export the images into a folder called "Images." Unless you want to do some tweaking, you'll need to place this "Images" folder into the same directory on your Web site as the HTML file. Otherwise, you're going to have to go in and mess around with the Javascript, which you don't want to do. Believe me.

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.

This first part goes goes between the </TITLE> and </HEAD> tags in your HTML document.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (bolkan4.psd) -->
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
function changeImages() {
if (document.images ) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
// -->
<!-- End Preload Script -->

The second part of the script goes within the <BODY></BODY> tags of your HTML document, preferably where you want your image to appear. Mind you, if you're using an HTML editor, there is no actual image for you to place into the document. The Javascript handles it all. In Dreamweaver, for example, pating the Javascript will actually bring an image into your document, which you can then manipulate just like any other image.

<!-- ImageReady Slices (bolkan4.psd) -->
<A HREF="http://www.creativemac.com/HTM/58Seconds/2000/2_22_00/bolkan.htm"
ONMOUSEOVER="changeImages('bolkan4_01', 'images/bolkan4_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('bolkan4_01', 'images/bolkan4_01.gif'); return true;">
<IMG NAME="bolkan4_01" SRC="images/bolkan4_01.gif" WIDTH=144 HEIGHT=144 BORDER=0></A>
<!-- End ImageReady Slices -->

Paste this into your document, upload your document and the "Images" folder to your server, and, Voila, you're good to go. I've pasted my final image here, and then I've used Dreamweaver to align it left for a text-wrap effect. That's it! If you're unclear about something mentioned in this tutorial? Contact the author. We're only here to serve.

Are YOU a Mac expert? Do you have some time saving, image building, knock your socks off tricks up your sleeve. Share them with the rest of the Mac community and be forever bathed in glory. But make it a quickie, you have 58 seconds, give or take a few minutes.
Send an email to [email protected]

Read Previous
58-Second Tutorials