This tutorial will show you how to create advanced flash menu using the Action Script.
Step 1

Create in photoshop or any other graphic program (could be done in flash also), menu. For this example we shall take menu made in Photoshop.
Look at the  picture bellow.



Step 2

Open Flash and Import (ctrl+R) made menu.

Step 3

Look at the dimensions of menu in flash, by marking it an opening Info pannel (ctrl+I).



Open Properties Pannel (ctrl+F3), and set width and height dimensions in size option same as for the menu.





Step 4

Then click on "menu" ¨C mark it, open Align pannel (ctrl+K) and click on icon Align to stage, after that on Align horizontal center and Align vertical center to precisely center  menu with background.
Look at the picture below.



Now you have centered the menu in Flash and now it is ready for next steps. Lock its layer.

Step 5

Insert a new layer and name it Button. 



Step 6

Click on Rectangle Tool (R), stroke color must be switched off ,and draw some "rectangle" over the button.
Look down!



Then mark that drawn "rectangle" and press F8 to convert it in symbol.
In Convert to symbol window under Behavior (type - flash8) choose Button, in Registration point choose middle left square, name whatever you like and press ok!



Step 7

Double click on a new made button, or right click and choose Edit in Place. After that in timeline, drag Up keyframe on Hit keyframe using drag and drop technique.



Step 8

Back to main Scene. Now you have got an invisible button which you can use for the hole menu. Now you must copy that invisible button for all other button's menu.

To do that, select invisible button and holding (ctrl+shift) drag it at second menu's button. Now you  have duplicated the first Button on the second button.

Selecte the second button and click on Free Transform Tool (Q) with it adjust, if necessarily, second button with background., extending it or reducing it. Look at the picture below!



Do that for all other buttons in menu,  in an equivalent way, but be careful while you drag buttons - use the Arrow tool(V).

Step 9

Lock Buttons layer and hide it, click on layer menu and insert another layer and name it Effects.



Step 10

Choose Rectangle tool (R),with fill color choose white color, stroke color must be switched off. 



Step 11

Select that "white rectangle" using Arrow tool (V), and press F8 (Convert to symbol)

In previous window go to Behavior and choose Movie clip, Registration point must be in centre, name whatever you like and press Ok.



Step 12

Double click on a new made Movie clip ("white rectangle") to go in its inside, select it again, then press F8, but this time in Behavior (type-flash8) choose Graphic, Registration point must be in centre, name whatever you like and press Ok.



Drag the first frame of layer 1 on the second frame, using drag and drop technique.



Step 14

Click once on the "white rectangle" and down in Properties Pannel (Ctrl+F3), on color drop down menu click on Alpha and set it to 38%.





Click on layer 1's 5 frame and press F6(Keyframe). After that drag "white rectangle" from  the begining to the end of button using drag and drop technique  or by "arrow" keys  on the keyboard. Look at the picture below!



Click on layer 1's on 2 frame and down in Properties Pannel(Ctrl+F3) under Tween drop down menu choose Motion.





Step 15

Click on layer 1's 2 frame, press ctrl +C (copy), and after that insert another layer above layer1. Click on layer 1's 4 frame and press F6, and then on the keyboard press Ctrl+shift+V or right mouse click and choose Paste in Place.

After that click on  layer 2's  8 frame and press F6. Then go back on layer 1 and click on its 8 frame and press F5. Go back on layer 2, click on 8 frame and using drag and drop technique drag "white rectangle" to the begining of layer 1's  first "white rectangle".
Look at the picture bellow.





Now repeat step 15 for all other "white rectangles" until you complete all button, so you insert new layers and arrange in a certain order ¨C one to other.

Warning!
While inserting every new layer in timeline scale you must insert keyframe (F6) for 3 frame further in relation to the first, and the laste frame former layer and then on the first frame paste "rectangle" (ctrl+shift+V), and on laste frame remove it  to the begining of "rectangle" former layer using drag and drop technique. Look at the picture!
Now repeat step 15 for all other "white rectangles" until you complete all button, so you insert new layers and arrange in a certain order ¨C one to other.




Step 16

After you have completed all button with  "white rectangles".





Click on the last layer and insert another layer and name it AS(Action Scrpt). Than click on its first frame, open Action Script Pannel (F9), and paste this script:

stop ();

Then click on frame with witch ends the layer AS's last "rectangle", and press F6, open AS pannel(F9) and paste this script:

stop ();



Step 17

Back to main  scene (Scene1), click on centre point of button, and in Properties Pannel (Ctrl+F3) for instance name type button1.





Step 18

Select layer button, insert new layer and name it Action script.



Click on the  first frame of layer Action script, open Action pannel (F9), And paste this script:

Step 19

Unlock and discover layer Button, click on first button, open again Action Pannel(F9) and paste this script:

Step 20

Start your animation with Ctrl+Enter and see how your first button menu looks when you drag your mouse over the button, or press F12 to see how it works in Browser.



Now you have made  the animation for the first button. Do that for all other buttons in menu, in an equivalent way like I have done for first button. Only  differences  is that in Action script instead button 1, type button2, and instead instance name in propertis pannel, type button2,3,4¡­ Here  is the Action Script for second button to see the differences.

Action script layer: 

Button layer: Click on the second button and paste this:

We're done!

Enjoy

Download example (134 KB)

discuss this topic to forum