Building the Dropdown Menu

You should now have the starter file "mcb.fla" open in Flash.

First, delete the buttons (instances of MCB) from the stage. Select them with the selection tool and press the delete key. Double click the "buttons" layer, and rename it "menu." Click on frame 1 of the actions layer and press F9 for the actions panel. Select all the code (CTRL-A) and press the delete key. Finally, go ahead and lock the actions layer. Locking the layer doesn't prevent you from adding code to the actions panel, but it does prevent you from inadvertently adding graphics to your actions layer.

Now click on the menu layer. Now the file is emptied of code and content and we're ready to start afresh. The MCB symbol we will use as a bulding block is still in the library, though. This symbol, as you no doubt recall, is just a movie clip button with some built in rollover behavior, and a dynamic textbox named "myText" that serves a label.

Next, go to Flash's Insert menu, and choose "New Symbol." Name the new symbol "Panel," make sure it's a MovieClip type, and click OK. You will now be in Panel's edit mode. Here we are going to create the panel that will move up and down inside the menu. The panel will be composed of however many movie clip buttons that you want. I am going to use four, but if you want to, you can build a menu with more (or fewer) choices. Drag four MCB's from the library to the stage. Align the first one to the left and top, placing it at 0, 0 (the registration point of this clip). Next, stack the other three immediately beneath the first one. Your screen should look like this:

The only other thing to do inside this Panel movie clip is to give the movie clip buttons instance names. Name them b1, b2, b3, and b4. Now the Panel movie clip is complete.

Next, go to Flash's Insert menu again, and once again choose "New Symbol" (it's not necessary to go back to scene 1 first, although you can). Name this new symbol "Menu," make sure it's a MovieClip type, and click OK. Now you are in Menu's edit mode. Let's build this menu from the back to the front, locking layers as we go. Rename Layer 1 to "panel." Drag an instance of the Panel MovieClip to the stage. In the properties panel, align it to the left by setting its X property to 0. But give the Y property a value of -96. This Y position will set up the panel to emerge from the bottom of the finished menu. Also in the properties panel, give this instance the name "panel." Your screen should now look like this:

Lock the panel layer, then press the "Insert layer" button to create a new layer. Name this new layer "mask." Choose the rectangle tool. Choose any color, but don't use any stroke. Draw a rectangle of any size. Next, click the rectangle you just drew to select it. In the properties panel, give its properties these values: W: 156, H: 134, X: -3, Y: 34. Lock this layer. Right click on this layer and choose "Mask" from the context menu. This will make this layer a mask layer. It will also automatically lock the layer, and you will see the masking in action. That is, the panel will seem to disappear. Have no fear, it is still there. Your screen will now look like this:

Click the "Insert layer" button again. Name the new layer "heading." Drag another MCB instance to the stage and place it at 0, 0. Give it an instance name of "heading." This clip is the one that will be seen when the menu is closed, and the panel will go up and down behind it. Lock this layer.

Add a new layer and name it actions. Go ahead and lock it. All the layers are now in place. Your screen should now look like this:

Click on frame 1. Press F9 to get the actions panel. Now we'll proceed to define the actions that will be built in to this menu. When you code things like this, you will start to get a feel for which actions ought to be built in, and which should be imposed from the outside. Basically, you want to build in whatever behavior you want for all menus. So the opening and closing of the menu when rollover / rollout happens is in. But any specific actions when the panel buttons are clicked are out. These will be defined from outside code. That way the menu is reusuable.

To make the menu's panel move up and down, we will use the Tween class. The Tween class is in the fl package, so it must be imported. In case you didn't know, in a fla file you can use classes from the flash package without importing, but any classes from the fl package must be imported. Anyway, start off with these lines:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Next, we are going to need a couple of variables for the Tweens. So let's go ahead and declare a Tween variable for each of the Tween motions we need. The "openTween" and "closeTween" variables will be for opening and closing the menu:

var openTween:Tween;
var closeTween:Tween;

Next, let's add event listeners for the ROLL_OVER and ROLL_OUT mouse events:

addEventListener(MouseEvent.ROLL_OVER, over);
addEventListener(MouseEvent.ROLL_OUT, out);
 

Notice that the addEventListener method isn't preceded with any object name or anything. That is because we are adding the event listener to the object that we're inside of. So the keyword "this" is implied. We're inside this object writing the code so we're adding the event listener to this object (the menu). Now we need to write the over and out handler functions. Let's take on the over handler function first.

We know that in the over function, we want the menu's panel to tween to the open position. The fully open position is going to be when the panel's top edge is even with the heading clip's bottom edge, right? So, let's set about translating that to code. But first, if you have never used the Tween class before, you need to know what each of its seven parameters means:

new Tween(object, property, easeFunction, start, stop, duration, useSeconds);

  1. object: The object whose property you are going to be tweening.
  2. property: The property of the object you are going to tween. This property is given as a string, and so must apear in quotes.
  3. easeFunction: The name of the function you want to use for an easing effect.
  4. start: The starting value of the property you are tweening.
  5. stop: The ending value of the property you are tweening.
  6. duration: The number of seconds or the number of frames you want the animation to last.
  7. useSeconds: Set to true if you intended the duration to be in terms of seconds, false if you gave the duration as a number of frames.

Let's just begin working this parameter list as it applies to our panel movie clip:

  1. object: panel
  2. property: "y"
  3. easeFunction: None.easeNone
  4. start: panel.y
  5. stop: heading.y + heading.height - 3
  6. duration: 0.5
  7. useSeconds: true

The object we are tweening is obviously the panel. Don't use any quotes around this name, as this parameter is specifying an object, so we need to provide the object's instance name here. The property is the "y" property of panel. We want the animation to take place in the y direction (up and down) and so we will be tweening the y property. The easing function will be None.easeNone, so we are basically specifying to not use easing.

The start parameter here is interesting. We not only don't code a hard number here, but we use panel.y for a parameter. This is basically saying "whatever the value of it is now." This way, the Tween will take the panel from it's current y location, wherever that may be. So even if the panel was in the process of closing due to a previous ROLL_OUT event, it will tween beginning from it's current y position.

The stop parameter is where we are tweening to. It's handy to be able to use the heading object's properties here, because we want the tween to finish precisely at the bottom edge of the heading clip. So we use heading's y property plus heading's height property. The - 3 at the end there is just to make up for the fact that our MCB clips all have a three pixel stroke.

The duration is 0.5, or half a second. Finally, the useSeconds parameter is set to true, because the previous parameter, 0.5, was intended to be expressed in seconds, not frames.

Let's take all of the above, and write it into the over function:

function over(event:MouseEvent):void {
	openTween = new Tween(panel, 
		              "y", 
			      None.easeNone,
			      panel.y, 
			      heading.y + heading.height - 3, 
			      0.5, 
			      true); 
}

Note: you may prefer that all of this appear on one line. I have formatted it this way because it fits this screen much better. Either way will work inside of Flash. On the other hand, seeing the seven parameters in a list like this can also be helpful.

The out function is similar. Only the stop parameter is different. Once again, the start parameter is set to whatever the current value is:

function out(event:MouseEvent):void {
	closeTween = new Tween(panel, 
			       "y", 
		               None.easeNone, 
		               panel.y, 
		               heading.y + heading.height - panel.height, 
	                       0.5, 
		               true); 
}

The stop parameter this time once again uses the heading clip for a handy anchor reference. Taking the value of the heading's y property, plus it's height, gives you the bottom edge of the heading. Then, subtracting the height of the panel from this should give you back the place where the panel originally started. And that is where we are tweening the panel to.

And that should conclude the work on the menu. Go back to scene 1. Click on the Menu layer. Drag out an instance of the Menu movie clip and place it on the stage. Test the movie (CTRL-ENTER). Try rolling over the menu and rolling out. It should open and close for you. If you were to drag out more instances from the library, they will all exhibit this opening and closing behavior, because it's built in.

On the next page, we will proceed to program this menu instance from the outside code.