How to Create a Flash Menu in 20 Minutes

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.

Designing the Menu

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

Add the following 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.trackAsMenu = true;
this.stop();

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

var sb = false;

this.addEventListener( MouseEvent.ROLL_OVER, over );
this.addEventListener( MouseEvent.ROLL_OUT, out );
this.addEventListener( MouseEvent.MOUSE_DOWN, down );
this.addEventListener( MouseEvent.MOUSE_UP, up );


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

Step 15: Submenu 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”:

Step 16: Mask Layer

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.

Step 17: Submenu Buttons

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:

Step 21: Submenu Buttons

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.addEventListener( MouseEvent.MOUSE_DOWN, down );
	this.addEventListener( MouseEvent.MOUSE_UP, up );
}

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;
	this.addChild( sb );
}
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!