Creating a drop down menu interface component

In this tutorial you will create a drop down menu interface component that will allow you to make Windows-like menu interfaces for your Flash applications.

1. Open Flash and create a new movie.

2. Insert a new Button symbol and call it 'Button'. Draw a rectangular button shape. You can give it an 'Over' state if you like, but more importantly make sure the rectangle is filled with a colour.

3. Insert a new Button symbol and call it 'Invisible Button'. Draw a rectangle on the stage, then click on the first frame in the Button timeline (Up). Drag the frame across to the 'hit' frame to create a button that has no visible components - only a 'hit' frame.

4. Back on the main Timeline, insert a new Movie Clip symbol and call it 'Menu'. Rename the existing Layer 1 to 'Invisible Button'.

5. Insert 3 new layers in the 'Menu' symbol and name them, from top to bottom, 'Actions', 'Text' and 'Buttons'.

   Next we will set up each layer individually.

   Actions Layer

6. Place a stop command in frame 1 of the layer.

   stop();

7. Insert a new frame (press F5) at frame 40 in the timeline.

   Buttons Layer

8. Select Frame 1 of this layer and label the frame 'closed'.

9. Select Frame 1, then drag an instance of the Button from the Library to the Stage. This will be the button which allows the user to open up the menu.

10. Insert a new keyframe at frame 20 of this layer (press F6) and give this frame a label of 'open'.

11. With Frame 20 of the Buttons layer selected, drag 4 instances of the button onto the stage - arrange them one under the other beneath the Button you placed earlier, ensuring there are no spaces between the buttons (this is very important). You should now have an arrangement of 5 buttons similar to that shown below:

    

12. In the Buttons layer, insert a frame (press F5) at Frame 40 of the timeline.

13. Now select Frame 1 of the Buttons Layer, then select the button that is on the stage. Attach the following Actionscript to that button:

    on(rollOver) {
    	gotoAndStop("open");
    }
    

    Text Layer

    The Text layer contains the text that goes with the buttons on the menu.

14. In Frame 1 of the Text layer draw some text over the top menu button saying 'Menu'.

15. Insert a keyframe at Frame 20 of the Text layer.

16. In Frame 20 draw text over each of the other menu buttons - use whatever text you like.

17. Now insert a frame at Frame 40 of this layer.

    Invisible Button Layer

18. Insert a new keyframe at Frame 20 in this layer.

19. Drag an instance of the 'Invisible Button' from the library onto the stage. Resize the Invisible Button so that it covers the entire menu, with a slight overlap (shown in pale blue in the diagram below):

    

20. Insert a new frame (press F5) at frame 40 in the timeline.

21. Select Frame 20 of this layer, then select the Invisible Button. Attach the following Actionscript to that button:

    on(rollOver) {
    	gotoAndStop("closed");
    } 
    
    

    Main Timeline

22. Back in the main timeline drag an instance of the Menu from the Library onto the stage.

23. Your drop-down menu is now ready for testing. The menu should drop down when your mouse pointer rolls over the Menu button, and it should close when the mouse pointer moves onto the area of the Invisible Button. Try out the completed version below:-

24. The next step would be to assign button actions to each of the button that make up your menu.

Additional things to try

1. Create a Flash movie with several frames and use the Menu for navigating between each frame of the movie.