Advanced Flash Menu

This tutorial will show you how to create advanced flash menu using the Action Script. You will also learn:

1. How to use Info Panel,
2. How to create Invisible button.
3. How to animate menu and more.



Example:



Step 1

Create in photoshop or any other graphic program (could be done in flash also), menu. For this example we will  use  menu made in Photoshop. You can alos if you like download my menu.



Step 2

Create a new flash document and choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and import a menu that you just created in photoshop or some other graphic program.

Step 3

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



Then, go to the Properties Panel (Ctrl+F3) below the stage. Then set the dimensions (width and height) as the dimensions of menu.





Step 4

Take the Selection Tool (V) and click once on menu to select it. Then, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



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

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



While the rectangle that you just created is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.



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 – 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  the "drag and drop" technique. See the picture below.

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




Step 16

After you have completed all buttons with  "white rectangles",





select  the last layer and create another layer and name it AS(Action Scrpt). Than click on its first frame of layer AS, open the Action Script Panel (F9), and paste this code inside the actions panel: 

stop ();

Then, click on the last frame of layer AS, press F6 key and go again to the AS panel (F9). Then, enter this code inside the actions panel:

stop ();



Step 17

Go back to the main scene (Scene1), click on centre point of button, and in Properties Panel (Ctrl+F3) for instance name type button1. See the picture below.





Step 18

Create a new layer above the button layer and name it ActionScript.



Click on the  first frame of layer ActionScript, and enter this code inside the actions panel (F9):

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 code: 

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

We're done!

Enjoy

Download example (134 KB)