Simple Pull-Down Menus

I l @ ve RuBoard

Beginning ActionScript programmers always want to learn how to make pull-down menus. They are actually simple to make using ActionScript that we have already learned.

The basic idea is to have a title button and then several buttons that appear below the title when the user rolls over it. Figure 16.1 shows the title button by itself and then what happens when the user moves the cursor over the title button.

Figure 16.1. When a user moves the mouse over a title button, the other three buttons appear.

graphics/16fig01.gif

The entire pull-down menu appears in one movie clip that contains all four buttons. There are two frames to this movie clip. The first frame contains only the title button, which also stretches on its layer across to the second frame. The second frame, in addition, contains the other three buttons.

When the user rolls over the movie clip, which is waiting on the first frame, it goes to the second frame. It stays there until the user rolls off the movie clip.

The script to do this looks something like the scripts from Hour 13, "Rollovers." It uses hitTest to determine whether the cursor is over the movie clip. It keeps track of that fact and monitors any changes. When a change occurs, the movie clip goes to the first or second frame depending on whether the cursor is entering or leaving the movie clip.

 onClipEvent(load) {     previouslyOver = false; } onClipEvent(enterFrame) {     // is the cursor over the movie clip     currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true);     // if there is a change, go to another frame     if (!previouslyOver and currentlyOver) {         previouslyOver = true;         this.gotoAndStop("on");     }  else if (previouslyOver and !currentlyOver) {         previouslyOver = false;         this.gotoAndStop("off");     } }

This controls the appearance of the pull-down menu but does nothing for its functionality. Instead, you need to put normal button scripts on each button. They could take the user to another frame if clicked, or perhaps to another page. No script should be on the title button, so this need not actually be a button at all. However, I like having it as a button because you can use the over state of a button symbol as an easy way to give the user feedback when she rolls over it.

If you are using ActionScript to control other elements on the same frames as the pull-down menus, you will probably want to use swapDepths to ensure that the pull-down menus appear over any other screen content.

The example movie 16dropmenu.fla contains the example shown in Figure 16.1 along with the script. No script is attached to the buttons. Examine it to make sure that you understand how it works.

I l @ ve RuBoard