This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating the MouseOut Animations
Now that you've built the basic tab shape, the next step is to animate it using Fireworks's Tween feature. Tweening is the process of automatically building an animation based on a starting point and an ending point that you define. With tweening, you'll create the MouseOut stage of your animated rollovers (what the tab does when the user rolls off of it). In the MouseOut stage, the tab will animate upward so that it is hidden under the main navigation bar.
-
Continue working with your saved file or open ca_1.png from the Project 6 folder. Open the Library panel and select the tab_default graphic. From the Library panel's options, choose Duplicate and then double-click the new symbol to open the Symbol Properties window. Change its type to Animation Symbol. Change its name to shoptab_up.
-
While still in the Symbol Properties window, click the Edit button to open the Symbol Editor window. Select the Text tool. Before you begin typing, adjust your settings in the Properties Inspector to the following: right-aligned, 12 point, dark blue (#003366) text. Click on the middle right area of the tab to begin typing.
-
Type Shop for gear, from rafts and kayaks to the very latest in accessories! and make sure to position the text just above the bottom-right anchor point of the tab.
-
Select the new text and the tab element, choose Modify | Group, and then choose Modify | Symbol | Convert to Symbol. Accept the default settings and name the Graphic Symbol shoptab.
-
In the Symbol Editor window, create a duplicate of the shoptab instance by choosing Edit | Copy | Paste. Position the duplicate exactly 20 pixels above the original by holding down the Shift key and pressing the up arrow on your keyboard twice.
-
Shift+select both instances of the shoptab symbol and choose Modify | Symbol | Tween Instances. Enter 2 steps and check the Distribute to Frames option. Click OK.
-
Close the Symbol Editor window to return to your document. From the Library panel, drag an instance of the shoptab_up animation to the canvas. Place it on the menu animations layer. Click OK to add the frames needed for the animation when the dialog box appears.
-
While in Frame 1, use the Properties Inspector to position the animation at 0,73. Save your file.
-
To create the remaining animations for the Lessons, Trips, and About Us buttons, select the original shoptab_up symbol in the Library panel and choose Duplicate from the Options pull-down menu. Name the duplicate lessonstab_up.
-
Double-click the lessonstab_up symbol to edit it. In the Frames panel, turn on Onion Skinning from the lower-left pull-down menu. Choose Select | Select All to select all of the frames and then choose Modify | Symbol | Break Apart. The Break Apart command enables you to edit the text of the symbol. Turn off Onion Skinning in the Frames panel.
-
Choose Edit | Find and Replace. Select the Search Document and Find Text settings. In the Find field, enter the text from the shoptab_up symbol. In the Change To field, enter Learn to paddle! We offer whitewater, sea & surf kayaking, and guide school. Press the Replace All button. Close the Symbol Editor window
Figure 6.5 Each symbol has its own set of layers and frames.
){kind=link}
NOTE
Symbols have their own unique set of layers and frames apart from the main document.
The symbol is now created in the Library. Any occurrence of a symbol within another symbol (as is the case here) or on the canvas is called an instance.
Figure 6.6 Adjust text settings in the Properties Inspector before you begin typing.
){kind=link}
Figure 6.7 To create a tweened animation, you need two copies of a symbol instance—a starting position and an ending position.
){kind=link}
With two copies, or instances, of a symbol, you can ask Fireworks to create an instant animation by adding a number of steps in between the two. The first instance establishes the starting point, and the second one marks the ending point. "Tweening" is the process of figuring out the steps between the starting and ending points.
TIP
You can use the Shift key with the Page Up Arrow to move an element 10 pixels at a time.
Figure 6.8 The Tween function adds animation steps between a starting and an ending symbol instance.
){kind=link}
The number of steps you choose equals the number of steps that will be added between the starting and ending instances. The Distribute to Frames option will add enough frames to your file to place each instance on a separate frame. The original instance will exist on the first frame. The copied instance will be placed on the last frame. The stepped instances will be added to the frames in between.
Figure 6.9 Position the animated symbol in your document on the menu animations layer.
){kind=link}
You can move the animation from any frame in your document, and all frames will be repositioned properly. Step through the animation using the controls along the bottom of the document window to see the tab slide up under the site's framework. This animation will be the MouseOut action when the user rolls off one of the navigation buttons.
Figure 6.10 Use the Find and Replace window to update all frames of the animation symbol with new text.
){kind=link}
In the Library panel, create another duplicate of the shoptab_up symbol. Rename it tripstab_up and double-click it to edit it. Repeat steps 10 and 11 to turn it into the Trips tab. Repeat these steps again to build the About Us tab. When finished, save your file.