Lets start out setting up the movie's properties.

Set the Size of the stage to: width 350 by height 230.
Make the background color White, and set the Frame rate to 22.

Now turn on the Grid so you can see it. To do this go to: 'View > Grid > Show Grid'. We also need to make sure that the gird is set up the same.

To Set up the Grid go to: 'View > Grid > Edit Grid'. And set up the Gird properties to: 18 x 18. Snap accuracy: Normal, Color of the Gird is up to you.

Now, We can start on creating the Button. that will end up being our Menu.

First we need to make a New Symbol. We'll start this by using the Rectangle Tool to create our rectangle. To do this Select the Retangle tool (press r). For the Fill Color choose 'Blue", and for the outline color 'Black'.

Create a rectangle that is: w:108 x h:18 (Which is 6 grid squares arcoss and 2 down).

Now, we need to convert our rectangle into a Movie Clip. Select the movie clip, and go to: 'Insert > Convert to Symbol' (F8). Set the name for this new MC (Movie Clip) as: Menu. Set the behavior as: Movie Clip. The Click OK.

So, we have the main part of this button Done. Now we need to create the insides of this button. The insides of the button are where we have other buttons that hold our Actionscript. We'll do those buttons towards the end of this tutorial.

So we need to Edit the inside of our Menu MC. To do this select the MC then right click and select 'Edit in Place'. By selecting Edit in place we can see the actual stage that our viewers will see. This way we do not make the Menu open up to big so it goes off stage.

Edit

Edit in Place

Now, We're going to create 5 new layers. Create them and Name them as follows:

Actions and Labels (Top Layer): Actions will be placed on this Layer, Along with Labels for frames.
Text (2nd layer): Text is place here for the Menu title and menu items.
Outlines (3rd Layer): Outlines of the boxes for the Titles of the Items.
Menu action rect (4th Layer): We set a roll over button here and place actions on the button.
Item action rects (5th Layer): Item buttons are placed here along with the item buttons' script.
Rolloff action rect (Bottom Layer): This is a button that has the actionscript for Rolloff and goto.

*All the Layers and their definitions will be explained more as we go on through this tutorial.

There is a layer that already has something in it. This layer needs to be named 'Menu action rect'. This layer holds our base color and outline of our button. Below is what the Layers should look like so far.

Again, Go ahead and Save. Remeber to Save often!

Next step is to start adding actions, labels, text and outlines. We'll start out at the Top layer. First Select the 'Actions and Labels' layer and place a Stop action in frame 1. Then select Frame 6 and insert a Key Frame. To do this right click on Frame 6 and choose: Insert > KeyFrame. And then select frame 10 and insert a frame on 10. After you finish this layer Lock it, this way you won't add anything to this layer on accident.

Select Frame 6 (of Actions and Labels layer) and give it a label name of: up

Set <Frame Label> to up

Second Step is to set up the Text layer. Here we'll give a Label to the Menu Button. We'll need to add text. Using the text tool. Create a 'Static Text' field. and type in 'Menu'. set the Font to Arial, and size 28. And Place the text field you just created over the blue box. After your finished placing the text field, right click on 'Frame 5' and 'Insert > KeyFrame'. Now, Lock this layer then go to the 'Outline' layer.

Text properties

On the 'Outline' layer, Lets create an arrow next to the text 'Menu'. To do this will use the Line tool. Create three lines that form a pyramid and fill it in with a black color. Select the arrow (pyramid) and Group it. To do this go to: 'Modify > Group'. Now, if it is not pointing downward rotate it so it is. If you need to Size it down or up so that it fits in next to the text 'Menu'.

And you will need to Create a Outline the size of the blue box. And you will also need to select Frame 5 and 'Insert a frame'.

So, on to creating our first button for the Menu. Here we'll select the 'Menu action rect' layer. We're gonna make the Blue box we made earlier in the tutorial into a Button,

Now, select 'Menu action rect' layer and right click on the blue box and Convert it to a button, name it: 'Popup Menu 2'.

Now we can add our first part of some actionscript. Select The Menu button. And add the Following script:

on (rollOver) {
gotoAndStop("up");
}

This makes it so when you Roll the mouse over it goes to the label up. and acts like the menu has opened.

Lock this layer. Select both 'Item action rects' layer & 'Rolloff action rect' layers and Insert a Frame on Frame 5.

Save.

So far so Good? Yes or No. Just to let you know from here on it may get a little harder. I am going to stop showing you on how to create certain things. I am asuming you are aware on how to do them. It is going to start geting more tedious (drawn out) so, I am leaving these parts out. I will still explain how to do them but not as much as I have so far.

Now we need to add frames 6 to 10 to the following layers:

Note: Only add 'Insert Frames' to these layers. (See image below)

Text; Outlines; Menu action rect; Item action rects; Rolloff action rect

Everything you do after this point will be On Frame 6 of each layer. So you will not go back to frames 1 to 5 unless it is stated to.

To Start off lets make the the Item menu buttons. Create a box the same size as the Blue menu box. Lets make this one yellow. So it needs to be w:108 x h:18. (6 grid boxes across and 2 down). Set this Right next to the Menu MC. With Snap to on this will snap to its place. Now we need to convert it to a symbol. Convert it to a Button and name it: 'Popup Item Menu'. Make the button change color when the user Rolls over it. Now Copy and Paste about 4 more of these under the first one. Lock this layer for now

Next We move to the 'Outlines' layer. Unlock this layer if it is locked.

Select the Rectangle tool and for the Fill select 'No Fill' and for the Outline select 'black'. Now use the tool to draw an out line over each of the new Item menus. We need to do one more thing to the 'Outlines' layer. Select the arrow (pyramid) thing we made and rotate it about 45 degrees counter-clock wise (left to right).

Now On to the Titles of each New Menu Item. Go to and unlock (if locked) the 'Text' layer. Using the Text Tool create a Title for Each item button. (i.e Item 1; Item 2; Item 3; ect...)

Ok.. Now we can add some more actionscript. This action script will on each Item button. For an example Select Item Button 2. and place a GetUrl (or GotoUrl) action on it.

on (release) {
getURL("http://www.hosehead78.com/");
}

Our next thing is the 'Rolloff action rect' layer. If this layer is locked, unlock it. and select it. What this layer is going to do is act like a reset button. So when you Roll off of the Item buttons the MC will reset to its normal state. This button needs to be over sized, So, it is bigger than what our Item buttons extend to. So create select the rectangle tool. For the Fill use a 'light blue' color (or any light color) and for the Outline use 'No Fill'. And create a box that is greater in size than the Menu and its Menu Items are.

Next convert the box to a Button, Name it: 'Popup Menu Rolloff'. Then edit the button and make it so 'Hit' Frame is the only frame that has anything in it.

Notice that the gray area is only under the Hit frame.

This is what your Roll off button should look like after you move the graphic to its HIT frame

Now add the Actionscript to the 'Popup Menu Rolloff'. The Action for this is a simple goto and stop on frame 1 action. Add the Script and your done!

on (rollOver) {
gotoAndStop(1);
}

Your Timeline should something like the Image below:

There you go. You can use this style to create all kinds of different menus, buttons, ect... There are a lot of other things that you could do with this style, so mess around with the basics of this tutorial and try things out. If there is anything you think you might like to see done of know how to do, let me know I'll do my best to help out. I hope you have enjoyed this tutorial and that it went smoothly for you.