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.