Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Scripts
Let’s now review the key scripts that make this menu system tick. Click on the Scene 1 link to return to the main timeline.
Click on frame 1 of the Actions layer and open up the Actions Panel to view the script here (see Figure 8).
)
Figure 8 The opening menu script, which sets up a variable for the selected menu item
Here we have a simple stop action to stop playback in frame 1. More importantly, we have a variable menu_num that will hold the number of the menu movie clip that has been clicked. Remember, we are positioning our menus using scripting so we will use this variable to instruct our various menus where to move. Here we are setting up our menu variable, a process call initializing, by putting a value of 0 into it.
menu_num = "0";
The next important script is in the Actions layer of the up frame. Click here in the timeline and have a look at this script in the script window (see Figure 9). This is the critical script of the entire menu. You looked at this script earlier, but now let’s analyze it more carefully.
)
Figure 9 The script for moving the menus up (notice we are subtracting the offset value to y, the vertical location of each menu)
The first two lines of script set up another variable named counter, put the current menu number into it, and then add one. In this way, only the menus below the currently clicked menu have the next line of code performed on it, which moves the menus up or down in a vertical direction (referred to as the y dimension).
If you think about it, this makes sense because if you open up the third menu, it is menus 4–7 that need to move down, or up, while menus 1–3 remain where they are. If you click menu 6, only menu 7 needs to move, and so on.
So, it is the fourth line of this script that is really doing all the work:
setProperty("/menu" add (counter), _y, getProperty ( "/menu" add (counter), _y )- offset);
Basically, what this line of code is doing is using the getProperty action to subtract the offset value of each menu clip from the y (vertical) location.
We are subtracting the offset value from y, the vertical location of the menu, so the menus each move upward. Notice that the script in the down frame (see Figure 10) is identical except that we are adding the offset value to the y location, thus moving all the menus down.
)
Figure 10 The script for moving the menus down—notice that we are adding the offset value to y, the vertical location of each menu
The last important script we need is the one that designates the specific offset values for each menu. Because some of the menus have three buttons, and some have as many as six, the offset values will vary accordingly.
For example, if you double-click the menu1 movie clip in the Library you will see the timeline again from Figure 6. Clicking on the menu on the stage will reveal the script below (see Figure 11).
){kind=link}
on (release) {
../:menu_num = "1";
../:offset = 90;
call("../:up");
gotoAndStop("up");
}
)
Figure 11 The script for the menu1 movie clip, including the offset value
First, you have the menu_num variable. This menu is the first one, so its value is set to 1.
Next is the offset value, which is the value in pixels that the menu will be shifted up or down when opened and closed. Because the menu has four buttons that span 90 pixels, I set this value to 90. Menu 5 has 6 buttons, so its offset value is 133; menu2 has 3, so its offset is only 68.
When you customize your menu, you will need to adjust these offset values accordingly. The larger you make your menu and button chrome, the higher the value you will need so that the menu telescopes properly and does not overlap the menu choices. Also, obviously the more button choices the menu has, the larger the offset number will need to be.
That’s it. There you have the complete documentation for a highly customizable and scalable menu system that is also very conservative with the valuable space it occupies on your web pages.