If you have a headache of traditional and static menus, and you want to something dynamically and attractive, the flash menu is a perfect choice for you. Exactly this tutorial will teach you how to create some very cool and attractive flash menu using Action Script. This tutorial is very complicated for explanation, but I'll try on to explain it on the best way I can. So, I have used a lot pictures.Go!



Step 1

Start by creating a 250 ×140 document in Flash. Frame rate set to 40fps (Frames per second).

Step 2

Take the Rectangle Tool (R) and draw a five "rectangles" which will represent a menu. Look at the picture below!



Step 3

Select the Text Tool (A), open the Properties Panel (Ctrl+F3), set the Dynamic Text and create a text.





Step 4

Select the first text (For my example "About us " ) and press F8 on the keyboard (Convert to Symbol) to convert this text into a Movie Clip Symbol.





Step 5

Open the Propeties Panel (Ctrl+F3) and for type butt1. See the picture below.

 

Step 6

Double click on a new made Movie Clip or press right click and choose Edit in Place.



Step 7

Select only the text (In my example "About us "), press Ctrl + x (cut), insert a new layer above layer 1 (layer2), select it and press Ctrl+Shift+V (Paste in place).

Step 8

Select layer 2 (text layer) and Convert it into a Movie Clip.



Step 9

Then, open the Properties Panel (Ctrl+F3) and for   type text.



Step 10

Click on the fifth frame of layer 2 (text layer ) and press F6. After that click on the tenth frame and press again F6 (Keyframe).



Step 11

Go back on the fifth frame and using the arrows key on the keyboard or by mouse, move the "text" (in my example "About us") a little down. Look at the picture below!



Step 12

Select layer 2 (text layer), open the Properties Panel (Ctrl+F3) and for Tween choose a Motion. Look at the picture below!





Step 13

Go back on layer 1, select only the "border" of  "rectangle" and press Ctrl+x on the keyboard (cut).



Step 14

Insert a new layer (layer 3), select it and press Ctrl+Shift+V (Paste in Place).



Step 15

After that press F6 ten times (keyframe) on the keyboard. Look at the picture below!



Step 16

Then click on every second frame, except last two frames, and press delete key on the keyboard. Look at the picture below!



Step 17

Click on layer 1 to select it and  press F8 (Convert to symbol). to convert it into a Movie Clip Symbol.



Step 18

Then click on the tenth frame and press F6 (Keyframe).



Step 19

While you're still on tenth frame, open the Properties Panel (Ctrl+F3) and set alpha to 40%. Look at the picture below!



Step 20

While your Properties Panel (Ctrl+F3) is still open, for Tween choose Motion.





Step 21

Create a new layer (layer4).



Step 22

Click on the first frame, open the Action Script Panel (F9) and paste this script:

stop ();

Step 23

After that click on the tenth frame, press F6 (Keyframe), open the Action Script Panel  again (F9), and paste this script:

stop ();



Step 24

Go back on the main scene (Scene 1), insert a new layer, and name it Action.

 

Step 25

Click on the first frame, and in A.S.panel enter the following Action Script code:

butt1.onRollOver = over;
butt1.onRollOut = out;
butt1.text.buttonText.text = "ABOUT US ";

function over() {
this.gotoAndPlay(2);
}

function out() {
this.gotoAndPlay(1);
}

We're done for the first button. Repeat all previous steps in an equivalent way for every other buttons. Here is the whole script to see the differences:

butt1.onRollOver = over;
butt1.onRollOut = out;
butt1.text.buttonText.text = "ABOUT US";

butt2.onRollOver = over;
butt2.onRollOut = out;
butt2.text.buttonText.text = "LOGIN";

butt3.onRollOver = over;
butt3.onRollOut = out;
butt3.text.buttonText.text = "REGISTER";

butt4.onRollOver = over;
butt4.onRollOut = out;
butt4.text.buttonText.text = "DOWNLOAD";

butt5.onRollOver = over;
butt5.onRollOut = out;
butt5.text.buttonText.text = "FAQ";

function over() {
this.gotoAndPlay(2);
}

function out() {
this.gotoAndPlay(1);
}


Enjoy!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!