Flash Explained

Learn Flash easily.

ActionScript drop-down menu – part 1 of 3

November 1st, 2008 | Author: Luka | Category: Menus & Interfaces

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.

The disabled Snap to Objects and Object drawing options.

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).

The stroke color is disabled.

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.

A new rectangle with its dimensions.

1.5 Select Modify > Convert to Symbol (shortcut: F8). Proceed like this:

  1. Call the symbol menu button.
  2. Choose Movie clip as symbol type.
  3. Select the upper left corner as the symbol’s registration point.
  4. Click OK.

The conversion of a drawn shape into a symbol.

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.

Selecting the Linkage option for the menu button in the Library.

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.

Setting the linkage identifier options.

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.

Entering the symbol in the Library.

1.9 The rectangle shape inside the menu button symbol should be selected — select it if it isn’t.

Selecting the shape inside the symbol.

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.

The Convert to Symbol window in Flash.

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.

The Instance name bkgColor_mc was assigned to the symbol instance.

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.

The layers inside the movie clip: one is for the background and the other for the label.

1.13 Select the Text tool (T) and make the following selections in the Property inspector:

  1. Select Dynamic text, as each button will have its label assigned to it dynamically.
  2. 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.
  3. Select 11 as the font size.
  4. 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.
  5. 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.
  6. 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.
  7. The Selectable option must be turned off, because selectable text on a button looks really ugly and it may even render your button unclickable.
  8. Select the Single line option in the Line type menu. This is just fine for a menu button label.

Selecting the options for the text field that is going to display the button labels.

1.14 Now that you have prepared your Text tool, create a dynamic text field like this:

  1. Click and drag with it over the button’s background area (but in the label layer).
  2. Release your mouse button and the text field will appear.
  3. Press Esc on your keyboard to exit the editing mode and a blue border will appear around the field.

The process of creating a dynamic text field in Adobe Flash.

1.15 The text field’s selected now. Assign it an Instance name in the Property inspector. Name it label_txt.

The instance name of a dynamic text field in Flash.

1.16 Click the Scene 1 link above the layer labels to return to the main scene and timeline.

Returning to the main scene in Adobe Flash.

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.

Top of page

Be Sociable, Share!

Comments

Submit a comment

  • Denny Nov 2, 2008 at 6:51 am

    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!

  • Luka Nov 2, 2008 at 10:30 am

    You’re welcome Danny! Spread the word on flashexplained.com!

  • Nancy Nov 3, 2008 at 4:22 am

    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.

  • Luka Nov 3, 2008 at 8:59 am

    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.

  • Francisco Nov 9, 2008 at 8:53 am

    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 =)

  • Luka Nov 9, 2008 at 10:33 am

    Francisco: Check out the RESOURCES link at the top of the page, where the menus are. You have some interesting Flash stuff there.

  • Francisco Nov 10, 2008 at 5:32 am

    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

  • Mike Nov 10, 2008 at 11:16 am

    Fantastic. Took a bit of work to get there but got there, thank-you very much.

  • yogesh Nov 13, 2008 at 7:07 am

    how to link in html page

  • Aneurysm Nov 14, 2008 at 11:25 pm

    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…

  • Luka Nov 18, 2008 at 10:35 am

    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. :)

  • edgecrosser Nov 20, 2008 at 8:04 am

    How can i possibly put a URL link to every sublink menus? Thanks for helping me on this matter.

  • edgecrosser Nov 20, 2008 at 9:30 am

    me here again. i tried checking the banners tutorial page, but can’t find how to link those submenus to URL.

  • Luka Nov 23, 2008 at 5:28 pm

    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;
    }

  • Pawnrush Nov 24, 2008 at 12:01 am

    How can I make the main buttons connect to a frame label?

    Your tutorials are awesome!

    Thanks for the lesson.

  • edgecrosser Nov 25, 2008 at 3:15 am

    Wow thanks! Your tutorial is completely great.

  • Alan Nov 27, 2008 at 4:46 pm

    how can i add sound to the button, for example when i rollover it with the mouse or click it?
    thank you

  • Bill Dec 4, 2008 at 6:32 pm

    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.

  • Jayson Dec 5, 2008 at 4:51 pm

    Thanks for the tutorials :)

    but is there an easy way on how to create a connection between a database and flash?

  • ken Dec 9, 2008 at 10:52 am

    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!

  • Luo Dec 10, 2008 at 5:27 pm

    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?

  • luo Dec 11, 2008 at 4:50 pm

    Nevermind, problem solved. I used the earlier version of actionscript
    thanks for the tutorial great one

  • Cgwen Dec 12, 2008 at 6:29 am

    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.

  • ken Dec 12, 2008 at 3:14 pm

    I’ve managed to get the sub menu’s to close when rolling out-YIPPEE!!!!

  • Bob Dec 22, 2008 at 6:02 pm

    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

  • Tabbu Dec 27, 2008 at 8:28 am

    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.

  • amanda Dec 28, 2008 at 8:46 pm

    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.

  • Tabbu Dec 30, 2008 at 8:20 am

    no out put in flash mx while testing movie.Please do help

  • priyanak Dec 30, 2008 at 6:07 pm

    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.

  • Jedi Dec 31, 2008 at 12:39 am

    Thank you great tutorial. Could you help me to find a way to also connect some of the main buttons to a frame label?

  • carlos Jan 1, 2009 at 12:17 am

    the drop down menu should disappear when you mouseOUT

  • Cho Jan 3, 2009 at 9:31 pm

    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.

  • Sha Jan 4, 2009 at 10:00 pm

    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.

  • Abhishek Dutta Jan 7, 2009 at 11:55 am

    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 !!!

  • wulan Jan 8, 2009 at 2:36 am

    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

  • eloi Jan 11, 2009 at 5:56 am

    good job, I will try it.

  • ruth Jan 13, 2009 at 5:16 pm

    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?

  • tomek Jan 14, 2009 at 10:59 am

    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 ?

  • Iskou Jan 19, 2009 at 2:03 pm

    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

  • Brian Jan 19, 2009 at 6:30 pm

    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

  • Brian Jan 19, 2009 at 6:35 pm

    Oh i fixed that problem sry

  • Brian Jan 20, 2009 at 2:32 pm

    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?

  • Brian Jan 20, 2009 at 6:57 pm

    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?

  • Brian Jan 20, 2009 at 7:39 pm

    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(0x8dc442);
    };
    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?

  • Hani Jan 21, 2009 at 12:18 pm

    Just want to thank you for this amazing tutorial, in which it helps me a lot.

  • Hani Jan 21, 2009 at 5:59 pm

    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.

  • missat Feb 1, 2009 at 1:25 pm

    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!!!!

  • Jasmine Xie Mar 9, 2009 at 6:03 pm

    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.

  • tim Apr 14, 2009 at 1:15 pm

    good tutorial! but is it possible to not to loop the navigation on 1 line?
    so i can place them where ever I want?

  • david Lucas May 4, 2009 at 3:26 am

    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?

  • tim May 14, 2009 at 11:16 am

    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(0x81A3E2);
    //_________________________________________________________
    // 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(0x81A3E2);
    };
    }
    }
    function closeSubMenu():Void {
    removeMovieClip(subMenuHolder_mc);
    }

  • Suryakant May 22, 2009 at 7:27 am

    hii..
    I m very happy..i get so much help from this tutorial

  • Darren Cordina Jun 28, 2009 at 11:08 pm

    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?

  • Karbo13 Jul 6, 2009 at 4:19 am

    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.

  • Kagisho mokotedi Jul 30, 2009 at 11:25 am

    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 [...]

  • Gege Aug 17, 2009 at 3:46 am

    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.

  • aradovan Aug 21, 2009 at 4:56 pm

    These are the best Flash tutorials, very easy to follow, great explanations. I would recommend to anyone needing Flash help. Thanks!!

  • jbal Nov 11, 2009 at 1:12 pm

    I totaly agree with aradovan,

    I am a newby to flash and learning a lot of these tutorials

    thanks a lot!

  • ariana ketoet Dec 19, 2009 at 6:13 am

    thank for the tutorial, that is very help me to make task for my education

    thank alot

  • Roy Dec 24, 2009 at 3:26 pm

    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.

  • Roy Dec 24, 2009 at 3:28 pm

    Please insert my website or let the Author know thanks.
    Roy

  • Varun Bhardwaj Jan 18, 2010 at 6:06 pm

    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.

  • Ben Jan 31, 2010 at 5:03 pm

    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.

  • Jaime Mar 3, 2010 at 6:23 pm

    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.

  • karthick Apr 1, 2010 at 7:43 am

    Hi,
    thanks
    its useful for me ,but i want to change the font style,color,size how can i please tell me

  • JC Apr 6, 2010 at 7:31 pm

    I’ve been trying to figure out the hitTest on the dropdowns to make them disappear BUT have had no success. Can someone shed some light on how to do this?

    Thanks in advance!

  • Ryan Apr 10, 2010 at 9:53 pm

    I know a lot of people are asking this, but after reading through everything, i still can’t get the menu to close on RollOut.

    Please help,

  • karthick Apr 12, 2010 at 6:34 am

    hi Ryan,
    do u know how to change the font style,
    please help

  • Monty Apr 12, 2010 at 10:46 am

    Hi, Tanks for your tutorial, it´s very good; I have a questions, How can I add multiple url links to the buttons. so when i click on a button it takes me to the url link.

    thanks ,

    please help me on this

  • JC Jun 16, 2010 at 1:02 pm

    Any ideas on how to make the submenu close on rollout with the hitTest()???

  • Nazar Jul 9, 2010 at 4:51 am

    if create my drop down menu in flash then i have a problem in link to external file

    my code is : on movie clip

    on (release) {
    getURL(“http//:www.site.com/Default.aspx”);
    }

    will not act if this is in movie clip inside a movie clip

    and this will be act if i write it on movie clip

    but will not work if this code entered a movie clip’s inside movie clip

    can you suggest me

  • raj Aug 16, 2010 at 3:54 am

    Thanks alot.
    Your tutorial help me alot..but i have a question for you. i have successfully create the drop menu flash. once i upload in dreamweaver 8. It’s working. But how im going to set link for every drop menu button which i created in flash 8 in dreamweaver to another page.

  • Jagat Pal Maurya Sep 1, 2010 at 11:36 am

    hi thanks for the tutorials by these tutorials I got lots of help to boost my knowledge.

  • Toni Sep 24, 2010 at 9:52 am

    Hi. Thanks for a very useful and yet simple tutorial.
    I’m trying to add a next and previous button so that the user can easily use the menu or the next/previous to navigate.

    I’m rather fresh to AS so any help here would help me a lot.

    I’m using it in AS2 and keep getting the message that I need to use eventHandler, but that isn’t a feature in AS2. When I try to build it in AS3 the menu goes bananas as soon as I implement a next/previous mc.

    Any thoughts on this issue?

  • Tom Oct 6, 2010 at 10:03 pm

    I have been using this menu button system for a while now I am wondering if anyone has worked out a way of not having to have a submenu criteria. So that if you just want a ‘contacts’ or ‘home’ button along the top menu bar, you don’t want a drop down menu with just a repeat of the same word under it popping up.

    Any suggestions?

    Thanks

  • vijesh Oct 15, 2010 at 9:07 am

    hi

    Thaks………….

  • angie Oct 25, 2010 at 3:33 pm

    FANTASTIC TUTORIAL, my drop down menu works perfectly and even managed add more submenus.

    One question though.

    How to make the main buttons such as HOME, HISTORY, CONTACT, SITE MAP ect work when clicked on them, It only lets me click the sub menu buttons.

    If anyone knows how to do this, please help thanx :)

  • angie Oct 25, 2010 at 3:43 pm

    Anyone know how to make the main links such as home, contact pages work when clicked on them, without having to go through a drop down sub menu to get back to home page?

  • mete Dec 27, 2010 at 12:39 am

    thank you for this tutarial, its very useful

  • mete Dec 28, 2010 at 3:30 am

    I tried this tutorial its working exception rollOut function. I could not find a method. how can I do that. my quastion is the same with Ryan. please help me.

  • Christos Jan 19, 2011 at 2:53 am

    Hello!
    I have this script but don’t work….. I need help… can anyone help me please!

    on (release) {
    if (password eq “11111″) {
    getURL (“javascript:NewWindow=window.open(‘http://mydomain1′,’newWin’,'width=1152,height=830,left=0,top=0,toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No’); NewWindow.focus(); void(0);”);

    }

    } else {
    getURL (“javascript:NewWindow=window.open(‘http://mydomain2′,’newWin’,'width=1152,height=830,left=0,top=0,toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No’); NewWindow.focus(); void(0);”); }
    }

  • DigitalEngine Feb 10, 2011 at 5:59 pm

    Can these be used as links?

  • [...] down As2 Salve, ho un problema con la creazione di un menu' a tendino o drop down. Ho seguito questo tutorial , ma ovviamente anche facendo tutto come dice lui (eccetto per le varie immagini dato che [...]

  • David Fernseher May 13, 2011 at 9:04 pm

    Thanks,

    I’m currently testing and playing around with flash. Just created my first drop down menu. It does not yet look as good as yours, but I will try ;-)

  • Khalid4IT May 19, 2011 at 5:58 pm

    Thank u very much.. It’s very explain design.

  • Donald Orr May 31, 2011 at 4:31 pm

    Great tut. but how about linking menu items without a submenu to a webpage. Like home to index.html without a submenu beneath it. The navigation bar I created was done with this code:
    var menuButtons:Array = ["Home","Research","Education","Fund Raising","Understanding","News","About Us","Contact Us","Help Desk"];
    var subMenu2:Array = ["Projects","Grants","MIRA Funded"];
    var subMenu4:Array = ["Events","Ways to Give","Contributors"];
    var subMenu5:Array = ["Disorders","Stigma","Hot Topics","Statistics","Assistance"];
    var subMenu6:Array = ["News Flash","Press Room","Newsletters"];
    var subMenu7:Array = ["Mission","The Board","Founders","History","Staff"];
    var subMenu9:Array = ["FAQs","Downloads","Blog","Site Map"];
    as you see “Home”, “Education” don’t have submenus. Thanks for you assistance.

  • Nina M Jun 14, 2011 at 6:58 pm

    How to do this in AS3?? Is it possible?? I have a school asignment and have to work in as3,..

    Hope someone can help me..

  • Silje Jul 7, 2011 at 7:38 pm

    is there anyone who knows how to link the different menu tabs to html pages? Like home to index.html and so on.

    I’ve figuered everything else out, but i’m stuck on this one.

    The tutorial was great, so I hope if anyone of you who knows a bit more than me, could give me some help.

    If someone knows, is it possible to get the white background colour transparent?

    Thanks for any help!:)

  • SRI Sep 2, 2011 at 8:08 pm

    THANKQ I TRY IT !!

  • Thierry Sep 7, 2011 at 9:01 pm

    Hi,

    I want the main menu to have links when I click on then just for the sub menu. For example for the “contacts” button I dont have sub links, so how do I make it become a link.

  • robin Nov 1, 2011 at 10:35 am

    I need to create a drop down list in a flash template that i have made.. the template should be smart enaf to decipher wat value the user has selected.

    your help is much appreciated..

    thank you!

  • jazz Feb 29, 2012 at 8:23 am

    bakvas prosser this menu

  • Lee Mar 20, 2012 at 2:06 pm

    This has been one of the best tutorials on the web which i could find.

    Excellent work, thank you. Its really helped me.

  • CHEPPI Aug 8, 2012 at 7:50 am

    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!

  • Hanan Nov 13, 2012 at 2:19 am

    Great tutorial. I would like to combine it with another one of yours ‘How to make a minimalistic vertical menu with a slider’ …. so that in the same screen, i have the horizontal drop down menu on the top and the vertical minimalistic menu with the slider on the side. I tried to combine the 2 scripts but i couldn’t. The result i get is disasterous (screen constantly blinking). How do i get around that?
    thank you.

  • Elias Dec 31, 2012 at 7:50 am

    I absolutely love your blog.. Very nice colors & theme. Did you create this amazing site yourself?
    Please reply back as I’m attempting to create my own blog and would like to learn where you got this from or just what the theme is called. Thanks!

  • Luka Jan 3, 2013 at 9:59 pm

    @ Elias: I created everything myself: contents, design, SEO. I made my own design based on the Cutline theme (see the last line on the bottom of any page for the link). Thanks! :)

Leave a comment