In this easy tutorial made for Flash 8 I will show you how to create a set of cool drop-down menus for your Flash website. You will see and learn:
- How to create a generic menu button and prepare it for dynamic use,
- How to use a loop to create the main horizontal menu bar,
- How to dynamically assign labels to buttons in a snap,
- How to change the color of your menu with just a couple of lines of ActionScript code,
- How to create a drop-down menu for each main link and make it interactive and much more!
You can see the live Flash example of the menu that you are going to create in this tutorial below. The contents of the website are dummy contents, of course, made just for this tutorial.
1. Creating the reusable menu button
1.1 Open a new Flash document by selecting File > New > Flash Document.
1.2 Select the Rectangle tool (R). In the Options area of the Tools panel, the Object drawing (1) and Snap to objects (2) options should be turned off, like the screenshot below shows.
1.3 While the Rectangle tool is still selected, go over to the Colors part of the Tools panel and disable the stroke color: Select the stroke color (1), click the No color icon (2) and then select any flat color for the fill (3).
1.4 Draw a rectangle and make its dimensions 113 x 22 pixels. You can do this by drawing any kind of rectangle, selecting it with the Selection tool (V) and then entering its dimensions in the appropriate fields in the Property inspector.
1.5 Select Modify > Convert to Symbol (shortcut: F8). Proceed like this:
- Call the symbol menu button.
- Choose Movie clip as symbol type.
- Select the upper left corner as the symbol’s registration point.
- Click OK.
1.6 Open the Library if it isn’t already open, by selecting Window > Library. Your menu button movie clip symbol should be sitting there nicely. Right-click on the menu button symbol inside the Library and select Linkage from the context menu.
1.7 In the Linkage Properties window, make the following selections: Check (enable) the Export for ActionScript option (1). The Export in first frame option (2) will automatically become checked too. You can leave the Identifier (3) as it is set by Flash — menu button, the same as the symbol’s name. Click OK.
The symbols which are set for export in the first frame will be loaded before all the other content of your SWF file, even the one situated in the first frame. So if you happen to have heavy symbols (lots of KBs) that are going to be exported in the first frame, you will see nothing but a blank stage before they have been completely loaded, even if there is a preloader in the first frame. The solution is to have a good external preloader which will load your SWF with the aforementioned symbols. In this tutorial’s example, the menu button is so lightweight (less than 1 KB in size) that it will load almost instantly.
1.8 Double-click the menu button’s movie clip icon in the Library to enter inside the symbol.
1.9 The rectangle shape inside the menu button symbol should be selected — select it if it isn’t.
1.10 Select Modify > Convert to Symbol. Yes, you are going to make a movie clip inside the menu button movie clip symbol itself. Select:
- Movie clip as type of symbol, just like you did before,
- Name it button background and click OK.
1.11 The newly made symbol will be selected by default. Go over to the Property inspector and enter the Instance name for this movie clip instance in the appropriate field: call it bkgColor_mc.
Why was it necessary to create another movie clip within the main movie clip? Because you’ll want to change the color of different parts of the menu later, based on user interaction with it. And creating two or three different menu buttons makes no sense when you can make the needed changes by just applying a few lines of ActionScript. You will see, this is really handy and it’s done in a snap!
1.12 Lock the current layer inside the menu button movie clip and call it background. Make a new layer above it and call it label. This is where the label for your menu button(s) will be displayed.
1.13 Select the Text tool (T) and make the following selections in the Property inspector:
- Select Dynamic text, as each button will have its label assigned to it dynamically.
- Select the generic _sans font. This choice will make the default sans serif font installed on user’s machine appear on the label, whether it is a Windows, Mac or Linux machine.
- Select 11 as the font size.
- Select white as color. You can change this later, but just do it now to be able to more easily follow my tutorial. For the menu, I chose colors on which white is clearly seen.
- Select the Align Center option for the text alignment. This is the best choice for a button label, since you want it to be centered inside the button.
- Select the Use device fonts option as the font rendering method. This, together with the generic sans font type you chose a few moments ago will make your SWF’s filesize much smaller. This is because the font will be read from the user’s machine and so it doesn’t have to be embedded in your SWF, making it smaller, which results in faster loading.
- The Selectable option must be turned off, because selectable text on a button looks really ugly and it may even render your button unclickable.
- Select the Single line option in the Line type menu. This is just fine for a menu button label.
1.14 Now that you have prepared your Text tool, create a dynamic text field like this:
- Click and drag with it over the button’s background area (but in the label layer).
- Release your mouse button and the text field will appear.
- Press Esc on your keyboard to exit the editing mode and a blue border will appear around the field.
1.15 The text field’s selected now. Assign it an Instance name in the Property inspector. Name it label_txt.
1.16 Click the Scene 1 link above the layer labels to return to the main scene and timeline.
1.17 The menu button movie clip symbol on the main scene should be selected by default. Press Delete on your keyboard to remove it from the stage.
You can do this with no worries since your symbol is stored in the Library. In fact, you must erase it from the stage because you will create the entire menu by pulling the menu button symbol dynamically from the Library with ActionScript.
Proceed to the second page of this lesson to see the ActionScript code that powers the drop-down menu.
Thanks for having such a nice example. It’s really helpful. I will try to change it to a vertical menu with dropdown effects… It sounds a bit hard to me… well, Thanks for all these great tutorials!
You’re welcome Danny! Spread the word on flashexplained.com!
This is a great tutorial, but I have followed building the menu button and other movie clips, but when I pasted the action script and tested the movie, I got nothing but a white screen, no errors, just a white screen.
Nancy: I have just tested the tutorial all over again and it works seamlessly. Are you sure you are working in the right version of Flash? If you’re working in Flash CS3, you should set your ActionScript to 2.0. Also, check out if you have all the instance names and linkage names done properly.
I just wanted to thank you for submitting this really complete tutorial explaining how to make those menus, simple but neato.
If it could be possible, could you dig in on a little ActionScript or refer me to a good website for API’s, libraries, explanations, etc.?
Thanks again =)
Francisco: Check out the RESOURCES link at the top of the page, where the menus are. You have some interesting Flash stuff there.
Technical issue—
Im sorry if im a drag, im getting an issue with the sub menus.
When im using the cursor to explore the menus, theres a choice i have to make eventually if i will click a link included in them or not.
But when i decide not to go for any i take the cursor off the menu, the menu doesnt clear by itself automatically.
Any ideas for this?
Thanks a lot,
Francisco
Fantastic. Took a bit of work to get there but got there, thank-you very much.
how to link in html page
THanks for the great tutorial, but ouch, my brain hurts. Probably a bit too advanced for my needs, but I hope it helps many people…
Francisco: I klnow exactly what you mean. I did wrestle with that option but didn’t find an easy way out of it. Yet.
Mike: You’re welcome!
yogesh: Check out my banners tutorials section, many lessons there explain how to link to an HTML page, but in ActionScript 1.0 and 2.0.
Aneurysm: Keep on learning, everything will get easier with experience and work. Remember everybody was a newbie once.
How can i possibly put a URL link to every sublink menus? Thanks for helping me on this matter.
me here again. i tried checking the banners tutorial page, but can’t find how to link those submenus to URL.
edgecrosser: Here it is: random colors banner. The part you are looking for is this one:
invisibleButton.onRollOver = function() {container._visible = false;
adMessage._visible = false;
}
How can I make the main buttons connect to a frame label?
Your tutorials are awesome!
Thanks for the lesson.
Wow thanks! Your tutorial is completely great.
how can i add sound to the button, for example when i rollover it with the mouse or click it?
thank you
Nice menu system, I like it. But is there a way to import the menu text from a text file where it would add new menus and sub-menus with links?
I would like to be able to edit things without having to rebuild the page.
Thanks for the tutorials
but is there an easy way on how to create a connection between a database and flash?
very impressed with your tutorial.
Thanks
Like Francisco (Nov 10), when not making a selection from the sub menu’s and rolling cursor out, It would be cool if the sub menu’s close, I’ve tried for hours with no sucess.
Has anyone mastered it??????? I Would Love to know it!
Great Tutorial, but i got problems
I got 2 errors for the action script:
this["menuButton"+i].onRollOver = function():Void {
“{” expected
and at line 26 there was an error saying
“unexpected “}”"
what did i do wrong?
Nevermind, problem solved. I used the earlier version of actionscript
thanks for the tutorial great one
This is an excellant tutorial. I am new to actionscript and this was what I was looking for. I have one question though. What if you wanted the Home button just to take to the home page. I was able to figure out how to remove the dropdown portion but when I click on the Home button it does not take me back to the home page, it just keeps me on the page that I was on?
Any thoughts or suggestions would greatly be appreciated.
Thanks in advance.
I’ve managed to get the sub menu’s to close when rolling out-YIPPEE!!!!
Sweet, works perfectly thank you.
The easiest tutorial ever!
You can round the corners by double clicking the rectangle tool and entering 20 in the corner radius Box before drawing your rectangle.
Spread the word, http://www.flashexplained.com
Thanks
I was trying out these actionscript in FlashMx but no output,so could you please help me out to get the dropdown menu.Thanks in advance.
Flash Mx doesn’t accept “void” in the function.
Thanks in advance.
I can’t seem to get the colors to change for either the rollover or main menu. I have converted from my CS3 to actionscript 2.0.
no out put in flash mx while testing movie.Please do help
hey dude i must thank you for creating such a wonderful site in which u provide action script for creating various flash applications.
with the help of your horizontal drop down menu i have managed to create a vertical drop down menu , but i m facing a problem in that , when i take my cursor over the main menu i m getting the sub menus but they are coming horizontally in a straight line with the main menu . i want the sub menu’s to be placed vertically when i take my cursor over the main menu. can u please help me out with this problem.
Thank you great tutorial. Could you help me to find a way to also connect some of the main buttons to a frame label?
the drop down menu should disappear when you mouseOUT
Hi Luka,
Great tutorial!!! However, I am a bit stuck…I am pretty new to flash. For one of my content pages I added the loader component to load images. It works but then the buttons and drop-down menu starts to act funny like the background button shows up on the upper corner and some button disappeared once I roll over it. Is it because this action script drop down menu don’t work with the loader component? Hope to hear back from you soon.
Thanks!
Cho.
Thanks for the great tutorial, Luka! I’m having trouble figuring out how to link to external URLs even though you said to go look at your striped banner ad tutorial, I’m still not sure where to add the geturl code to make each menu and submenu item link to a different url.
I cant understand your process. I dont understand actually whare the action should be put & what the main script for the drop down menu.also dont understand the process !!!
thanks for ur explanation of this tutorial,
my lecturer gave us exercise, but we don’t know how to make it, and I searched in internet, and in fact, my exercise is just the same with this tutorial,
so then I can do my task….
thank you so much
good job, I will try it.
thats great, is there a way of making the heading buttons though eg if I don’t wan’t a drop down for every menu?
how make own links … to subMenu?
i have:
var link1:Array = ["www.link1.pl", "www.link2.pl"];
var link2:Array = ["www.link3.pl", "www.link4.pl", "www.link5.pl", "www.link7.pl", "www.link6.pl"];
var link3:Array = ["www.l.pl", "www.l.pl", "www.l.pl"];
var link4:Array = ["www.l.pl", "www.l.pl"];
any help ?
Thanks for the nice lesson
I need my buttons linked to another scene, how can i do that in this drop down menu ?
Thx again.
Theis
Hi I cant seem to save the file for some reason.. I am publishing but the end result isn’t a working one Im in mx 04 as well
Oh i fixed that problem sry
If I wanted to swap the text based main links with images how could I do that?
var menuButtons:Array = ["Home", "Works", "About", "Contact"];
var menuButtons:Array = ["image.jpg", "Works", "About", "Contact"]; doesnt work
How can I get an image in there instead of text?
no response
Oh well.. well I got around the image thing.. but I have a new question.. I am using this for a nav system on a website i am creating.. but I want to add php links to the nav.. this tutorial shows me how to creat pages inside flash.. how can I link to an outside link so i can add my php link?
so far I have:
var menuButtons:Array = ["ABOUT US", "HIRES", "JOBS", "CONTACT US"];
var subMenu1:Array = [];
var subMenu2:Array = ["LINK 1", "LINK 2", "LINK 3", "LINK 4", "LINK 5"];
var subMenu3:Array = ["LINK 1", "LINK 2", "LINK 3"];
var subMenu4:Array = [];
var chosenMenu:Array = new Array();
var subMenuOpened:Boolean = false;
var whichSubMenu:Number = new Number();
var currentPosition:Number = new Number();
for (i=0; i<menuButtons.length; i++) {
this.attachMovie(“menu button”, “menuButton”+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 6+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];
var mainMenuColor:Color = new Color(this["menuButton"+i].bkgColor_mc);
mainMenuColor.setRGB(0xffffff);
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}
function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval(“subMenu”+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip(“subMenuHolder_mc”, this.getNextHighestDepth());
subMenuHolder_mc.attachMovie(“menu button”, “subMenuButton”+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
var subMenuStartColor:Color = new Color(subMenuHolder_mc["subMenuButton"+j].bkgColor_mc);
subMenuStartColor.setRGB(0xffffff);
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
getURL(“index.php?content=contact”);
closeSubMenu();
};
subMenuHolder_mc["subMenuButton"+j].onRollOver = function():Void {
var subMenuRollOverColor:Color = new Color(this.bkgColor_mc);
subMenuRollOverColor.setRGB(0×8dc442);
};
subMenuHolder_mc["subMenuButton"+j].onRollOut = function():Void {
var subMenuRollOutColor:Color = new Color(this.bkgColor_mc);
subMenuRollOutColor.setRGB(0xffffff);
};
}
}
function closeSubMenu():Void {
removeMovieClip(subMenuHolder_mc);
}
This makes all of the sub nav likn to that 1 link tho.. how can I get each subnav to have its own link?
Just want to thank you for this amazing tutorial, in which it helps me a lot.
Greetings…
I’d checked the “start to finish banner tutorial”, but it doesn’t seems to fit on how add URL links to this action script drop down menu lesson.
Could you plz show how to add URLs to all the buttons?
Kind regards.
an error message coming when i pasted the thing u gave
var menuButtons:Array = ["ABOUT US", "HIRES", "JOBS", "CONTACT US"];
var subMenu1:Array = [];
var subMenu2:Array = ["LINK 1", "LINK 2", "LINK 3", "LINK 4", "LINK 5"];
var subMenu3:Array = ["LINK 1", "LINK 2", "LINK 3"];
var subMenu4:Array = [];
var chosenMenu:Array = new Array();
var subMenuOpened:Boolean = false;
var whichSubMenu:Number = new Number();
var currentPosition:Number = new Number();
for (i=0; i<menuButtons.length; i++) {
this.attachMovie(”menu button”, “menuButton”+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 6+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];
var mainMenuColor:Color = new Color(this["menuButton"+i].bkgColor_mc);
mainMenuColor.setRGB(0xffffff);
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}
function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval(”subMenu”+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip(”subMenuHolder_mc”, this.getNextHighestDepth());
subMenuHolder_mc.attachMovie(”menu button”, “subMenuButton”+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
var subMenuStartColor:Color = new Color(subMenuHolder_mc["subMenuButton"+j].bkgColor_mc);
subMenuStartColor.setRGB(0xffffff);
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
getURL(”index.php?content=contact”);
closeSubMenu();
};
subMenuHolder_mc["subMenuButton"+j].onRollOver = function():Void {
var subMenuRollOverColor:Color = new Color(this.bkgColor_mc);
subMenuRollOverColor.setRGB(0×8dc442);
};
subMenuHolder_mc["subMenuButton"+j].onRollOut = function():Void {
var subMenuRollOutColor:Color = new Color(this.bkgColor_mc);
subMenuRollOutColor.setRGB(0xffffff);
};
}
}
function closeSubMenu():Void {
removeMovieClip(subMenuHolder_mc);
}
error message is Clipboard Actions: Line 11: Syntax error.
this.attachMovie(”menu button”, “menuButton”+i, this.getNextHighestDepth());
Clipboard Actions: Line 17: ‘{‘ expected
this["menuButton"+i].onRollOver = function():Void {
Clipboard Actions: Line 28: Unexpected ‘}’ encountered
}
please help quick!!!! i’m desperate to lrn!!!!!!!!!!!!!!!!!!!!!!!!1 been seaerhcing for gr8 tutorials for years and when i found one when these error messages are coming, i go mad!!!!
help quick!!!!
Hi there I think this tutorial is great there is none other like it ! But I have a problem with the first bit of the script. Every time i test the script , I get this error;
["menuButton"+i].onRollOver = function():Void {
“{” expected
and at line 26 there was an error saying
“unexpected “}””
I am using AS 2.0 I can’t figure out why it can’t work.
good tutorial! but is it possible to not to loop the navigation on 1 line?
so i can place them where ever I want?
This works great but I have 2 questions about customizing this.
1st: How do I lower the menu so that it is near the bottom and the rollovers are actually above the the button? So it is a “drop up” menu?
2nd Is it possible to add an arrow or some sort of indicator so that the user knows it is a drop down menu and like Ruth’s question, can some of the top buttons work as a non sub menu?
here i got the code that it is an “drop up” menu
var menuButtons:Array = ["Home", "Works", "About", "Contact"];
var subMenu1:Array = ["News", "Updates"];
var subMenu2:Array = ["Web", "Print", "Interactive", "Audio", "Video"];
var subMenu3:Array = ["About me", "Services", "Resume"];
var subMenu4:Array = ["Email me", "City map"];
var chosenMenu:Array = new Array();
var subMenuOpened:Boolean = false;
var whichSubMenu:Number = new Number();
var currentPosition:Number = new Number();
for (i=0; i<menuButtons.length; i++) {
this.attachMovie(“menu button”, “menuButton”+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 30+(115*i);
this["menuButton"+i]._y = 280;
this["menuButton"+i].label_txt.text = menuButtons[i];
var mainMenuColor:Color = new Color(this["menuButton"+i].bkgColor_mc);
mainMenuColor.setRGB(0×006699);
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}
function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval(“subMenu”+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip(“subMenuHolder_mc”, this.getNextHighestDepth());
subMenuHolder_mc.attachMovie(“menu button”, “subMenuButton”+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 250+(j*-29);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
var subMenuStartColor:Color = new Color(subMenuHolder_mc["subMenuButton"+j].bkgColor_mc);
subMenuStartColor.setRGB(0×81A3E2);
//_________________________________________________________
// Release & ReleaseOutside event handler
//_________________________________________________________
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuItem"+j].onReleaseOutside=function ():Void {
this._parent._parent.webSiteContent_mc.gotoAndStop(this.label_txt.text);
closeSubMenu();
};
//_________________________________________________________
// RollOver event handler
//_________________________________________________________
subMenuHolder_mc["subMenuButton"+j].onRollOver = function():Void {
var subMenuRollOverColor:Color = new Color(this.bkgColor_mc);
subMenuRollOverColor.setRGB(0xFF6600);
};
//_________________________________________________________
// RollOut event handler
//_________________________________________________________
subMenuHolder_mc["subMenuButton"+j].onRollOut = function():Void {
var subMenuRollOutColor:Color = new Color(this.bkgColor_mc);
subMenuRollOutColor.setRGB(0×81A3E2);
};
}
}
function closeSubMenu():Void {
removeMovieClip(subMenuHolder_mc);
}
hii..
I m very happy..i get so much help from this tutorial
This tutorial is fantastic thanks alot. I have one problem. I manage to run the flash but when I add it to an html file its like the submentu get hidden. What can I do?
I’m a fan of your site and I want to say thanks, because I learned a lot.
Your tutorials are clear and well explained, and very functional. A greeting from Guatemala, Central America.
Thank you for a wonderful tutorial. Everything is working perfectly,but just want to know how can I make the main buttons connect to a frame label?….
[...] Read tutorial [...]
Thank you for taking the time to write this tutorial for us common mortal
I am having a good time playing around with your example. Iwas wondering if it is at all possible to have the main button text rollover to another color on mouse over and to have the drop down menu “scroll down” as opposed to “pop down” and also to disappear on mouse out using only action script?
Thank you in advance.
These are the best Flash tutorials, very easy to follow, great explanations. I would recommend to anyone needing Flash help. Thanks!!
I totaly agree with aradovan,
I am a newby to flash and learning a lot of these tutorials
thanks a lot!
thank for the tutorial, that is very help me to make task for my education
thank alot
Having done my website above in php and HTML.
I started using flash for part of the front page.
Having read all your articals which are fantastic in their explanation.
I wish books were as good??
You have inspired me to rewrite my daughters web sit in flash I hope.
Thanks for all your hard work.
Best Regards Roy.
Please insert my website or let the Author know thanks.
Roy
thanks , a really clear , tutorial ; the length of the tutorial is really nothing considering the amount of “actual learning” . You dont skip a step and put across things very nicely.
The tutorial was great and I have really learned a ton from it, however, at the end you made a mention of utilizing a “hitTest” method to potentially close the submenu when the mouse rolls out of it. I have looked around the web, seen a few tutorials, but none of which are as clear as yours are. Is there any way that you could post a tutorial on the hitTest method for two objects and hitTest for the mouse location. Particularly, I am interested in using it to close a dropdown menu, but it is also extraordinarily useful for game programing in flash.
By the way, if anyone can point me to a method of closing this particular menu, it would be greatly appreciated.
Keep up the good work Luka. Your tutorials are top notch and very clear.
Hi, Tanks for your tutorial, it´s very good; I have a questions, how can modify the font? size of text, size the font, color the font.
Thanks, regards.