Animated Drop Down Menu

• You will need this file for this tutorial

1. Unzip and Open your file in flash MX. Click on the stage and open your Properties inspector. Click on the size button. Set the size to

• width = 385
• Height = 100
• Background = white.

2. Open your Library. Drag an instance of topmenubar symbol from the library onto your stage. Click on the instance on the stage to highlight it. Select the align panel from your windows menu. Click to to stage button so it is pressed. Click align top and Align horizontal center.Rename Layer 1 Background and lock it.

3. Add a layer above the background and call it menu. Drag an instance of the topmenu from the Library. Use the arrow tool to position it at the bottom of the topmenubar instance. When positioned correctly, It will overlap the bottom of the logo on the topmenubar slightly.

4. Double click the topmenu on the stage to edit it in place. You will see one frame on a buttons layer. This contains all your primary buttons. Click the insert new layer button on the time line pallete. The new layer will be above the buttons layer. Call it submenus. Add a new layer and call the new layer labels. Add a new layer above the labels layer. Call this layer Actions.

5. On the labels layer, click in frame5 and insert a keyframe by hitting your F6 key. Click in frame 10 and insert a keyframe by hitting your F6 key. Click in frame 15 and insert a keyframe by hitting your F6 key. Click in frame 20 and insert a keyframe again by hitting your F6 key. Click in frame 24 and Hit your F5 key to extend the keyframe on 20 to frame to 24.

6. Click in frame 1 of the labels layer. Open the property inspector. Set the Frame label box to home.

Click in frame 5 of the labels layer. Set the frame label on the property inspector to aboutus. Set frame 10 to services, frame 15 to products and frame 20 to contact.
 

7. Click in frame 1 of the actions layer. Select the action from the left column of actions. Actions=> movie control=> stop. Right click on frame 1 and select copy frame. Click in frame 5 of the actions layer and right click to select paste frames. Paste the frame also in frames 13, 18, and 20. Click in frame 24 of the actions layer and hit F5 to extend the frame to 24.

8. Move your play head back to frame 1 to view your buttons. Select your arrow tool and click somewhere off your stage. Use your arrow tool to click on the home button. Open your actions panel. Click actions=> movie control=>goto. Double click goto. Select the bullet for go to and stop. Set the type to Frame label from the drop down list; and set the frame to home from the drop down list.

9. Click on each of the buttons, one at a time. Add the same goto script, however, select the corresponding frame label for that button. ALSO on the Services and products button, select the option for goto and play. Once you have completed all the button scripts, you are ready to duplicate frames to propagate to other areas..

10. Click in frame 5 and hit F6 to duplicate the previous keyframe. click ion frames 10, 15, and 20 hitting F6 in each. Click in frame 24 and hit F5 to extend the keyframe out to 24.

11. Move the Play head back to frame 1. Click on the home button. When you are on the home pages, your home button should not work. Open the properties inspector and change the button property to a graphic. Set the home button to color=tint, white #FFFFFF, 20%.

12. Move the Play head to frame 5. Click on the About us button. Open the properties inspector and change the button property to a graphic. Set the About us button to color=tint, white #FFFFFF, 20%. Do the same on Frame 10 for the Services button; frame 15 for the Products button; and frame 20 for the Contact Us button. If you hit control test movie now, you should be able to track your movie clip movements on its timeline by clicking the buttons and seeing the button color change. Lock your buttons layer.

13. Move your play head to frame 10. Click in the frame 10 for submenus. Hit F7 to insert a blank keyframe. Open your library and drag the servicessubmenu movie clip out onto the stage. Zoom in with your magnifying glass. Switch back to your arrow tool and move your movie clip into position right up under the services button. Use your arrow keys on the keyboard for fine movements.

14. Click in frame 13 and hit F6 to insert a duplicate keyframe. Click back on frame 10 and resize the height and position the menu with the transform tool so it is a thin sliver just under services.

15. Click back on frame 10 of the submenu layer. Open your properties inspector and set tweening for that frame to Motion.

16. Move your play head to frame 15. Click in the frame 15 for submenus. Hit F7 to insert a blank keyframe. Open your library and drag the productssubmenu movie clip out onto the stage. Zoom in with your magnifying glass. Switch back to your arrow tool and move your movie clip into position right up under the Products button. Use your arrow keys on the keyboard for fine movements.

17. Click in frame 18 and hit F6 to insert a duplicate keyframe. Click back on frame 15 and resize the height and position the menu with the transform tool so it is a thin sliver just under Products.

18. Click back on frame 15 of the submenu layer. Open your properties inspector and set tweening for that frame to Motion. Click in frame 20 and hit F7.

19. When you are done you can publish your movie. If you were using this technique for your menu in your flash movie, you will script the buttons to not only move the menu timeline to the target frame, but you will move to the appropriate frame on the main timeline or scene in your movie.

Good luck!