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

Building the MouseOver States

In this section, you'll build the MouseOver states (what the tabs look like when the user rolls over them). Using a duplicate of each tab animation you've already created, you will use a very cool built-in Fireworks command that reverses the upward motion of the animation.

  1. Continue working with your saved file or open ca_2.png from the Project 6 folder. Highlight the shoptab_up animation in the Library panel. From the panel options, choose Duplicate and double-click the new symbol to open its Properties and name it shoptab_down.

  2. Click the Edit button to open the Symbol Editor window. Choose Commands | Document | Reverse Frames. In the Reverse Frames window, choose the All Frames options and click OK. Close the Symbol Editor window.

  3. Figure 6.11 Select All Frames in the Reverse Frames dialog box.

  4. Repeat steps 1 and 2 to complete the three remaining MouseOver tab animations.

  5. Drag a copy of each MouseOver animation onto the workspace to Frame 1 of the menu_animations layer. Position each of the new MouseOver tab animations at 0,73 using the coordinate fields in the Properties Inspector. Save your file.

    Figure 6.12 Drag each of the MouseOver animation symbols to the main document.

  • + Share This
  • 🔖 Save To Your Account