|
 |
Menus with Beauty and Brains 5: Exporting Rollover Images
|
| |
|
Whew! We've worked hard to get here, and we still have not saved a
file. Why did I take the long road, when I could have just used the
automated features, probably using one or two pages for the complete
process? Now that you know what is going on in Fireworks when you create
a rollover, you will understand the automated functions much better.
Every image change is created in much the same way, so you have the
inside scoop for many operations. But let's get that final save out
of the way.
|
| |
|
|
| |
|
Export Settings
Keeping with the theme of this article, we are only exporting the slices
that we require for our rollovers. Fireworks likes to work in squares,
however, and will create extra slices to fill in the holes. This saving
habit does not harm the images you require, but does add extra images
that you do not need – files you'll have to delete to keep your
image folders in order. Never take an export setting for granted when
saving sliced images.
I am in the habit of selecting the slices I am exporting, and then
specifying that only the selected slices are to be included. I do this
for any graphics program, and have had much cleaner results since I
started. If you have missed the edge of your image by one pixel with
your slices, chances are, your images will be fine. But if you are not
using the selected slices only option, you will end up with at least
two extra images saved for every slice along the error. Across an entire
design, this can be a dozen or more extra images, even with only two
rollover states.
|
| |
|
|
|
Slices that require rollover images are selected for
export.
Settings in the Export window for saving images on
multiple frames.
|
|
Click the Show/Hide Slices button to make the slices layer visible,
if necessary. Select the slices that will have rollovers, using your
Shift key to select multiple slices. (We will come back and save the
logo image in a moment.) The correct selection is shown at the left.
Select File>Export to open the Export window. As a first step,
always specify the folder where you would like your images to be stored.
You are about to create nine image files for this simple little sample
– you do not want them to be lost on your hard drive.
The settings in the Export window are very important. We are not saving
the HTML file, so the File Name setting does not concern us for this
sample. To specify that only the image files are saved, select Images
Only from the Save As Type drop-down list. Select Export Slices from
the Slices drop-down list. Click the Selected Slices Only option to
activate, and make sure the Include Areas Without Slices is deactivated.
Finally, make sure that the Current Frame Only option is off.
Click Save, and both the Normal and Over images for each of your slices
will be saved to the specified folder.
We still have to save the slice containing the logo, however. Since
slices work across all frames, there is no way to prevent Fireworks
from creating a rollover image for each slice. You can simply select
all the slices and allow the extra images to be created, deleting the
extra files. In this case, a file named logo_f2.gif would be created
and not required.
|
| |
|
|
|
Saving an image with no rollover state by restricting
the exported images to the current frame.
|
|
However, you may have several non-rollover images included in your
design, and that is not an efficient way to work. In that case, export
the slices containing rollovers as above, and export a second time,
selecting only the images that do not require a rollover state.
For this sample, make sure that the original Frame 1 (now Normal) is
active, and select the top slice only. Select File>Export to open
the export window, and keep all settings as for the first export, with
the exception of the Current Frame Only option. This time we want this
option activated so that Fireworks will create a file only from the
active frame.
And finally, taking the long way, with no shortcuts, we have completed
a full set of rollover images in Fireworks. I have again included the
completed menu below. Take a look at the code and you will see that
HTML code is displaying most of this menu ... exactly what we wanted.
Plus, if you look down on the left, you can see the exact same code
and images filling a much smaller area. That is the power of liquid
design, not possible when you use the automatic slicing and HTML generation
methods.
|
| |
|
|
|
|
|
Take the knowledge you have of frames and slices, and experiment with
the automatic rollover capability on your own. The manual has good instructions,
and now that you know how the images are saved, I'm sure you will have
no trouble working with the automation. However, even though it seems
so easy, and at times, even I am hard pressed to argue hard against
any automation, keep your manual skills fresh and sharp. Automation
will never keep up to the creativity of a designer's mind ... manual
knowledge is your guarantee that you will always be able to create what
your mind can conceive. That is design power.
|
| |
|
|
|
|
|
Back to start
Menus with Beauty and Brains 5: Tutorial Index
Fireworks Rollovers
Fireworks Rollover Basics
Creating Slices and Rollover Graphics
Optimizing Slices in Fireworks
Exporting Rollover Images
 
|
 |
|
|
|
