Toxiclab.org

Drop down menu

7.1.2006, 23:57
Submited in: Flash | Total Views: 294974

This tutorial will show you how to create a simple drop down menu. You will also learn how to design it, how to apply action script code on it, how to create the invisible buttons and more.






Example:





Step 1

Create in photoshop or any other graphic program (could be done in flash also) a button without text – look at the picture!





Step 2


Open flash and press Ctrl+R (import to stage), find that button and insert it.

Step 3

Select that button and press F8(Convert to symbol), go to Behavior and choose : button, name: button 1, and ok



Step 4

Repeat step 3, but  for this time under Behavior (type - flash8) choose mMovie clip, and for name type: button1_mc and click ok.

Now you insert one symbol to the another - Button symbol into Movie Clip symbol.

Step 5

Double click on a new made Movie Clip (button1) or press right click and choose Edit in Place. Press on layer1 two times and change it's name into buttons.

Step 6
Click on twentieth frame and press F6. You're going to insert drop down menu in that frame.

Step 7

While you're at 20th frame, copy first button and place it beneath second. You'll do that by selecting first button, hold down Shift+Alt key and using drag'n'drop technic place a little bit beneath  first button. Look at the picture.



Step 8

Repeat step 7 as many times as much you want links in drop down menu. Look at the picture below!



Step 9

Now when you have done menu button and subbuttons, you must create spacing between buttons equal. Select all buttons and click at window – design pannels – align (Ctrl + K). Align pannel window will appear. Choose «Space» and click at "space" evently vertical. Flash will automatically equalize all distances between buttons. (note! – to stage button in align pannel window must be
Switched off)



Step 10

Close align pannel and click on buttons layer , insert  new layer and name it «text». You will import text on a buttons in that layer.



Step 11

Click at the first frame of text layer, take Text tool (A), set font, color, and size in Properties Pannel (Ctrl+F3) and type it into a first button  - button1.



Step 12
Click on twentieth frame of layer text and press F6 (changing points), and after that type text for all other subbutons, Look at the picture!



Step 13
Select then all texts by holding shift,  and in Properties Pannel (Ctrl+F3) click at Align center icon to center them.



Step 14

Click on text layer , insert a new layer and name it Action.

Step 15

Click on the first frame of layer "Action", open Action Script pannel (F9), and type:

stop();

Step 16

Press text layer again, insert another layer and name it Label.

Step 17

Click on first frame of layer Label and in Properties Pannel under <Frame label>,  type closed.



you'll get this in timeline scale.



Click on twentieth frame of layer "Leibl" and press F6 (changing points). After that in Properties Pannel (Ctrl+F3) under "Frame Leibl" type: open.

Step 18

Lock all layers except Buttons layer, click on first frame of Buttons layer and after that click once on first button (Button1) to select it. Open Action Script pannel and paste the script:

on (rollOver) {
gotoAndStop("open");
}

Step 19

Close Action Script pannel (F9), lock button layer, select layer text, and insert new layer above it and name it closer button.



Step 20
Click on twentieth frame of layer "closer button" and press F6 (changing points), It's now time to create invisible button.

Step 21

Take Ractangle tool (R), Stroke color must be switched off. For Fill color choose some color (for example green). After that be sure that you are at 20th frame of layer "closer button" and that all other layers are locked.

Step 22

Draw invisible "square" on the left side of menu.



Step 23

Select that "square", press F8 (Convert to symbol), and under Behavior choose Button, for name type "invisible button". Double click after that on that button, Click on Up frame, using drag and drop technic move it on a Hit frame.



Step 24

Go back, click on invisible button once and after that take Free Transform Tool (Q). Set up invisible button to be as same length as menu is.



Step 25

Now when you have set the dimensions of  invisible button to be the same as  dimensions of menu, Click on Invisible button once and open Action Script pannel (F9). Paste this script:

on (rollOver, dragOver) {
gotoAndStop("closed");
}

Step 26

Close Action Script pannel and copy invisible button on remaining 3 sides of menu using drag and drop technic holding Alt+Shift key. Look at the picture below!



We're done! Note! If you want to change location of menu, Go back on main scene (Scene 1) and click on Edit multiple frames icon, change position of menu, and at the end be sure to turn off "Edit multiple frames".  Also if you want to decrease menu, take Free Transform Tool (Q) and decrease it!



Download example (48 KB)

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

Browse by category




Most popular tutorials


Resources Worth visiting


Friends