Lesson 4

Create an Animated Navigation Bar

 

OBJECTIVE:

In this lesson you will work through the process to create one drop-down menu.  A navigation bar has been provided as well as the necessary buttons.

 

Lesson:  Position the drop-down buttons

  1. Open fl5_4.fla from the Digital Design folder on the server
  2. Save it to your server folder as Fl_C5_L4_navBar_your username
  3. Click the homeBkgrnd layer, insert a new layer, then name it roadRally
  4. Click frame 2 on the roadRally layer, then insert a keyframe
  5. Display the Library panel, open the Buttons folder then drag the b_roadRally button to the position just below the Events button on the Navigation bar
  6. Insert a new layer above the homeBkgrnd layer, then name it auction
  7. Click frame 2 on the auction layer, then insert a keyframe
  8. Drag the b_auction button from the Library panel and position it below the b_roadRally button
  9. Click the Zoom tool on the Tools panel, then click the Events button on the Stage to enlarge the view
  10. Click the Selection tool on the Tools panel, then click each button and use the arrow keys to position them so they are lined up with the left side of the word Events on the Navigation bar – the top line of the Road Rally button must overlap the bottom border of the navigation bar, and the bottom border of the Road Rally button must overlap the top border of the Auction button

Summary:  You placed the drop-down buttons on the Stage and repositioned them.

 

Lesson:  Add a mask layer

  1. Click the roadRally layer, insert a new layer above the roadRally layer, then name it mask
  2. Click frame 2 on the mask layer, then insert a keyframe
  3. Select the Rectangle tool on the Tools panel, set the Stroke Color to none, then set the Fill Color to black
  4. Draw a rectangle that covers the buttons [Road Rally and Auction]
  5. Click the Selection tool on the Tools panel, then drag the rectangle to above the buttons (so the top is covering the word Events)
  6. Verify the rectangle is selected, click Insert on the menu bar, click Motion Tween, then click OK
  7. Click frame 5 on the mask layer, then insert a keyframe
  8. Use the Selection tool to move the rectangle so it is positioned back down over the buttons
  9. Click mask on the Timeline, click Modify on the menu bar, point to Timeline, click Layer Properties, click the Mask option button, then click OK
  10. Click roadRally on the Timeline
  11. Click Modify on the menu bar, point to Timeline, click Layer Properties, click the Masked option button, then click OK
  12. Click auction on the Timeline, then repeat step 11
  13. Drag the playhead along the Timeline, notice how the mask hides and reveals the buttons

Summary:  You added a mask that animates to hide and reveal the menu buttons.

 

Lesson:  Assign an action to a drop-down button

  1. Click frame 2 on the roadRally layer, then click the Road Rally button to select it
  2. Open the Actions panel and verify the Script Assist button is selected and b_roadRally is displayed – b_roadRally in the lower-left corner of the Script pane indicates that the b_roadRally button symbol is selected on the Stage and that the ActionScript you create will apply to this object
  3. Click the Add a new item to the script icon, point to Global Functions, point to Timeline Control, then click goto
  4. Click the Scene list arrow, point to Scene 2 – scenes are a way to organize large movies – in this case, Scene 2 contains the Road Rally screen for the website
  5. Verify the Type is set to Frame Number and the Frame is set to 1
  6. Collapse the Actions panel

Summary:  You used the Script Assist window to assign a goto action to a menu button.

 

Lesson:  Add a frame label and assign a rollover action

  1. Insert a new layer at the top of the Timeline, name it labels, then insert a keyframe in frame 2 on the labels layer
  2. Display the Properties panel, click inside the name text box, in the LABEL area, then type eventsMenu
  3. Click the Events button on the Stage to select it
  4. Expand the Actions panel, then verify b_events is displayed in the lower-left corner of the Script pane
  5. Click the Add a new item to the script icon, point to Global Functions, point to Movie Clip Control, then click on
  6. Click the Release check box to deselect it, then click the Roll Over check box to select it
  7. Click the Add a new item to the script icon, point to Global Functions, point to Timeline Control, then click goto
  8. Click the Type list arrow, then click Frame Label
  9. Click the Frame list arrow, then click eventsMenu
  10. Click Control on the menu bar, then click Test Movie
  11. Point to Events, then click Road Rally
  12. Close the Flash Player window, collapse the Actions panel, then save your work

Summary:  You added a frame label and assigned a rollover action using the Frame label.

 

Lesson:  Add an invisible button

  1. Click Control on the menu bar, click Test Movie, move the pointer over Events on the navigation bar, then move the pointer away from Events – notice that when you point to Events, the drop-down menu appears, however, when you move the pointer away from the menu, it does not disappear
  2. Close the Flash Player window
  3. Insert a new layer above the homeBkgrnd layer, then name it rollover
  4. Insert a keyframe in frame 2 on the rollover layer
  5. Select the Rectangle tool on the Tools panel, verify that the Stroke Color is set to none, then set the Fill Color to blue
  6. Draw a rectangle above the button Events (same width)
  7. Click the Selection tool on the Tools panel, then click the blue rectangle to select it
  8. Click Modify on the menu bar, then click Convert to Symbol
  9. Type b_rollOver for the name, click the Type list arrow, click Button, then click OK
  10. Expand the Actions panel
  11. Verify the rollOver button is selected and b_rollOver is displayed in the lower-left corner of the Script pane
  12. Click the Add a new item to the script icon, point to Global Functions, point to Movie Clip Control, then click on
  13. Click the Release check box to deselect it, then click the Roll Over check box to select it
  14. Click the Add a new item to the script icon, point to Global Functions, point to Timeline Control, then click goto
  15. Verify Frame 1 is specified
  16. Close the Actions panel
  17. Click the Style list arrow in the COLOR EFFECT area of the Properties panel, click Alpha, then set the percentage to 0
  18. Click Control on the menu bar, then click Test Movie
  19. Point to Events to display the drop-down menu, then move the pointer away from Events – the drop-down menu disappears
  20. Close the Flash Player window, then save and close the movie
  21. Exit Flash 

Summary:  You added a button and assigned a rollover action to it, then made a button transparent.