Web Design 2
Flash – Animating Navigation
4/17/08

 

In Flash web sites, any interface elements can be animated, including navigation buttons.

 

Animating the navigation buttons.

  1. On the nav layer, copy the f1 to f2
    1. You do this by right clicking on the keyframe, selecting “copy frame, then going to frame 2 and right clicking and selecting “paste frame.”
  2. Add a keyframe to f2 of the labels layer, then add the label “nav”
  3. Go back to f1 in the nav layer, and “modify, timeline, break apart”.
    1. Be sure to do this in f1, not f2 of the nav layer.
  4. select f1 on nav layer, hit F8, convert to a  movie clip and name it “nav_all
  5. double click to get inside the “nav_all” movie clip
  6. Modify, timeline, Distribute to layers.
    1. This will put each button on its own layer, along with an extra layer on top.
  7. Rename layer 1 to “actions”
  8. Reorder the layer stack so that the Home button is first, etc.
  9. Insert a keyframe in f10 for each nav button layer.
  10. Animate the position of the buttons, so that the buttons fly in from off the stage.
  11. Add a keyframe to f10 of actions
    1. On this keyframe, add a stop action, then add a goto and stop at frame or label” action to go to the “nav” label on the main timeline.
    2. Be sure to click “root” , so that it goes back to the main timeline (Scene 1)

    Hit refresh (F5) to see interface animate.