Skip to navigation | Skip to content

Share your knowledge. Make a difference.

Flash CS3 Tutorial

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 4 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #244 in Games, #6037 overall

Rated G. (Control what you see)

Flash CS3 Tutorial on how to make a Drop Down Menu

 

On this page you will find a Flash CS3 Tutorial on how to make a Flash Drop Down Menu. For the complete tutorial and source files please go to FrenchSquared.com

Links to more Great Flash Tutorials 

FREE Flash CS3 Tutorials

Check out these great links to more FREE Flash Tutorials.
FrenchSquared
My home page and your destination fro great FREE Flash Tutorials
List of FREE Tutorials
Check out this great list of FREE Flash Tutorials
ActionScript Basics
FREE Tutorial on Flash CS3 Basics, learn how to create a function.
Flash Listeners
Check out this tutorial on making event listeners.
It also goes over how to make a great Custom Mouse Cursor.
Drop Down Menu
Here is a tutorial on make in Drop Down Menu in Flash CS3 using ActionScript 3.0
F2-4Kids.com
Educational Games, Kids online coloring book, This is a website dedicated to the education of Children. It started as a project to help my children develop there computer skill and has turned into F2-4Kids.com

How To make a Flash Drop Down Menu 

Tutorial on makeing a Flash Drop Down Menu

Lets jump right into this Flash CS3 Tutorial and start making buttons and 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.

Drop Down Menu

 


 


Drop Down label

 


 



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

get the rest of the code at Drop Down Menu

Flash Tutorials on Utube 

FREE Flash Tutorials

Check ouot a few more Great FREE Flash Tutorials
YouTube thumbnail
KnowFlash.com - Create A Carto...

Runtime: 6:50 | 203672 views | Comments

YouTube thumbnail
Flash Tutorial Create a Drop d...

Runtime: 24:48 | 140414 views | Comments

YouTube thumbnail
Flash-animation tutorial(for b...

Runtime: 5:03 | 265388 views | Comments

YouTube thumbnail
Flash Tutorial :::: Create a P...

Runtime: 26:09 | 92298 views | Comments

YouTube thumbnail
Flash Tutorial :: Learn how to...

Runtime: 32:50 | 52618 views | Comments

YouTube thumbnail
Adobe Flash Tutorial! Scrollin...

Runtime: 30:35 | 97313 views | Comments

RSS Feed of My favorite Flash Tutorials 

Flash CS3 Tutorils

Here is feed from my blog. It covers my faorite web sites and my current tutorials

Loading Fetching RSS feed... please stand by
X
FrenchSquared

About FrenchSquared

Gordon French is a Flash Programmer and Flash Designer. Check out My site at frenchsquared.com
F2-4Kids.com.com

FrenchSquared's Pages

See all of FrenchSquared's pages