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!


Submit a comment

  • 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);
    this[“menuButton”+i].onRollOver = function():Void {
    whichSubMenu = Number(this._name.substr(-1, 1));
    currentPosition = this._x;

    if (!subMenuOpened) {
    subMenuOpened = true;
    openSubMenu(whichSubMenu, currentPosition);
    } else {
    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);
    // Release & ReleaseOutside event handler
    subMenuHolder_mc[“subMenuButton”+j].onRelease = subMenuHolder_mc[“subMenuItem”+j].onReleaseOutside=function ():Void {
    // RollOver event handler
    subMenuHolder_mc[“subMenuButton”+j].onRollOver = function():Void {
    var subMenuRollOverColor:Color = new Color(this.bkgColor_mc);
    // RollOut event handler
    subMenuHolder_mc[“subMenuButton”+j].onRollOut = function():Void {
    var subMenuRollOutColor:Color = new Color(this.bkgColor_mc);
    function closeSubMenu():Void {

  • Suryakant May 22, 2009 at 7:27 am

    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.

  • 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

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

    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?


  • vijesh Oct 15, 2010 at 9:07 am



  • 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

    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


    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


  • Thierry Sep 7, 2011 at 9:01 pm


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

  • Nick Mar 28, 2014 at 2:18 pm

    how do you get the sub menu buttons to disappear? if i hover over but dont click then just move the cursor the last button hovered over stays visible?

You must log in to post a comment.