Simple Rollover


The most basic animation is the Simple Rollover. Rollovers are frequently seen in navigation bars and in buttons on web pages.

The rollover comprises two images: an Up image and an Over image. When a web page is first loaded, the Up image is displayed. When the mouse is moved over or rolls over the Up image, it is replaced with the Over image.

Caution

Because both images share the same space, they must be the same size in the overall image. Any variation in size ends up with a "hiccup" during the mouseover and causes the Over image to be distorted.


To create a Simple Rollover button, the first thing you need to do is to create the button's Up and Over states, using Frames 1 and 2. For instance, you could create a piece of black text in Frame 1 for the Up state and then have the same text (same location and size) appear in red in Frame 2.

After you've created two visual arrangements for the button's Up and Over states, use the Slice tool and drag it over the visuals you want to change to create a slice. With the slice still selected, open the Behavior panel Window, Behaviors and click the Behavior (+) button to open the list of behaviors. Select Simple Rollover from the list and Fireworks creates the rollover. The Up state is automatically set as the visual content under the slice in Frame 1, and the visual content in Frame 2 is the Over state.

For ease of use when the rollover graphic is exported to Dreamweaver, you can enter the URL in the Property Inspector's Link field as well as the Alt text in the Alt field. You may also want to delete the default slice name and give each slice a more meaningful name.

You can test simple rollovers in Fireworks' preview mode by clicking the Preview button at the top of the document window (see Figure 4.7).

Figure 4.7. Use the Preview button in the document window to test the Simple Rollover. The left image is the Up state and the right image represents the Over state.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net