On the Menu:
   Wiki:
>> View All | Start New    

Flash Drop Down Menu
In this tutorial you will learn how to create a menu button (drop down menu) like the one below in Flash MX.

First, let's open Flash and create a new flash document by clicking on New Flash Document in the opening screen.

Set the size of the stage (the area that we will work on) to be:
width 350
height 230
background White
frame rate 22


Next, turn on the Grid and set it:Go to: View > Grid > Show GridThen go to: View > Grid > Edit GridSet grid to be 18 x 18snap accuracy: normal


Now we can start creating the button that will endup being our menu.
First we need to make a New Symbol. Start by use the Rectangle Tool to create the button. To do this:
selct the rectangle tool (press r)
fill color choose blue
outline color choose balck
Create a rectangle that is 6 squares across and 2 down.


Now we need to convert our rectangle into a movie clip.
Select the box
go to: Insert > Convert to symbol (F8)
Set the name to Menu
Set behavior to movie clip
Click OK


We have now created the main part of the button. Now we need to create the insides of this button.

Select the menu symbol you just created. Right click on it and select 'Edit in Place'. This enables us to see the actual stage that our viewers will see.
Next label the layer with the menu button in it to be "Menu action rect. This will be the fourth layer when we add more layers momentarily. Your screen should look like this:

Now in the other 5 layers by pressing for each layer and renaming it.
Actions and Labels (Top Layer): Actions will be placed on this layer, along iwth labels for frames.
Text (2nd Layer): Text is placed on here for the menu title and menu items
Outlines (3rd layer): Outlines of the boxes for the titles of the items
Item action rects (5th layer): Item button sare place here long with the item buttons' action script.
Rolloff action rect (Bottom layer): This is a button that has the actionscript for Rolloff and goto.
Your time line should look like this:

Now we are going to start adding actions, labels, text, and outlines. Lock all layers. Then first select the 'Actions and Labels layer, unlock it, and place a stop action in frame 1.

Then select frame 6 and insert a key frame by right clicking in frame 6 and selecting "Insert Key Frame".

Then select frame 10 and "Insert Frame" on 10 (by right clicking on frame 10). Also, in frame 6 give it a label name of up by setting in properties to 'up'.

Now lock the Actions and Labels layer.

Next, select the Text layer and unlock it. Here we will put the text on the menu button. Select the text tool, , and create a 'Static Text' field, type in 'Menu', set the font to arial, and size to 23. Also, place the text field that you just created over the blue box, like so:



After you're finished placing the text field, right click on 'Frame 6' and 'Insert > KeyFrame'. Then lock this layer.

Now select the 'Outline' layer. Create an arrow using the line tool . Create three lines that forma pyramid and fill it in with the color black. Then select the entire arrow (pyramid) and group it by doing 'Modify > Group'. If the arrow is not pointing downward, rotate it so it is. Then place it next to the menu text on the menu button.
Next take the box tool with no fill and outline the size of the blue button. Also select Frame 6 and insert key frame. Then lock the 'Outline' layer.
Your button should now look something like this:

and your time line should look like this:


Now go back and unlock the 'Menu action rect' layer. Select the menu button, right click, and 'Convert to Symbol'. Make this a button and name it 'Popup menu_2' like so:

Now we will add some action script. Select the menu button and add the following action 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 been opened. Then select frame 6 and insert a key frame. Now Lock this layer. Now select the 'Item actions rects' layer and insert a keyframe in frame 6. Do the same for the 'Rolloff action rect' layer. The timeline should now look like this:

Now for all of the layers, right click on frame 10 and Insert > Frame.

Now select the 'Item action rects' layer and unlock it. (Make sure all of the other layers are locked though). Also make sure the marker is in frame 6. We will work in only frame 6 for the rest of the wiki.

First, let's make the menu buttons. Create a box the same size as the blue menu box, and make it green. Again, the box should be 6 grid boxes across and two down. Set it to the right of the blue menu button like so:

Next we are going to convert this green box by selecting the green box and then 'Modify > Convert to Symbol...'. Make it a button and name it 'popup item menu'.


Now, double click on the new button we just created. Make the button change color when the user rolls over it. This is done by inserting a key frame in the 'Over' frame of the button timeline.

While the red marker is in the over frame now, change the color of the green box to be a lighter color. To be sure you did this right, check to make sure that when the marker is in the 'up' frame, the box is the original color green. When the red marker is in the 'over' frame, it is the new lighter color.

Now press to go back to the view of the timeline of the blue menu button. While still in the 'Item action rects', copy and paste the green button 4 more times and put them under eachother.

Now lock this layer.
Unlock and select the 'Outlines' layer.
Select the rectangle tool and for the fill select "No fill" and for the outline select black. Now use the tool to draw an outline over each of the new Item menus.
Then select the arrow (pyramid) and rotate it to about 45 degrees counter-clockwise. The stage should now look like this:

Now lock the 'Outlines' layer and unlock and select the 'Text' layer. Using the text tool create a title for each item button.

Now lock the 'Outlines' layer and unlock the 'Item action rects' layer, and select it. We will now put in some more action script. This action script will be for each "item" button. Select the first button and for actions type:
on(release){
getURL("http://www.colby.edu");
}


Repeat this for all of the item buttons. Then lock the 'Item action rects' layer
Now unlick the 'Rolloff action rect' layer 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 blue menu button will reset to its normal state (where the item menus are not visable). This button needs to be oversized, so it has to be bigger then what our item buttons extend to. So, select the rectangle tool. For the fill use a light pink color and for the OUline use no fill. Then create a box that is greater in size than the menu and its menu items.

Next, convert the box to a button and name it 'popup menu rolloff'. Then edit the button and make it so the 'hit' frame in the button's timeline is the only frame with anything in it.

Now add the action scrip to the 'popup menu rolloff'. The action for this is a simple goto and stop on frame 1 action. Add the script and you are done!
on(rollOver){
gotoAndStop(1);
}

Your timeline should look like the image below:


To test your button out go to 'Control > Test Movie'
Edited on Jan 19 2007 03:32PM by Nikolai Barnwell
home | LRC | colby college | contact | code & design by: szymon mikulski & clara koh | loaded in 0.02 seconds | last modified: Sep 27th, 2006 at 13:46.