Flash CS3 Tutorial, Making Event Listeners

Drop Down Menu
Lets jump right in to making buttons and start with a pull-down menu. We are going to use ActionScript 3.0 to create a simple Drop Down menu.

Some of the work has been done for you. I created a basic button for you. I want you to insert a new MovieClip and call it button_mc. in the time line I want you to create 2 new layers. Label the top layer “actions” the next layer “labels“ and the last layer “buttons.“ You do not have to label layers for the movie to work but it is a good practice that I want to help get you in the habit of doing. Select the first Key Frame in the buttons layer and drag an instance of the dropDown_btn that I created for you, to the stage. Type the word “Links” or whatever you want to appear on the button when it is closed. Select the instance of dropDown_btn and label it links_btn.

 

 

 

Now go to frame 15 on the buttons layer and press F6. You just created a new key frame. Do the same for the other two layers. Return to the new key frame on the buttons line and drag 4 more instances of the dropDown_btn to the stage. Align them in a row one above the other. Then place some text over each button. *Hint- you can use the align panel to align the buttons, just don’t align them to the stage. You should have something similar to the picture.

Now, we need to label some of the key frames so we can tell the time line were to stop. Click on the first Key frame on the labels layer and name the key frame close *Hint - you name a key frame same as you would name an object. Next, go to the new key frame on line 15 on the Labels Layer and name it “open“. Your Time line should look something like the example. So Basically, you have set the stage. At the closed label you can see what the button will look like when it hasn’t been clicked. At the open label you can see what the button will look like when the button has been clicked.

Now it is time for the ActionScript.
Click on the first key frame in the actions layer and press F9 to open the actions panel.

Now, we need to create a function to open the menu when the button is clicked. Copy and past the code into the actions panel below the stop(); line. We are creating a function called openMenu controlling it with a mouseEvent. Then when the function openMenu is called we are telling the time line to gotoAndStop(“open“) that means go to the frame you labeled as open, and stop playing. In the last line you are adding an Listener to the button you labeled as links_btn. The listener is a MouseEvent specifically a mouse CLICK. And Finally, when links_btn is clicked do the function openMenu.

stop();
function openMenu(yourEvent:MouseEvent):void {
	this.gotoAndStop("open");
}; links_btn.addEventListener(MouseEvent.CLICK, openMenu);

Hopefully you are following all this because it is time for a lot more code. Select the next key frame on the actions layer, it should be above the key frame labeled open. Copy and past the following code. Before explaining this code you need to label each of the five instances of dropDown_btn

function closeMenu(yourEvent:MouseEvent):void{
	gotoAndStop(“closed”);
}; linksOpen_btn.addEventListener(MouseEvent.CLICK, closeMenu); flash_btn.addEventListener(MouseEvent.CLICK, closeMenu); php_btn.addEventListener(MouseEvent.CLICK, closeMenu); java_btn.addEventListener(MouseEvent.CLICK, closeMenu); ajax_btn.addEventListener(MouseEvent.CLICK, closeMenu);

1. linksOpen_btn

2. flash_btn

3. php_btn

4. jave_btn

5. ajax_btn

Now, lets go over the code. It looks like a lot but it is basically, the same thing you put on the close key frame. You created another Function this one called closeMenu, and when called it will make the time line go to and stop at the closed label. Because, you have five separate button instances you need to add an Event Listener to each of those buttons.

Press Control_Enter test your drop down button.

The buttons only open and close the drop down menu at this time. You can either play with the code to see if you can make them actually link to another page, or see some of the more advanced tutorials. I hope you try to play with the code on your own.

Download Source Files