Top Flash Menu

In this tutorial made for Flash 8 , you will see how to create advanced top flash menu using the Action Script.You can use this menu for any web site. In this tutorial, you will also learn:

1. How to design menu,
2. How to animate it,
3. How to apply action script code on it and more.

Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 220 pixels and the height to 200 pixels. Frame rate set to 60 fps (Frames per Second), and for background color set #FBFAE8. See the picture below.



Step 2

Take the Line Tool (N), go in the Property inspector, select #535653 for the color , set the line thickness to 1, choose Solid as line type and you may also check the Stroke hinting option, this will give you better and more smooth outlines.



Step 3

Then, draw a five "lines" that will represent menu. See the picture below.



Step 4

Take the Text Tool (T), go in the Property inspector below the scene, choose Static Text (see left part of the image below). Choose any font you like. For color choose #444644, size which you like, and type text for links. See the picture below.



Step 5

Choose the Selection tool (V), and select the first text in menu ("HOME"). After that press F8 key (or select Modify > Convert to Symbol ) to convert this text ("HOME") into a Movie Clip symbol.



Step 6

Then, go to the Properties Inspector, and you will see from the left side Instance name input field. Call this Movie Clip home_mc.



Step 7

Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.



You should now be inside the movie clip.

Step 8

Insert a new layer (layer 2). Lock layer 1.

Step 9

Select layer 2, take the Rectangle Tool (R),click on Stroke color and choose No stroke ( You will draw a rectangle without the outline colors), for Fill color choose #9FF178, and draw a "rectangle" like it is shown on the picture below.



Step 10

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



Step 11

Click on frame 12 and 16 of layer 2 and press F6 key (Keyframe).



Step 12

While you're still on frame 16, take the Free Transform Tool (Q), select the "rectangle", press and hold down Alt key and decrase it a little. Look at the picture below!



Step 13

Go back on frame 1, take again the Free Transform Tool (Q), press Alt key and do like it is shown on the picture below.



Step 14

Take the Selection Tool (V) and click on the "rectangle" once to select it. After that, go to the Property inspector once again and click on the Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 0% .



Step 15

Select layer 2, go to the Property inspector (Ctrl+F3), and for Tween choose Motion.



Step 16

Lock layer 2, unlock layer 1, select only the text ("HOME"), press Ctrl+X (Cut), insert a new layer above layer 2 (layer 3), select it and press Ctrl+Shift+V (Paste in Place).

Step 17

While the text ("HOME") is still selected, press F8 key (or select Modify > Convert to Symbol ) to convert it into a Movie Clip Symobl.



Step 18

Click on frame 12 and 16 of layer 3 (text layer) and press F6 key.



Step 19

While you're still on frame 16, take the Selection Tool (V), click once on the text to select it ("HOME"), go to the Property inspector and click on the Properties tab. On the right, you will see the Color menu. Select Tint, for color choose white, and Tint Amout set to 100%. See the picture below.



Step 20

Go back on frame 12, take the Selection Tool (V), select the text ("HOME"), and move it a little up.

Step 21

Select layer 2, go to the Property inspector (Ctrl+F3), and for Tween choose Motion.

Step 22

Select layer 1, click on frame 16 and press F6. After that, open the Action Script Panel (F9), and type this:

stop();

Step 23

Go back on the main scene (Scene 1).



Step 24

Create a new layer and name it Invisible Button 1. Select it and create the Invisible Button, over the first button in menu. See the picture below.



Step 25

Take the Selection Tool (V), and click once on the Invisible Button to select it. Aftetr that, open the Action Script Panel (F9), and paste this script:

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

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

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

}

Step 26

Insert a new layer and name it AS (Action Script).



Step 27

Click on the first frame of layer AS, and in A.S. Panel paste this scritp:

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

We're done!

Repeat this steps for every other button in menu.

Cheers!

Download source file (.fla)

Posted in: Flash