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 is composed of 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.

Because both images share the same space, they must be the same size. Any variation in size ends up with a "hiccup" during the mouseover.

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.

After you've created two images for the button's Up and Over states, use the Slice tool and drag it over the image to create a slice. With the slice still selected, open the Behavior panel (Window, Behaviors) and click the Add Behavior (+) button to open the list of behaviors. Select Simple Rollover from the list and Fireworks creates the rollover.

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 (Figure 26.7).

Figure 26.7. Use the Preview button in the document window to test the Simple Rollover. The top image is the Up state and the bottom image represents the Over state.

graphics/26fig07.jpg




Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

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