In this lesson, you have a chance to learn how to create modern black and orange flash menu using some special flash tips and tricks.You also have to use action script code to make this lesson. Using this lesson, you will also learn how to:

1. How to design a menu,
2. How to animate it and
3. How to apply Tint effect on it and much more.



Step 1

Create a new flash document. Select Modify > Document . Set the dimensions of your Flash movie to 151 by 114 pixels and set the speed (frame rate) to30 fps. Select black as background color and click ok.





Step 2

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 ISOCTEUR as font.
3. Choose 8 as font size.
4. Select White as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type the name and numbers of buttons on the center of stage like it is shown on the picture below.



Step 3

Take the Selection Tool (V) and select the first buttons text and number (in my example “HOME PAGE ”) and press F8 key (Convert to Symbol) to convert this text and number into a Movie Clip Symbol.



Step 4

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 “HomePage_mc”. See the picture below.



Step 5

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



Step 6

After that, while the text is still selected, press again F8 key (Convert to Symbol) to convert this text again into a Movie Clip Symbol.



Step 7

After that, select frame 15 and press F6 key on the keyboard. While you're still on frame 15, move the text and number a little right using the arrows key or by mouse.

Step 8

Then, take the Selection Tool (V) and click once on the text to select it. 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 black and put it down to 100%. See the picture below.



Step 9

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 10

Create a new layer above the layer 1 and name it effect. Then, using the mouse, move the effect layer below the layer 1.



Step 11

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 #FF691B and draw a “rectangle” about 140x14px and place it on the position like it is shown on the picture below.





Step 12

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



Step 13

Click on frame 15 and press F6 key. After that, go on frame 1, take the Free Transform Tool (Q). press and hold down Shift key and decrease the rectangle like it is shown on the picture below.



Step 14

While you're still on the first frame, take the Selection Tool (V) and click once on the rectangle to select it. Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 15

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 16

Go back on the main scene (Scene 1).

Step 17

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



Step 18

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



Step 19

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_home_mc = true;
}

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

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

Step 20

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

Step 21

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.HomePage.onEnterFrame = function() {
if (mouse_over_HomePage) {
_root.HomePage.nextFrame();
} else {
_root.HomePage.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.

Have a nice day!

Download source file (.fla)