- Getting Started
- Building the Tab Graphic Symbol
- Creating the MouseOut Animations
- Building the MouseOver States
- Exporting the Animations to Create External Files
- Adding the Swap Image Behaviors
- Modifications
Exporting the Animations to Create External Files
When you create remote rollovers in Fireworks, a static image typically appears somewhere on the page when the user rolls over a button. Instead of displaying a static image, however, you can show an animation. To use the animations you've built so far in this project as swap rollovers, you must first export them as animated GIFs.
-
Continue with your saved file or open ca_3.png from the Project 6 folder. Turn on the Web layer's visibility. Select the slice labeled tab_default (covering the tab animation area). The slice is optimized as an Animated GIF, using 16 colors with no dither.
-
In the Layers panel, turn off the Eye icon of the default tab graphic to hide it and make only one of the tab animations visible. Ctrl+click (Mac) or right-click (PC) on the tab_default slice to open a contextual menu. Choose Export Selected Slice from the menu.
-
In the Export dialog box, navigate to your desktop and create a new folder to contain the page. Name the folder Site. Inside the new Site folder, create another folder and name it animations.
-
In the Layers panel, turn off the current animation and turn on a different one. Again, on the selected slice, right-click or ctrl+click and select Export Selected Slice from the context menu. In the Export Settings window, choose Images Only, Selected Slices Only, and disable the Current Frame Only option. Name and save the file.
-
Repeat this operation for the remaining animations. You should end up with four down animations and four up animations.
Figure 6.13 In the Layers panel, turn on only one of the animated tab's visibility.
The Export Settings should be Images Only, Selected Slices Only. Because you want to export all frames of your animation, uncheck the Current Frame Only option. Name the file according to the animation.
Figure 6.14 Ctrl+click (Mac) or right-click (PC) on the slice covering the tab animation.