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) -->
<SCRIPT LANGUAGE="JavaScript">
<!--
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];
}
}
}
// -->
</SCRIPT>
<!-- 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 producer@creativemac.com
|
Read
Previous