Macromedia Flash - Self-designed animated menu

If you don't like to choose a traditional static menu, you can apply this tutorial to give your website a suitable dynamic menu, it can bring style to a professional website. This tutorial is quite complicated but we will try to explain it in the easiest way. Make sure you follow the instructions step by step.

Step 1

Create a new 250 x 140 Flash file and Frame rate is 40fps .

Step 2

Grab the Rectangle Tool (R) and draw 5 small rectangles (or as many as you want). See the following picture

Macromedia Flash - Self-designed animated menu Picture 1

Step 3

Select the Text Tool (A), go to the Properties Panel (Ctrl + F3), select Dynamic Text and create the letters that display the menu name.

Macromedia Flash - Self-designed animated menu Picture 2

Macromedia Flash - Self-designed animated menu Picture 3

Step 4

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

Macromedia Flash - Self-designed animated menu Picture 4

Macromedia Flash - Self-designed animated menu Picture 5

Step 5

Open the Properties Panel (Ctrl + F3) and enter butt1 . See the following picture

Macromedia Flash - Self-designed animated menu Picture 6

Step 6

Double-click or right-click the newly created Movie Clip and select Edit in Place

Macromedia Flash - Self-designed animated menu Picture 7

Step 7

Just select each letter (in this case ' About us '), press Ctrl + X (Cut), add a new layer above layer 1 (layer 2), select it and press Ctrl + Shift + V ( Paste in place)

Step 8

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

Macromedia Flash - Self-designed animated menu Picture 8

Step 9

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

Macromedia Flash - Self-designed animated menu Picture 9

Step 10

Click on frame 5 of layer 2 (text layer) and press F6 key. Then click on frame 10 and press F6 again (create Keyframe).

Macromedia Flash - Self-designed animated menu Picture 10

Step 11

Go back on frame 5 and use the arrow keys on the keyboard or the mouse to move the text (in this example ' About us ') down a bit (or go horizontal if you like). See the following picture

Macromedia Flash - Self-designed animated menu Picture 11

Step 12

Select layer 2 (text layer), open the Properties Panel (Ctrl + F3) and in Tween choose Motion .

Macromedia Flash - Self-designed animated menu Picture 12

Macromedia Flash - Self-designed animated menu Picture 13

Step 13

Back to layer 1, select only the border of the rectangle and press Ctrl + X (Cut) on the keyboard.

Macromedia Flash - Self-designed animated menu Picture 14

Step 14

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

Macromedia Flash - Self-designed animated menu Picture 15

Step 15

Then press 10 times the F6 key (Keyframe) on the keyboard. The result will look like the following figure

Macromedia Flash - Self-designed animated menu Picture 16

Step 16

Then select each even keyframe (except frame 10) and press Delete (Del) key on the keyboard. Results after deleting some even keyframes:

Macromedia Flash - Self-designed animated menu Picture 17

Step 17

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

Macromedia Flash - Self-designed animated menu Picture 18

Step 18

Then select frame 10 and press F6 (Keyframe).

Macromedia Flash - Self-designed animated menu Picture 19

Step 19

Still on frame 10, open the Properties Panel (Ctrl + F3) and set the Color to Alpha with 40% contrast.

Macromedia Flash - Self-designed animated menu Picture 20

Step 20

Still in the Properties Panel (Ctrl + F3), select Motion in Tween.

Macromedia Flash - Self-designed animated menu Picture 21

Macromedia Flash - Self-designed animated menu Picture 22

Step 21

Create a new layer (layer 4)

Macromedia Flash - Self-designed animated menu Picture 23

Step 22

Click on the first frame, open the Action Script Panel (F9) and include the following code:

stop ();

Step 23

Then click on frame 10, press F6 (Keyframe), open the Action Script Panel again (F9) and include the following code:

stop ();

Macromedia Flash - Self-designed animated menu Picture 24

Step 24

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

Macromedia Flash - Self-designed animated menu Picture 25

Step 25

Click on the first frame, in the Action Script section, enter the following code:

butt1.onRollOver = over;
butt1.onRollOut = out;
butt1.text.buttonText.text = "ABOUT US";
function over () {
this.gotoAndPlay (2);
}
function out () {
this.gotoAndPlay (1);
}

So we have created the first menu button. Repeat the above steps corresponding to each necessary button. The following are the different codes between each command button:

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);
}

Haven't you done it yet? Please see the original file here.