Back to DEB Tips

Flash: Create an Animated Navigation Bar

This exercise will show you how to create an interesting rollover effect with a nested symbol.

1. Set the stage to 600 x 40

2. Choose a blue color for the stage background

3. Create a BUTTON SYMBOL

Name: nav bar

Choose the button behavior and click OK

4. BUTTON SYMBOL MODE

Layer 1:
Create a blue fill (same color as the stage background) with NO stroke on the UP and OVER frames

Layer 2:
Create two white lines at the top and bottom of the blue fill we just drew on the UP and OVER frames

5. Select the blue fill on Layer 1 on the OVER frame and choose INSERT…CONVERT TO SYMBOL

Name: animation
Behavior: movie clip

6. Double-click the blue fill’s crosshair on-screen to go to MOVIE SYMBOL MODE

7. MOVIE SYMBOL MODE

Layer 1:
Name the Layer: button

Extend the Timeline to frame 10

Layer 2:
Name the Layer: animation

8. Frame 1: Create a small white rectangular outline (no fill) in the center of the button

9. Frame 5: Insert a keyframe on frame 5 and use the Scale tool to slightly enlarge the rectangular outline

10. Frame 10: Insert a keyframe on frame 10 and use the Scale tool to enlarge the rectangular outline again, this time filling the entire width of the button fill that resides on layer 1

11. Select frames 2-4 and create a shape tween; then select frames 6-9 and create another shape tween

12. Go back to SCENE 1

13. SCENE 1

Layer 1:
Name the layer: button

Choose Window...Library

Drag the button from the Library onto the Stage; resize if necessary

ALT + drag to create copies of the button symbol on the Stage

Layer 2:
Name the layer: text

14. Create the text labels for each button on the Stage:

• About us
• Contact us
• Locations
• Subscribe
• Weather

15. Preview the movie in the TEST MOVIE window

16. Add a STOP action to the movie clip. This will prevent the shape tween from looping when the user mouses over the button.

Double-click the movie clip in the Library

Add a new Layer and name it ACTIONS

Select frame 10 and insert a BLANK KEYFRAME

Add a STOP action to frame 10

17. Preview the movie again in the TEST MOVIE window

18. ADD THE GET URL ACTION TO EACH BUTTON ON THE STAGE

Source: This lesson was developed especially for YOU by Debbie Berg  :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

Back to top

about debbie | debbie's clients | deb's schedule | deb's monthly tip
flawebdeb home | dreamweaver | flash | frontpage | photoshop
web seminar | digital design camp | dreamweaver/flash conference