|
  |
|
|
Flash CS3 Tutorial on Drop Down Menu's
Drop Down Menu
Lets jump right in to making buttons and start with a pull-down menu. We are going to use Action Script 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 Action Script.
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. |
PLEASE VISIT THE CONTRIBUTOR'S WEBSITE
FrenchSquared
Website dedicated to Flash Tutorials
FrenchSquared.com
|
|
No reactions yet.
Please login or sign up to rate this intel.
Please login or sign up to add a comment.
The copyright for this content entitled "Flash CS3 Tutorial on Drop Down Menu's" has been specified by the contributor as:
All Rights Reserved
This content may not be copied, distributed or adapted by anyone under any circumstances.
|
 |
May, 2012
2008
January, February, March, April, May, June, July, August, September, October, November, December
2009
January, February, March, April, May, June, July, August, September, October, November, December
2010
January, February, March, April, May, June, July, August, September, October, November, December
2011
January, February, March, April, May, June, July, August, September, October, November, December
2012
January, February, March, April, May
|
|
Not a member yet?
Qondio is a powerful network for making it online. If you have a website to
promote, we can help.
Sign up and get in on the action.
|
|
Welcome to Qondio! Discover the awesome power this network can deliver by going to our About page. Or you could skip straight to the Sign Up form.
|
|
