by David
Nagel
Executive
Producer
dnagel@digitalmedianet.com
It seems more
and more users in the forums here are trying to get Adobe ImageReady
and Macromedia Dreamweaver to work together. ImageReady, of course,
is geared toward use with Adobe's own GoLive, while Dreamweaver
prefers files imported from Macromedia's own Fireworks. But can
ImageReady and Dreamweaver play well together?
Yes, they
certainly can. It's not a terribly difficult process, but it's
also not a convenient one. Nevertheless, it can be done.
Let's say
we want to create an interactive animation in ImageReady. Nothing
fancy, just a rollover button for this example, along with a few
slices to spice things up. In the example you see here, I've simply
created a button that shows the head of Steve Jobs in the "Normal"
state and the head of Bill Gates in the "Over" state.
Seems simple enough, right? Well, it is and it isn't.
When you create
an interactive rollover in Adobe ImageReady, you're going to generate
some JavaScript. No matter how simple or complicated the animation
is, you're going to have to deal with it in exactly the same way.
In all cases, you will have three distinct blocks of code you
need to move from one HTML document to another without disrupting
the relative links that are generated by ImageReady. Preparing
for this move is the hard part.
1.
The hard part
The main difficulty in dealing with ImageReady files in Dreamweaver
has to do with planning. After all, ImageReady is going to write
an HTML file using relative links for images, and, more likely
than not, you're not going to want to put your ImageReady slices
in the same folder as your HTML file. So the first step is to
figure out where you want everything. Most important, consider
where you want your images to go. We're going to work in one directory
to begin with, then move our HTML file out of that directory.
You'll see why later.
When you export your animation
from ImageReady, you can customize
the name of the images directory. After you select "Save
Optimized
As," click on the "Output Settings" button. Then
select the "Saving
Files" option, and rename the images directory.
So, for now,
export your ImageReady file into your desired Images folder within
your site. If your main images folder on your site is called "Images"
or something similar, you'll probably want to rename the folder
that ImageReady creates. Do this as a part of the export process,
rather than doing it later.
In my case,
I have a directory for each month, which is broken down further
into an images directory and several directories for my HTML files.
So I'm going to export my ImageReady files into that directory
and tell ImageReady to place all of the images it generates into
a subfolder called "rollover1slices." It doesn't really
matter what you call it, but just remember that it's harder to
change later, so try to get it right the first time. I'm calling
my HTML file "test1.html." It will also be saved into
my Images folder, but not inside the subfolder that ImageReady
generates.
2. The
tricky part
So now we're done with ImageReady, and all that's left to do is
to get it right in Dreamweaver. If we look in our Site Files list,
we can see our "test1.html" file listed below our "rollover1slices
folder." Now comes the tricky part. See, I don't want to
use the HTML file that ImageReady generated. I want to put my
rollover into a file that already exists. In this case, I want
to put it into the document you're reading right now, called "imagedream-page1.htm."
How am I going to do that? This file is located in a completely
different directory, and all the links are going to be ruined.
ImageReady generates an HTML
file (seen at the bottom) and a subfolder
containing the images (here called "rollover1slices").
Open the "test1.html"
document, and save it into a different directoy, if desired.
Fear not.
Fortunately, Dreamweaver has some competent file management tools
that will allow me to get around this dilemma in just two steps.
The first one is to open the "test1.html" file and do
a "Save As," making sure to save it into the same directory
as my final document (the one you're reading now). In this case,
I'm going to save test1.html into my "imagedream" directory,
which is a subdirectory of my "tutorials" folder.
This will
cause Dreamweaver automatically to update the links in the "test1.html"
file so that, relative to my images directory, all of the link
locations match up with my final document (the one you're reading
now).
3. The
touchy part
So now I should have two documents open in Dreamweaver: the one
you're reading now and the one called "test1.html."
The "test1.html" document contains all of the information
I want to place into my final document. As I mentioned earlier,
ImageReady has generated a JavaScript for me and placed it into
this "test1.html" document. So all I have to do now
is copy and paste that JavaScript into my final document.
Of course,
it's a bit more touchy than that. ImageReady's code is divided
into three distinct areas. One is inside the head information
of the HTML document. One is inside the <body> tag. And
one is just floating around near the top of the document.
Let's look
at the first two first.
Switch to Code View
1. In both
of your open documents, switch to the HTML view. Look inside "test1.html."
Up at the top, you should see something like: <!-- ImageReady
Preload Script (Untitled-1) -->. This is the beginning of the
ImageReady script. A bit further down (right above the </HEAD>
tag), you should see: <!-- End Preload Script -->. In between
these two tags, you see a bunch of code. Just select it all and
copy it, including the beginning and ending tags.
This is a portion of the Preload
script ImageReady generates. You'll
need to copy it into your new document.
Now switch
over to your destination document (in HTML view) and paste all
of that into the area just before the </HEAD> tag.
2. Now, back
to the "test1.html" document. Look for the <BODY>
tag. In it, you will see something that looks like this: ONLOAD="preloadImages();"
. Copy just that code (including the quotation marks), and paste
it into the <BODY> tag in your destination file.
The highlighted portion is the
"ONLOAD" script, which you will also
need to paste into your new document.
3. Finally,
the easy part is copying and pasting the remaining script, table
and images. Go back to layout view in both of your documents.
In the "test1.html" document, you should see your images
with a yellow shield on top and bottom. Select everything, including
the shields, and copy it all. Then paste it wherever you want
in your destination document.
NOTE:
Preview the "test1.html" document in your browser before
you complete this last step. If the rollover shows broken images,
you're going to have to do a simple manual tweak, detailed below.
4. Further
problems?
Now, if you go ahead and preview your page, you might see that
in all states besides Normal, you're getting broken images. This
is because Dreamweaver's file management system sometimes doesn't
recognize relative image links inside JavaScripts created by ImageReady.
This is easy enough to fix.
In your Code
view, you will see something like this: ONMOUSEOVER="changeImages('test1_03',
'rollover1slices/test1_03-over.gif' . The part that's relative
is the 'rollover1slices/test1_03-over.gif' . So all you have to
do is perform a find/replace for 'rollover1slices/ . In my case,
my directory structure requires me to go up two levels in the
directory, then into the images/ directory before I can get to
the rollover1slices/ directory. So, in my find/replace dialog,
I look for 'rollover1slices/ and replace it with '../../images/rollover1slices/
. (The little "../" tells the browser to go up one directory.
If you need to go up more than one directory, you can just add
in additional ones, such as "../../" for two directories,
"../../../" for three directories, etc.)
Dreamweaver's Find/Replace
You need to
do this again because some of the code will use single quotes,
while other parts will use double quotes. So, open up the find/replace
dialog again, and change the single quotes to double quotes, leaving
everything else the same. Then click Replace All.
Final thoughts
So why all the trouble? If you use Dreamweaver, why not just use
Fireworks? And if you use ImageReady, why not just use GoLive?
Well, that's not the way it always works out. Some people swear
by Fireworks and Dreamweaver. Others swear by GoLive and ImageReady.
But there's an awful large part of the population that likes ImageReady
and Dreamweaver. After all, if you prefer to do you animation
in ImageReady and your HTML in Dreamweaver, a little five-minute
conversion time isn't too much of a hassle.
Both Adobe
and Macromedia should work to make this a little bit easier on
the users. The burden will likely fall on Macromedia for two reasons.
First, Dreamweaver is highly extensible, so writing an importer
for ImageReady files shouldn't be too difficult. Second, practically
every designer in the world has ImageReady by virtue of the fact
that it's distributed free with Photoshop.
Neither company
should consider this an issue of caving in to the other. It's
simply a matter of making life easier on the user. And, at this
stage, the company that offers more import formats is likely to
come out ahead.
page
1,
2, 3,
complete, Home
