Menus with Beauty and Brains 5 pg 2: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 5: Fireworks Rollover Basics

Although I will show you how to optimize your images in Fireworks, you should read my earlier article, Graphic Underworld, for more information on optimizing images for the Web. When you are working with slicing areas of pages, you will come up with the best results when you understand how images are compressed, and know instinctively whether JPG or GIF images will deliver the look you require.

Also, since Fireworks offers both vector and raster formats, it is a very good idea to become comfortable with the difference between the two formats. Again, I will refer you to another section of Graphic Underworld: Behind The Pretty Pictures for more information.

Rollover Basics in Fireworks
There are several ways to create rollovers in Fireworks, and we will step through two methods. Any rollover involves preparing at least two separate images – one to use as the normal view, or the look when the page is first displayed. A second image is prepared to show when the mouse rolls over the image, indicating a link to the visitor. You can also prepare a third and fourth image, one to display when the page indicated by that link is active, or as a different look when the link is clicked. For the purpose of this exercise, we will only work with two states, normal and over.

Frames and layers in Fireworks. You can have more than one layer on each frame, but those layers will only show when the frame containing the layer is active, unless you specify otherwise (see below).

Frames vs Layers
First a word about frames and layers in Fireworks. Fireworks offers layers like any raster or vector program, allowing you to place items on multiple layers for convenience, while viewing all layers at the same time. If you do not understand layers in Fireworks well, please take a few minutes to read through Fireworks in Layers. If you are comfortable with the layers concept, you are ready to add the new term "frames" to your Fireworks vocabulary. Note: There is absolutely no connection to the HTML definition of frames when you are working with Fireworks frames.

Frames control your image states. (You also build animated graphics in Fireworks using the frames function, but we will only be discussing frames in relation to rollovers.) I have prepared a diagram at the left to illustrate how frames and layers relate. The gray shapes indicate frames, with the white representing layers. The red lines simply indicate that the frames and layers are connected. Frame 1 has two layers, Frame 2 has only one layer, and Frame 3 contains 2 layers.

If you wish to have a layer appear on all frames, select Share Across Frames when creating the new layer.

Although the layers are listed in numerical sequence (unless you assign layer names) in the layers window, they are related to the frame that was active when the layer was created. The objects on a layer will only show when the frame that contains them is active. If you do want a layer to be shared across frames, check Share Across Frames when you create the new layer.

Having said all that, and taken a chance on confusing you quite seriously, I can tell you that you will probably not need to worry about layers if you are simply creating rollovers. My reason for bringing this subject to the table is simply to ensure that there is no confusion between layers and frames, since frames are instrumental in creating automatically generated rollover images.

Fireworks places all objects on Frame 1 unless you create frames and place your objects on a new frame.

A basic setup for a simple rollover. When Frame 1 is active, the Normal state shows on the canvas, in this case, text with an added effect. When Frame 2 is active, the Over state, or text without an effect for this sample, appears. The completed rollover image appears below.

Working with Frames
Frames work much like layers, but when creating rollovers, each state of your rollover, i.e., normal and over states, is stored on separate frames. Let's look at a very simple example.

I have created a document that contains a rectangle with text. The sample at the left shows how Fireworks has placed the objects I created on a frame called Frame 1.

When I create a rollover, either manually, or by creating a button (we will look at both methods later in this article), the Over state for the rollover is placed on Layer 2. This is the method Fireworks uses to generate the images you require for your rollover.

In the sample at the left, I have included the view of both the Normal (Frame 1) and Over (Frame 2) states for the rollover image. The Normal state features a text effect which has been removed for the over state. The sample shows the active frame, and the image that is showing on your canvas with that choice selected.

Don't worry if you don't know how to get to this point yet. Right now it is only important that you understand that the rollover states appear on different frames. Soon we will look at how to get the objects on the frames, and from there, save them as images we can use to create our rollovers.

Let's move on now to creating slices, and using those slices to build rollover images.

Next page

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