Animation

  1. Home
  2. Computing & Technology
  3. Animation

Animated Flash Dropdown Menu

By Adrien-Luc Sanders, About.com

8 of 9

Now you’ll need to use motion tweens to depict the buttons dropping down from behind the main header. For the animation to be smooth, you’ll need to time them; the first option below the rollover button will take the least time to travel the distance, while the last option below will take the most time, with the others in increments in between. If you set a certain number of frames’ difference between each, it should be uniform.

To break it down simply:

  • Copy the first frame for each menu option to the last frame of the length of the animation.
  • On each first frame, move the option button up until it is behind and perfectly in line with the rollover button. If your button is semi-transparent like mine, you may want to move everything but the rollover out by one frame.
  • Right-click on each option layer to insert a motion tween to animate the button dropping the distance into its menu position.
  • Copy your last keyframe on each layer on which the animation is shorter than on the longest layer, and paste it at the end of the animation so that it holds its static position instead of disappearing while the others animate.
  • Insert a stop on the first and last frames so that it doesn’t start or restart until we tell it to.
  • Explore Animation

    About.com Special Features

    Animation

    1. Home
    2. Computing & Technology
    3. Animation
    4. Flash Animation Tutorials
    5. Animated Flash Dropdown Menu

    ©2009 About.com, a part of The New York Times Company.

    All rights reserved.