# How to Create a Flash Menu in 20 Minutes

##### Tutorial Details
• Difficulty: Intermediate
• Program: Flash
• Estimated Completion Time: 20 mins

Imagine you’ve promised your client he will have that menu idea you told him about later on today, when you meet. You open up Flash and begin a rough but great example, which you can code or extend later. During this tut we’ll focus on making just such a menu; as customizable as possible, without using any classes, just component parameters.

Create a new ActionScript 3 Flash file and set the dimensions to 960 x 70 pixels. The menu will go great on a 960.gs HTML template for your client’s corporate website. Set the framerate to 25 fps. To keep things fast, we won’t use a Document Class here; we’ll just stick to the Flash IDE.

## Step 1: Prepare the Buttons

We’ll have five main buttons with submenus, like in the scheme below:

Create a rectangle with the dimensions 192 x 40px. I came up with the width by dividing 960 by 5 buttons. Color it with a linear gradient with the following colors:

## Step 2: Main Button

Press “F8″ to turn the rectangle into a movie clip, and name it “button”.

## Step 3: Button Frames

Double-click the button you just created and add two more frames. These will be the over and down states of the button. We’ll use a movie clip and add actions to it instead of a button, so we can make the submenu buttons clickable. If you were to use a button, a click on a submenu button would trigger a click on the main menu button.

## Step 4: Set Over State Colors

For the second frame (the “over” state of the menu) change the colors of the gradient as in the picture:

Do the same for the third frame (the “down” state of the menu) with the following colors:

## Step 5: Text Label

Rename the first layer to “back” and above it make three more layers named “label”, “bar” and “actions” respectively.

Lock the actions layer, then on the label layer create a new dynamic textfield named “label_txt”. This will be the label of the button. The text of the button will be different according to the setting of the movieclip on the stage. For this we’ll use component parameters, so instead of copying the button five times, we can reuse the component and will only need to change a variable.

## Step 6: Button Separator

With the line tool, create two adjacent lines with the following colors and turn them into a single movie clip called “bar”. Place this movieclip exactly at 190px on the x axis (use the Properties panel). This will be the button separator, which will add a spatial separation between the menu buttons. We’re turning this into a movieclip to be able to hide it later, for the last button.

## Step 7: Component Definition

Go back on the main scene and in the library right-click on the button movieclip and select “Component Definition…”

## Step 8: Component Parameters

These parameters can then be accessed in the actions of the movie clip as variables. We’ll use the “textvar” string to name the menu, the “hidebar” boolean to hide the separator and the “submenu” string as the linkage name of the related submenu’s movie clip.

## Step 9: Timeline Actionscript

Now, go back into the “button” movie clip and in the actions layer, press “F9″ to open the Actions window, then enter the following code:

this.useHandCursor = true;
this.stop();

if( this.textvar ){
label_txt.text = this.textvar;
}
if( this.hidebar ){
bar.visible = false;
}
label_txt.mouseEnabled = false;

var sb = false;

function over(e:MouseEvent){
gotoAndStop(2);
}
function out(e:MouseEvent ){
gotoAndPlay(1);
}
function down( e:MouseEvent ){
gotoAndStop(3);
}
function up( e:MouseEvent ){
gotoAndStop(2);
}


Let me explain the code:

We set the “useHandCursor” property to true and “trackAsMenu” to true. The first makes the cursor turn into a hand when over the button, and the second tells the movie clip to behave like a menu. This ensures that subsequent event over the children will not affect the main movie clip.

We stop the timeline, so we can actually have button functionality, and set “mouseEnabled” to false for the “label_txt” text field. If we don’t do this, the text field will get ROLL_OVER events and the menu will suddenly roll-out. Basically this turns off the interactivity with the mouse for the text field.

Next, we check if the “textvar” variable is set, and if so, we assign it to the text field’s text property. Pretty simple. We make the check because we can leave the parameter empty and in this case we get an error.

We do the same check with the “hidebar” property. If we select true, we’ll hide the bar movie clip.

Last, we make the over, out, down and up functions and add events to the movie clip, turning it into a button. It’s important to use the “ROLL_OVER” and “ROLL_OUT” events instead of the “MOUSE_OVER” events. I’ve tried this with “MOUSE_OVER” and it was a mess, because the “MOUSE_OVER” was being triggered every time the mouse was moving, thus creating a flickering effect.

## Step 10: More Buttons!

We’re ready to perform a test. Erase the button from the stage and add it from the library again at (0,0)px. For the “textvar” parameter type Home:

Add the other buttons, with a distance of 192px between them, the following “textvar” values and set “hidebar=true” for the last button:

We can test the movie to see it work up until now:

Great! The captions appear and the buttons react to the mouse.

## Step 11: Making the Submenu

We’ll start making the submenu. This submenu will be duplicated for every submenu possible. Create a 550 x 30 rectangle like in the picture, press “F8″ and name it “sbmenu1″. Be sure to check Export for Actionscript and give it a linkage name (Class) of “sbmenu1″.

## Step 12: Inside the Submenu

Again, as in the first movieclip, create three more layers and name them “circle”, “buttons” and “actions”.

Move the rectangle to 30px on the x axis. We’ll use the 30px to construct the rounding of the submenu.

## Step 13: Rounding Circle

Create a 60px circle (holding “Shift” will make a perfect circle, or you can use the circle tool and alt-click the stage to get a dialog asking for the exact size) and position it at (-30,-30)px. Draw a vertical line through (0,0)px to cross the middle of the circle, select the right half of the circle and delete it, like in the picture below.

Delete the line, then with the half circle selected again press “F8″ and turn it into a graphic symbol. Be careful to select the right middle Registration point, as we’ll want to animate the rotation of the circle from its center.

## Step 14: Circle Tween

Rotate the circle graphic to 90° over the buttons, but before that, use the Free Transform tool to drag the rotation center point to the center of the circle, as in the picture, and set its position to 30 on the x-axis:

Create another frame with “F6″ after four frames, and rotate the circle a quarter anti-clockwise. Then right-click on the timeline between frames and select “Create Motion Tween”.

Lock the other layers and select the “back” layer. Move the first frame at the same time with the last circle frame, and extend the timeline with another keyframe (“F6″), like in the picture. Select the first frame and change the size of the rectangle to 5px, then right-click between the keyframes and select “Create Shape Tween”:

If you move the playhead, you’ll see the submenu animating, but the circle is still visible. Create a 30x30px rectangle on the mask layer at (0,0)px, then right-click the mask layer and select Mask:

In the “actions” layer, create an empty frame at the same frame as the animation will finish, press “F9″ to open the Actions panel, and write a “stop();” command, so the menu animation won’t repeat. You should have a nice submenu animation.

Create a 130x30px black rectangle and press “F8″ to convert it to a new symbol. Call it menuubtn. This time, we’ll choose Button as the type. We are actually doing the same thing as we did in the beginning: creating a button with three states, then wrapping it in a master moveiclip with a label text field inside, which we’ll control with a custom parameter.

## Step 18: New Frames

Move the rectangle on the second frame (Over) and duplicate the frame. You can create different colors for the rollover and down, but I’m in a hurry now :). When you return to the submenu, select the button and press “F8″ again to make it into a movie clip. Call it sub_btn. You’ll notice the button is a transparent blue; that means it doesn’t have the “Up” state, it’s a transparent button.

## Step 19: Button Label

As before, enter the “sub_btn” movieclip and create two more layers: a “label” layer and an “actions” layer. In the label layer, create a dynamic text field, set alignment to center, color to white (this text will be on black) and name it “label_txt”.

In the actions layer, paste the following actionscript:

stop();
this.label_txt.mouseEnabled = false;
this.label_txt.text = this.textvar;


## Step 20: Custom Parameters

Right-click the subbutton movieclip and select “Component Definition” and add the “textvar” parameter:

Now that we have created the custom button, let’s create more submenu buttons and name them appropriately:

## Step 22: Making it Work

Things are good now, but the submenu does not appear, you say. That’s because we need to code the appearance of the submenu in the over function of the main button. Declare a new variable “sb” that will hold our submenu after the line “label_txt.mouseEnabled = false;”

var sb = false;


Replace the last two event listeners with this code:

if( !this.submenu ){
}


This will add the “down” and “up” listeners only when the button doesn’t have a submenu.

In the “over()” function, add this piece of code:

if( this.submenu !== '' && !sb ){
var cn = getDefinitionByName( this.submenu );
sb = new cn();
sb.y = 40;
sb.x = ( this.offset )? this.offset : 0;
}
if( sb ){ sb.visible = true; }


Let me explain the code:

We are checking if the submenu parameter is set; if so then we get a reference to a class name using “getDefinitionByName”. This function assigns the variable “cn” a class type. This is the way to instantiate a class from a string name. If you try to instantiate a string variable with the “new” keyword, it won’t work.

After we instantiate the submenu, we set it to 40px on the y axis to be below the button and add it to the button’s display list.

Lastly, we check again if sb exists and we set it visible. This is because the instantiation happens only once, but if the mouse enters another button the out() function will be called, and we’ll hide the “sb” movieclip. Next time it enters the button, the movieclip exists already, so the if condition is skipped and we only show it. This optimization makes our menu faster, cutting memory consumption.

## Step 23: Try it Out

We’re ready! Just enter “sbmenu1″, the linkage name of the second button, as the submenu parameter and test the menu. You should have a nice menu. From here on, you can set up click handlers for the buttons, to make them do what you want.

## Step 24: Make the Second Submenu

To show you the power of extensibility, duplicate the “sbmenu1″ movieclip and rename it “sbmenu2″. We’ll add this to the Contact button.

## Step 25: Done

I’ve changed the buttons to something else, and put the rounding circle in the right place by modifying the tweens.

Now all we need to do is set the submenu parameter for the contact button and we’ll have a nice menu!

We have a nice sketch to show to our client. He will be happy to use it to represent his architecture company and will possibly grant me a discount on my new home :)

We have reached the end of the tutorial. If you liked it, please comment! I tried to make it as intuitive as possible. Thank you for staying until the end!

• Nick

Awesome tutorial, read it all. Great insight on how to use components in flash thanks very much!

• Mike

I’ve made a menu in flash that I then put on a website. Sometimes, when i click on the buttons, the link doesnt work. Its says that the page that its linking to may not be safe. Therefor, nothing happends.
Could really need some help.

• http://www.cbesslabs.com Bratu Sebastian

Mike, you have to run the webpage from a server, in order to work.
If it still doesn’t work, try adding “allowScriptAccess=true” as a parameter in html and in embed. This is what can happen, from what I believe.

• samrat

Thanks for Sharing………..I tried and works perfectly………

• Ben

sweet tut dude, thanks

• I’m new to this can anyone tell me how to load an external swf into an mc using an button?

• http://psdho.me PSDhome

Great tutorial. Thank you very much.

• sharepoint

Hi, what can I stop to stop my button from flashing?

• Jordan S

Hey, thanks for the tutorial! I did have a problem with it though- I wasn’t able to get the roll-out functions for the sub menu’s working properly. I eventually figured out that if you are using CS4 and publishing to Flash Player 10, the sub-menu roll-outs will not work properly. After choosing to publish to Flash Player 9, everything worked smoothly.

• elamonii

Great job !!!! Thanks a lot……..

• http://www.cbesslabs.com Bratu Sebastian

Thank you for your comments. Yeah, Jordan, it was the flash player, at least you managed to get it done!

• learningflash

Hey Nice tutorial you posted but I have 1 question if I want to load the webpage in the same website how do I go about doing it? for instance i want to load the google web on the same page instead of opening a new window.

Thanks!

• http://www.cbesslabs.com Sebastian Bratu

You’ll have to do this:

function someFunction( e:MouseEvent ){
navigateToURL( new URLRequest( ‘url’ ), ‘_self’ );
}

Basically, choosing ‘_self’ as the second parameter navigates in the same window. Just replace somebutton with a buttonname in submenu or menu and the url, obviously

• Dalton

Hi, just with the code below do i need to replace the someFunction really need these to open _self. When I copy that it is says syntax error.

function someFunction( e:MouseEvent ){
navigateToURL( new URLRequest( ‘url’ ), ‘_self’ );
}

• http://boraalap.com bora

Hi, Sorry About my english first of all

It is awesome tutorial btw but i have 1 question is it possible to make like this, i dont want submenues disappear when mouse_over or roll_over. i want it if the person click another main menu btn, sub menu will disappear. do you know anyway to do that ??

thank you alot

• http://boraalap.com bora

or can you tell me how can i fix this menu bar. it is not working properly all the time also if i can make it stable it can be better and when someone click other btn sub will disappear. http://www.boraalap.com/ada/index.com

Thanks Again

• http://www.cbesslabs.com Bratu Sebastian

Hy, bora, yes it is possible, but with some modifications to the code, I can’t tell you exactly now, if you really need it, maybe you can get a component, this tutorial is not meant to be production-ready. If you really want it done like this, contact me and we can talk.

• Pingback: Best of Tuts+ – April

• http://mathiasburton.com,forbiomedpharmacy.comnavredo mat burton

Everything works great except I can’t change the links on the submenu. It links directly to whatever main menu button it’s a part of. I can’t make a separate link for any individual submenu link basically. Is there a way to do that?

• AS3

I was having the same issue as you but i figured it out took me a few days so here it goes:

I downloaded the source file from above and looked over how the menu works if you notice in layer two (2) of the main movie there is this code bellow basically navigating you to a website.

solutions.addEventListener( MouseEvent.CLICK, function(e){ navigateToURL( new URLRequest(‘http://active.tutsplus.com’) ); } );
presss.addEventListener( MouseEvent.CLICK, function(e){ navigateToURL( new URLRequest(‘http://net.tutsplus.com’) ); } );

If your making this menu/sub menu part of a site there is a small problem – your sub menu wont work correctly if you use the above code you get error code 1020 or 1120 don;t quite remember sorry. Due to the fact the button is not in the main movie but a “sub movie” to fix this i figure out that you need to back to the root or the “main movie”

So if you are using this tutorial code you need to paste this in the “submenu1″ actions – and im assuming your are using AS3 not AS2 because root function – see bellow is different in AS3 and AS2 , AS2 its _root

stop();

lets brake it down

about. = name of the button or “instance name”
addEventListener( MouseEvent.CLICK, function (e) { = listing for a click function in the event (e)
MovieClip(root). = points back to the root
gotoAndStop(11);} = go and stop at frame number 11 : NOTE if you put the wrong frame you will get an error message something like you can not have a null text

Hope this Helps

• Agus

Heres the code:

var menu_label:Array = new Array(“Presentación”, “Servicios”, “Quienes somos”,

var i:Number = 0;
var page:Number;

for( i = 0; i < total; i++ )
{
var btn = new flashmo_button();
btn.name = "btn" + i;
btn.x = fm_button.x + 97 * i;
btn.y = fm_button.y;
btn.item_no = i;

btn.flashmo_button_label.fm_label.text = each_substring[0];
btn.item_url = each_substring[1];
}

I can not seem to define the submenu links. Can anyone show how? I have tried suggestion above but it doesn’t seem to work. Thanks

• Kevin

this tutorial is great but I’m getting an Error message

ReferenceError: Error #1065: Variable submenu1 is not defined.
at global/flash.utils::getDefinitionByName()

I’m somewhat new to Flash and can’t seen to be able to fix this error
Can you help me
Thank you very much

• Kevin

the above error is when I create the submenus

• rick

Is there an easy way to have the button that was just clicked to stay on the ‘Over’ state? thx

• Thumpe

Hi! I´ve tested this tutorial and i came to the part 22 (i think)… i dont really know where i get wrong because when i test my menu (Ctrl+Enter) i cant get the submenu “dropdown” as it chould… anyone who know what i have done wrong and if it is in the earlier stage i get lost? Very happy for answer! :)

• Quinston

If editing the textvar values directly within the source files provided, the menu buttons screw up, displaying random letters and numbers. Why?

• Reuben Von Schnaze

Hey, i havn’t used flash in a while so this question might seem retarded. However, im trying to get the submenu to link to a local file. The code i could probably figure out, but the problem lies in where i should place it.

I’ve come up with two possible solutions so far

1. Add a variable to the menubtn where i name the local html file i want to open for each button, and make a mouse event where the variable opens the designated page

2. Put an invisible rectangle over each button in the submenu and ad a mouse event for each of these (this will take a lot of time and this is the only solution i know how to do so far since im not the best coder)

If there is an obvious/simpler solution to this, please share it.

Regards

Thanks a lot. Nice tutorial.

• http://javahomeanddesign.com Tyo

Thanks for the tutorial, this tutorial very useful for me to learn flash..

• Felicia

Hi! This definitly seems to be the solution to my website problem and you are explaining in a great way. I am however having trouble with the script; the intended button is only flashing instead of working with the right mouse over functions. This is the error message:
1120: Access of undefined property label_txt.

• Rachel

How do I link to external pages from the submenu? Is there a variable to use?

• Nikolaj

Hi! Thanks for a great tutorial (me being a bit slow however..). Long time since I worked with flash, forgotten so much already..

Ok, so I was trying to re-create this but ending it at step 10 (More buttons!).
It keeps “flashing”, when I test it. If i change the buttons from “MovieClip” to “Button”, it stops to flash..
Also, I’m trying to make the links active withing the page I’m creating. Have used different gradient then in the tutorial, but that could not be the problem..

Thankful for any replies given.

• http://www.skris.ro cristian

Foarte frumos tutorialul! GG pentru Romania. Multa bafta

• http://www.sketiglyka.gr Niki

Hi there… thanks for sharing..
( I need a link to my blog)

Hey good tutorial. I was wondering how I could do the same using a bitmap image?

• Axel

hey sir,, plss help me…

function out(e:MouseEvent ){
gotoAndPlay(1);
if( sb ){ sb.visible = false; }<< this command not working for me
}

everytime i roll out mouse from the box…
i try to copy action script from ur file
but its not solve the problem

and the vartext isn't working so well
example, I type "Home"
when i debug it… it just "Hom" or "Hoe"???
the different font..its different problem
i try so many font… i just get so many problem..=="

by the way
I use Adobe flash cs5, actionscript 3 and flashplayer 10

Plsss comment, thx before

• Jai

Hai friend this tutorial is very useful for all can anyone pls help me how a give a link to sub menu, I have tried a lot but i cannot able to give.Pls help

• Wolfgangthor

Hey great tutorial. I have only one issue, the submenu is playing right off the bat without rolling over the proper button, it starts as soon as I test the movie. How can I get it to stop, all the code is correct, no errors were found and I copy/pasted the code from your source file into my file and it still plays as soon as I test the movie. I tried placing stop(); commands where I thought would fix the problem but to no avail. Any help would be appreciated, I am using CS5.5 if it makes any difference, Thanks!

• http://- mukhlis

wow.. It’s so wonderful menu by AS 3.0 which is made just for a moment.
but, any the menu same like this by using AS 2.0 I really need it ,please?

• http://michaeljameswilliams.com/ Michael James Williams

Why AS2?

• Aylwin

need help here.
I tried your tutorial, and its got stuck at the textvar parts. I am able to get the over and down state but when testing, the label all got random up. Even when I download your sourcefile and tested it directly without editing, it shows the same error on your files. What happened? Please help.

• Bruno

Hi, this tutorial is great, but i’ve had a problem when executing it. In every button, the only letters that appear are the ones included in the word “label” i’ve come to realize. An example is when I write “Planning”, what appears to me in the .swf movie is “la” because they are the only letters form the word “label”. It would be great if someone could help me with this. Thanks in advance.