Closing the Menu

If you have tested your menu, you may have noticed an embarrassing detail. The only way to close the menu is to click on one of the menu items. To solve this, we use a trick. The idea is to create a fine outline around the menu and to hide the menu when the cursor moves over it. To do this, proceed as follows:

1. Using the Rectangle tool, draw a big rectangle filled with the background colour and then select it.
   
   
2. Select Insert > New Symbol.
   
   
3. Name the symbol "End" and assign to it the Button behaviour. Validate.
   
   
4. Next, delete the symbol instance (with the Del or Backspace key).
   
   
5. Double-click on the DropdownMenu clip in the library to display the movie clip in the symbol editing mode.
   
   
6. Select Insert > Layer to create a new layer.
   
   
7. Drag the new layer under the old one and make sure that it is selected. Right-click frame 2 of the new layer in the timeline and select Insert Keyframe.
   
   
8. Drag an instance of the End symbol from the library onto the stage. Position it under the menu with the Arrow tool.
   
   
9. Click on the Scale button to reduce the size of the rectangle.
   
   
The End component must be larger than the menu by about twenty pixels on each side.


10. Double-click on the End symbol instance.
    
    
11. Activate the Actions tab, then click on the "+" button and select On MouseEvent.
    
    
12. Select the Roll Over checkbox (on the right-hand side of the dialog box).
    
    
In this way, you specify that the mouse event to be handled is the fly-over of the cursor over the area.


13. Click on the "+" button and select Go To in the menu.
    
    
14. Enter the value 1 in the field Number and validate.
    
    

This means that, when the mouse pointer leaves the menu, it flies over the End symbol and the menu closes (the movie clip reverts to frame 1).

That's it! You are now ready to adapt all aspects of this menu to your needs.