Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

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.

  1. 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.

  2. 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.

  3. Figure 6.13 In the Layers panel, turn on only one of the animated tab's visibility.

  4. 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.

  5. 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.

  6. 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.

  7. Figure 6.14 Ctrl+click (Mac) or right-click (PC) on the slice covering the tab animation.

  8. Repeat this operation for the remaining animations. You should end up with four down animations and four up animations.

  • + Share This
  • 🔖 Save To Your Account