Advanced and modern Fash menu

In this lesson, you will see how to create very modern flash menu using the action script code. You can use this menu for any web site. You will also learn how to design modern menu, how to use instance name for action script code and more.

Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 360 pixels and the height to 105 pixels. Select #EDECE0 as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.



Step 2

Take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Enter #B5B4AC for the stroke color
2. Select Solid as the type of outline, with the line thickness set to 1.
3. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a two vertical lines like it is shown on the picture below.



Step 3

Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #D7D3C1 and draw a “rectangles” on the bottom of every buttons about 120x4px. See the picture below.



Step 4

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a Vedrana as font.
3. Choose 16 as font size and bold it,
4. Select #585856 as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type the name of buttons like it is shown on the picture below.



Step 5

After that, select only the last two letters of every buttons name and unbold it. See the picture below.



Step 6

Take the Selection Tool (V) and select the first buttons text (in my example “COMPANY”) and rectangle on the bottom. Then, press F8 key (Convert to Symbol) to convert this buttons name and rectangle into a Movie Clip Symbol.



Step 7

While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip whatever you like. I have called my “company_mc”. See the picture below.



Step 8

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



It's time for animation

Step 9

Take the Selection Tool (V), select only a text (in my example "company) and press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).

Step 10

Go back on layer 1, double click on it with Selection Tool (V) and change its name in rectangle.

Step 11

While you're still on layer recatngle, press again F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 12

After that, click on frame 10 of layer rectangle and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Alt+Shift key and do the following:



Step 13

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 14

Take the Selection Tool (V) and select text layer. Then, press F8 key (Convert to Symbol) to convert this text also into a Movie Clip Symbol.



Step 15

Click on frame 10 of layer text and press F6 key. Then, take the Free Transform Tool (Q) again and enlarge the text a little. After that, place it on the position like it is shown on the picture below, usign the arrows key.



Step 16

Then, take again the Selection Tool (V) and click once on the text.After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, for Tint color choose #A5A396 and put it down to 100%. See the picture below.



Step 17

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 18

Go back on the main scene (Scene 1).

Step 19

Double click on layer 1 to rename its name in menu. After that, create a new layer above the layer 1 and name it invisible button.

Step 20

Select the invisible button layer and create the invisible button over the first button (rectangle and text - movie clip). See the picture below.



Step 21

Take the Selection Tool (V), click once on the invisible button to select it and go the Action Script Panel (Shortcut key: F9). Then, enter the following action script code inside the actions panel:

on (rollOver) {
_root.mouse_over_company_mc = true;
}

on (rollOut) {
_root.mouse_over_company_mc = fstartlse;
}

on (release){
getURL("http://www.flashvault.net/");
}

Step 22

Create a new layer above the invisible button layer and name it action.

Step 23

Click on the first frame of layer action, go again to the Action Script Panel (F9), and enter this code inside the action panel:

_root.company_mc.onEnterFrame = function() {
if (mouse_over_company_mc) {
_root.company_mc.nextFrame();
} else {
_root.company_mc.prevFrame();
}
};

We're done with the first button . Repeat this process for every other buttons in menu.Only difference is that you must use another instanca name.

Enjoy!

Download source file (.fla)

Posted in: Flash