Creating a Branching Menu

April 23, 2001
by Will Turnage

Dear Handyman,

I'm working on a CD-ROM of different corporate presentations, and I want the project to have a menu of all the different presentations. I have different bitmaps of each menu item, but I don't know the best way to build it.

Daniel

Daniel,

The biggest problem with using individual bitmaps to create complex branching menus is that it ends up taking up lots of room in the score. Whenever you have to add a new item to the menu, you might have to shift sprites around to make room for it, and it can get pretty cumbersome. Luckily, you can use a little bit of imaging lingo to fit your entire branching menu into a single sprite.

Look at this sample movie which displays a fully working branching menu using imaging Lingo:

If you want to create a menu just like this in your project, then just follow these steps:

1. Download the source code for the sample Director 8 movie in Macintosh or Windows format.

2. Open the cast window in the sample movie, and you will see two scripts. The first is a behavior called "Branching Menu Behavior" and the other is a parent script called "Branching Menu Parent Object". You should copy these scripts into your own movie.

3. Create individual bitmaps for each item of your menu. This branching menu uses an ink effect to create the rollover effect, so you don't need to create multiple versions of the menu. The initial state is fine. When you're done, create another bitmap that consists of a single pixel. This member will be used later to display the menu as your movie runs.

4. The most complicated step is to name each of your bitmaps properly. The code in the Branching Menu Parent Object requires that each of your menu bitmaps be named in a certain way. This name consists of three different pieces of information separated by a semicolon. The three pieces of information are:

MENUNAME ;
[NUMERIC LIST DESCRIBING MENU BUTTON BRANCH] ;
KEYWORD USED WHEN CLICKED

Here are some examples names from the sample movie:

DOUGMenu; [1];Item 1
DOUGMenu; [2,4,3];Item 2, 4, 3
DOUGMenu; [7,2];Item 7, 2

The first piece of information is the name of your branching menu. This can be any string such as "myMenu", "mainNavBar", or in this example "DOUGMenu". The Branching Menu Object will then look for members that contain this name and include them in your branching menu. If you want to have more than one menu in your project, this isn't a problem as long as the menuNames are different.

The next part of the member's name is a numeric list describing that item's position in the menu. If the numeric list is [1], then that item will be the first item in the first branch of the list. If the numeric list is [7,2], then that particular menu item will be the second item in the branch stemming from the seventh item in the list.

The final piece of information to add to your member's name is a unique identifier. This can be any word or string describing what the button does. This information will be used later on when you click on the button. In the sample movie, these were strings like "Item 2, 4, 3" or "Item 7,2" which described the name of the button.

5. Once your members are named properly, the next step is to place the menu in the score of your movie. Take the dummy sprite (the one with just one pixel that you created in step 3), and place it on the stage where you want the upper left corner of the menu to be. Also, be sure to set the ink effect of the sprite to Matte or Background Transparent depending on the style of your menu.

6. Attach the Branching Menu Behavior copied in step 2 to this single pixel sprite. A dialog box will appear asking for two parameters. The first parameter is the name of the menu. This name should be the same name that you used when naming your individual bitmaps in step 4. The other option you can select here is the ink effect to be used on rollover. Whenever you rollover each member of the sprite, an ink effect will be applied to that sprite to show its rollover effect.

7. The last step is to write the code that will execute commands when the user clicks on your menu. All you need to do is create a handler like this is any movie script:

on executeBranchingMenu menuName, uniqueIdentifier
-- insert code here
end

When a user clicks on the menu, the Branching Menu Object automatically calls the executeBranchingMenu handler, and it passes two values to this handler. The first is the name of the menu you specified in the behavior, and the second parameter is the unique identifier you created for each menu item in step 4. Based on the menu name and the unique identifier, you can execute code for individual buttons or for an entire menu.

In the sample movie, the executeBranchingMenu handler looks like this:

on executeBranchingMenu menuName, uniqueIdentifier
tempStr = "You clicked button '" & uniqueIdentifier & "' in menu '" & menuName & "'"
member ("results").text = tempStr
end

This code takes the parameters passed to the handler and puts them in a string. Then it displays the string in the field on screen.

And those are just the basics for using a branching menu in your project. You can use the code as is, and it will work with a variety of menu buttons and various sizes. There also no limit to the number of branches or depth that the menu can go. If you wanted, you could even customize the object to allow for multiple bitmaps, or even a deactivated state. So if you're up to the challenge, it would be interesting to see what you come up with. Happy coding!

A sample Director 8 movie is available for download in Mac or Windows format.

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.