Pop'n Fresh!

March 26, 1998
by Peter Wolfrum

If you want to use a menu pop-up to communicate with a user without using the standard menu bar, it may be useful to create your own menu pop-up.

To create such a tool, you need a number of shapes (depending on your design goals) and two standard fields; one for the main menu and the other for the sub menu.

If you look at the score, the highlighting shape is in front of the menu field. Behind the field sprite there are another three shapes. The outline and the background color of the menu and between these two is a shape (linesize = 0), which is set to constrain the vertical movement of the shape that highlights each item of the menu field. The highlight shape is set to the size of a menu line and creates the highlight effect using a reverse ink.

I know the setup to create the needed members and its order in the score are quite difficult to explain (like many behaviors), so there is a setUpPop movie-script which creates the needed members and its appearance in the score. (All members and sprites in these locations will be deleted!)


   setUpPop 5, 10
   -- which creates the member sequence 
   -- from cast member 5 to 11
     and in channel 10 to 19

I choose another field to setup the menu items and its commands for each button, so you can edit the content of the menus when the movie plays.

--for a basic menu item
menuItem:command
--menu item showing a sub menu
menuItem:#
#submenuItem:command
#submenuItem:command

Now you can apply the behavior to the menu button, define the property field for the button and the font settings in the dialog box.

So when you hit the button, there are four main routines that make all these shapes and fields appear right under the pushed button:

  mCreateItems.SaveCommands me
  mFormatItemText me
  mResizeShapes me
  mPlaceShapes.Highlight.ShowHideSub me

To drag the positioned sprites (keeping them in the correct order) around the channels, the behavior looks for the two fields in the score in the beginSprite handler.

Here is a description how the behavior works, without explaining the whole script here (because it's far too long).

  mCallMenu me

--called when you hit the button
--sets the button down effect
--stores the point, all sprites will be positoned to (left/bottom of menu button)
--calls the four main routines
--resets the button

  mCreateItems.SaveCommands me

--runs through the property field of the pushed button
--filters the menu item names
--stores the commands into lists, maintaining the order the items in the menus appear
--puts the items into the field

  mResizeShapes me, menuType

--depending for which menuType(main/sub menu) it resizes the shapes to the dimension of the field, --the height of the highlight shape is set to the text height of the field --sets the ink effect of the highlight (reverse)


  mPlaceShapes.Highlight.ShowHideSub me

--places the resized shapes
--checks if the mouse is over the field to display the highlight
--every menu item has a show/hide sub menu call
--if the menu item has a show sub-menu call, it runs nearly through the same routines for the sub menu
--if you release the mouse the highlight shape is positioned offscreen
--is tests if the mouse is still over the menu field
--if so, it calls the stored command for the menu item
--after that the shapes and fields are removed from the stage

This handler contains two tricks to make this highlight work - all the credits to Peter Small's menu object from "Lingo Sourcery". Using the mouseCast() function to detect if the mouse is over popup field shows the first problem: the highlight shape is placed between the mouse and the field. So you use the operator "or" to check either for the menu field or the shape.

To make the highlight shape jump from menu line to menu line, he uses the operator "mod", which gives a remainder after a division.

"Dividing the difference between the top of the menu field and the mouse vertical position by the line height will give a value by which the mouse vertical is greater than the start of line. Subtracting this remainder from the mouse vertical as the mouse is being dragged will constantly update the vertical position for the highlighting shape".

Sounds great - works even better.

Sample code is available for download as a pre-Director 8 format (HQX or ZIP) and in a dot-syntax-compatible version for D8 and later (HQX and ZIP).

Peter Wolfrum is a multimedia designer based in Frankfurt, Germany. He has a degree in graphic design from Frankfurt University and has been working in multimedia for 3 years.