Push Pull-Down Menus

I l @ ve RuBoard

There are many different ways to program a pull-down menu. There are also many alternate ways that a pull-down menu can work. For instance, in the preceding example, all the user has to do is roll over the title button and the menu appears. I like this way because the user can easily figure out where the pull-down menus are by just moving the mouse around.

However, pull-down menus commonly work in another way: The user clicks on the title button for the menu to appear. Then the user must hold down the mouse button, move the cursor down to the selection, and release the mouse button at that point.

The example movie 16pushmenu.fla demonstrates this variation of the pull-down menu. The menu elements are the same: a two-frame movie clip with a title button on both frames and the menu buttons on the second frame only. However, the scripts are completely different.

No scripts are on the movie clip. They are all inside the movie clip on the frame, or attached to the buttons.

The title button has the following script. It calls the function expandMenu when the button is clicked. If the mouse is released over the title button, or anywhere outside the buttons, collapseMenu is called:

 on (press) {     expandMenu(); } on (release, releaseOutside) {     collapseMenu(); }

In addition, the script continues with on (dragOver) and on (dragOut) handlers. These are like on (rollOver) and on (rollOut) handlers, but the mouse button needs to be clicked while the cursor moves.

 on (dragOver) {     rollOverMenu(); } on (dragOut) {     rollOutMenu(); }

The four functions defined in the title button handlers are all in the frame script. The expandMenu function sets a variable named expanded to true and then goes to the second frame of the movie clip:

 function expandMenu() {     expanded = true;     gotoAndStop("on"); }

The collapseMenu function does the opposite :

 function collapseMenu() {     expanded = false;     gotoAndStop("off"); }

The rollOverMenu and rollOutMenu functions check expanded and change the frame if the menu is currently expanded. This means that the user can click on the title button, hold down the button, and move out from and back over the menu to see it collapse and expand. This is a minor feature of the menus, but a nice touch.

 function rollOverMenu() {     if (expanded) {         gotoAndStop("on");     } } function rollOutMenu() {     if (expanded) {         gotoAndStop("off");     } }

The scripts in the three buttons of the menu use an on (release) handler to catch the user choosing that menu option. It calls collapseMenu and then performs its function ”which is just a trace command in this example.

The on (dragOver) and on (dragOut) handlers keep the menu expanded when the mouse moves over the buttons and also collapses the menus when the cursor moves completely off all menu buttons:

 on (release) {     collapseMenu();     trace("History Button Pressed"); } on (dragOut) {     rollOutMenu(); }

One last thing needs to be done for this to work. The buttons need to have a property change. The Track as Button setting seen in the button's Property panel needs to be changed to Track as Menu Item. This allows the button to get mouse events such as release without first getting a press event.

Give the example movie 16pushmenu.fla a try. It is interesting to see a similar functionality to the previous example but with completely different code.

There are also many more pull-down menu variations and script variations to go with them. It depends on the exact functionality you are looking for and which ActionScript commands you feel the most comfortable with.

I l @ ve RuBoard