In this lesson you will learn how to:

Transcription

1 LESSON 5: CREATING BUTTON STATES OBJECTIVES In this lesson you will learn how to: use FreeHand layers to create navigation buttons export layers from FreeHand to Flash create and edit symbols and instances in Flash use the Flash Symbol Library assign URLs to buttons in Flash CONTEXT In this chapter you ll learn to use FreeHand and Flash to create navigational buttons for the Urban Basic Web site. FreeHand allows you to design the navigation buttons and lay them out in the Web site concept you re developing. Once the design has been approved it can be exported from FreeHand as a Flash file. As in the last chapter, you will import the file into Flash and add interactivity. You may find it useful to open and view the finished movie before and during the exercises. It s located as a Shockwave Flash Movie called navbar.swf in the images folder inside the finished Urban Basic Web Site (Figure 5-1). You can open it in Flash by double-clicking on it, and then click on the buttons to see them change. Better still, to see it working as a navigational bar on the Urban Basic Web Site, open the file urban.htm in your Web browser. Figure 5-1 The transparent background in navbar.swf appears here as white. Figure 5-2 The navbar.swf movie functions as a menu bar on the Web site. 2 9

2 EXERCISES Getting Started 1. Look at the finished navigation buttons. Navigate to the images folder inside the finished Urban Basic Web Site. Double-click navframe.fla. Roll-over and click the buttons to see how they function. Close Flash. 2. Navigate to the Lesson 5 folder and open Buttons.ft8 (PC) or Buttons (Mac) file. Notice the normal state of the button (when the cursor is away from the buttons). The normal state of the buttons is the Up state. When the cursor is over a button, the button changes color. This state is called the Over state. When the cursor is over the button and the mouse is clicked, it is known as the Down state. Using layers to create navigation buttons In this exercise you ll use FreeHand layers to arrange the button states for the Urban Basic Web site. Layers are an important part of Web-site concepting with FreeHand. In the Button.ft8 file the button state description for each graphic is described on the left side of each graphic (Figure 5-3). Since the descriptions are on their own layer, they can be turned off before export (so they will not show up in the final.swf movie). 1. Choose Window > Panels > Layers. 2. Add a new layer for Up, Over, and Down button states. Choose N e w from the O p t i o n s drop menu on the L a y e r s panel (Figure 5-4 ). Figure 5-4 The Layers panel Figure 5-3 An instruction layer from the Urban Basic site concept 3. Name the new layer for the button state it will represent. Doubleclick the text field named Layer-1 (Figure 5-5). Name the layer Up. 4. Add two new layers. Choose New from the Options drop menu on the Layers panel. Repeat. 5. Double-click the text field named Layer-2 and name it Over. Double-click the text field named Layer-3 and name it Down. 6. Move the graphics representing each button state to the matching layer. Using the Pointer tool, select the graphic representing the Up state (labeled Up ). With the Up graphic selected, click the text field named Up (on the Layers panel). 7. Move the remaining button states to their matching layers. Using the Pointer tool, select the graphic representing the Over state. With the graphic selected, click the text field named Over. Repeat for the down state. With the Down graphic selected, click the text field named Down. Figure 5-5 Naming the Up state layer 3 0

3 Figure 5-6 Testing the new layers the Up layer is turned off. 8. Test your new layers. Choose All Off from the O p t i o n s drop menu on the Layers panel. Notice the check marks next to each layer on the Layers panel disappear all the layers are turned off. To test your new layers, click the left side of the Up layer (Figure 5-6) the Up layer will appear on the screen. Repeat for the Over and Down states. 9. Align the button states by their centers. With only the Up, Over, and Down layers visible, choose Edit > Select > All Choose Modify > Align From the Align dialog, select Align Center from the horizontal and vertical drop menus. Click A l i g n Using the Pointer tool, drag the selected objects to the upper left corner of the page and align the center of the selected objects on the corner of the page (Figure 5-7) The button states are ready to export. Figure 5-7 Aligning the button states on the corner of the page Exporting layers from FreeHand to Flash 1. Choose File > Export. 2. From the Format drop menu, select Flash. Click the S e t u p (PC) or O p t i o n s (Mac) button. 3. Deselect the Animate pages box (Figure 5-8). Click OK. 4. Name the file Jacket.swf. Click the Export b u t t o n. 5. Close FreeHand. Figure 5-8 Flash export options deselect the Animate pages box. 3 1

4 CREATING AND ALIGNING A SYMBOL (MAKING A BUTTON) With the button-making capability in Flash, you can quickly turn any graphic into an interactive button by creating a symbol. In the following exercises you ll add interactivity to the button states you created and exported from F r e e H a n d. Creating Buttons in Flash Make an animation with four key frames to create a four-state rollover button. Each frame is given a specific function: The first frame the Up state represents the button s appearance in its normal state, whenever the mouse pointer is not over the button. The second frame the Over state represents the button s appearance when the mouse pointer is over it. As you create buttons, design the appearance of the button s over frame to change in some way from its up frame to indicate that clicking the button produces some result. The third frame the Down state represents the button s appearance while it is being clicked. The fourth frame defines the button s active area and is assigned an Action to be performed when the button is clicked (usually, go to the next scene). This frame is never actually displayed as part of the button s behavior. 1. Launch Flash. 2. Create a new symbol. A symbol is a reusable object that can include all the functions of a Flash movie (the Flash 3 curriculum will provide more depth). Choose Insert > Create Symbol. Name the new symbol Jacket. Select Button (Figure 5-9) and click OK. 3. Import the Flash layers you exported from FreeHand. Choose File > Import. Navigate to the file Jacket.swf. and import it. 4. Click each keyframe on the timeline (Up, Over, and Down). Each keyframe represents a separate state for your new button. 5. Click the arrow above the Jacket tab (upper right corner). 6. Add the button to the new movie. Choose Window > Library. Figure 5-9 Drag a new symbol to the Preview window 3 2

5 7. Use the Library to view all of the symbols available in a movie. Your library only contains the Jacket symbol you just created. Drag the Up graphic from the Preview window of the library to the Stage (Figure 5-10). Click Escape to deselect. 8. Test the new Up, Over, and Down button states. Choose Control > Enable Buttons. Move the cursor over the button graphic and click. The button states should be active. 9. Finish the Flash navigation for the Urban Basic Web site. Choose File > Open and navigate to the Lesson 5 folder and select N a v b a r (the library with the Jacket symbol should still appear). Figure 5-10 Dragging a new symbol to the Preview window 1 1. The other buttons have already been added to the navbar movie. Add the Jacket symbol to the navbar movie. Drag the Up graphic from the Preview window of the library to the Stage (Figure 5-11). Click Escape to deselect Test the new Up, Over, and Down button states. Choose Control > Enable Buttons Move the cursor over the button graphic and click. The button states should be active. Figure 5-11 Dragging a new symbol to the navbar movie 3 3

6 Attaching a URL and Exporting the Flash Movie Flash lets you specify where the button will take visitors when clicked. In this exercise you ll learn to create a link to the correct URL for the button. 1. Double-click the Jacket button to display the Instance Properties dialog box. By changing instance properties, you can assign actions, choose behaviors, and specify settings for color effects. You can also change the symbol assigned to the current instance. 2. Edit the instance properties. From the Instance Properties dialog, select the Actions tab (Figure 5-12). Figure 5-12 Dragging a new symbol to the navbar movie 3. From the + drop menu, select Get URL. 4. Type in the Get URL parameters box. Click OK. 5. Export the new navigation movie to your desktop. Choose File > Export Movie. Name the file n a v t e s t. s w f. 6. Test your Flash navigation in a Web browser. Open your Web browser. Open navtest.swf to test the link to (Note: you must have the current Shockwave Flash plug-in installed on your browser and your computer must have an internet connection.) MORE EXERCISES TO SHARPEN YOUR SKILLS Add sound to the Hit button state for the Jacket button. 1. Double-click the Jacket symbol in the library. 2. Choose E d i t form the S y m b o l pop-up menu (in the library). 3. In the button s timeline, add a layer. 4. Move the Timeline Header to the Hit state on the new layer (this becomes the sound layer). Choose Insert > Keyframe. 5. Add a sound to the new keyframe and choose Modify > Frame to display the Frame Properties dialog. 6. Select the sound tab and select e v e n t from the Synch Drop menu. Click OK. 7. Test your movie. 3 4