Toxiclab.org

Animated Flash Menu

11.4.2006, 16:30
Submited in: Flash | Total Views: 220622

In this lesson, I will explain to you how to create animated flash menu in flash using the Action Script. You will also learn:

1. How to design a menu,
2. How to use instance name,
3. How to use A.S. panel,
4. How to apply action script code on this menu and more.

Example:



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 300 pixels and the height to 130 pixels. For Frame rate choose 28fps (Frames per Second) and click ok.



Step 2


Take the Selection Tool (V), and double click on layer 1 to rename its name in buttons.

Step 3

Select the Rectangle Tool (R). You will draw a rectangle without the outline colors, so for Stroke color choose No color, for Fill color choose any color and draw a five "rectangles" that will represent our menu. See the picture below.





Step 4

Select the Text Tool (A), and in the Properties Panel below the scene, select a Dynamic Text field. See the picture below.





Step 5

Select the first button (For my example "HOME" button) and press F8 key on the keyboard (Convert to Symbol) to convert the first button into a Movie Clip Symbol.



Step 6

Open again the Oroperties Panel (Ctrl+F3), and for <Instance name> type button1.



Step 7

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





Step 8

Select only the name of button (In my example "HOME"), press Ctrl + X key (cut), create a  new layer above layer 1 (layer2), select it and press Ctrl+Shift+V key (Paste in Place).



Step 9

Select layer 2 (text layer), and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. Then, in the Properties Panel below the scene for <Instance name> type text. See the picture below.





Step 10

Click frame 5 and 10 and press F6 key. See the picture below.



Step 11

Go back on frame 5 and move your text (In mine example "HOME") a little right using the "arrows" keys on the keyboard or by mouse.



Step 12

Open After that the Properties Panel (ctrl+F3) On the right, you will see the Color menu. Select
Tint, and choose the color which you like.



Step 13

Select layer 2, and in the Properties Panel for Tween choose Motion. See the picture below.





Step 14

Lock layer 2, select layer 1 (bar layer- "rectangle"), press again F8 key to convert it into a Graphic Symbol. See the picture below.



Step 15

Click on frame 5 of layer 1 and press F6. After that click on frame 10 and press again F6. Go back on frame 5, take the Selection Tool (V), click once on the "bar" ("rectangle") to select it, open the Properties Panel and for Color choose Tint, and choose any color.





Step 16

Click once on layer 1 to select it, and in the Properties Panel below the scene for Tween choose Motion. Look at the picture below!





Step 17

Create a new layer and name it Action. After that, Using the "drag and drop technique" move the Action layer beneath layer 1. See the picture below.



Step 18

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

stop ();

Step 19

Click on frame 5 of layer Action, press F6, and in A.S.Panel, paste this script:

stop ();



Step 20

Go back on the main scene (Scene1), create a new layer above buttons layer and name it ActionScript.



Step 21

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

button1.onRollOver = over;
button1.onRollOut = out;
button1.text.buttonText.text = "HOME";

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

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

We're done for first button. Repeat the previous steps for all other buttons in menu.

To see how seems all script, please download fla.

Enjoy!

Download example (66 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends