Macromedia Flash - Create vertical Flash menu

You have seen many beautiful Flash menus and want to do that? Take a look at this exercise and you'll know how to create a vertical flash menu.

Step 1

Create a new flash file, go to Modify > Document ( Ctrl + J ) and set the settings as shown below

Macromedia Flash - Create vertical Flash menu Picture 1

Step 2

Double click on layer1 and rename it to background. Add a new layer and name it menu. Then use the Rectangle Tool (R) to draw 5 88.5 x 250px sized rectangles with the following settings:

1. Stroke color : not selected
2. Fill color : # A1958A

See the picture below

Macromedia Flash - Create vertical Flash menu Picture 2

Step 3

Select the Text Tool (T) with Fill Color #FFFFFF and enter the first button of the menu with the word 'Home'

Macromedia Flash - Create vertical Flash menu Picture 3

Step 4

Select Modify > Transform > Rotate 90 ^o CW ( Ctrl + Shift + 9 )

Macromedia Flash - Create vertical Flash menu Picture 4

Step 5

Select the first button in the menu (Home), press F8 key ( Convert to Symbol ) and convert it into a Movie Clip .

Macromedia Flash - Create vertical Flash menu Picture 5

Macromedia Flash - Create vertical Flash menu Picture 6

Step 6

Select the converted Movie Clip, open the Properties Panel (Ctrl + F3) and enter button1 in the box

Macromedia Flash - Create vertical Flash menu Picture 7

Step 7

Double-click the newly created Movie Clip (Button) or right-click and choose Edit in Place .

Macromedia Flash - Create vertical Flash menu Picture 8

Step 8

Select text Home, press Ctrl + X (Cut), add a new layer (layer 2) and paste the text just cut into the newly created layer (press Ctrl + Shift + V ) to paste.

Step 9

Go back to layer 1, click on frame 20 and press F6 key. Then in the Fill Color box set the color to # E16802. Go back on frame 1, go to the Properties Panel (Ctrl + F3) at Tween choose Shape .

Macromedia Flash - Create vertical Flash menu Picture 9

Step 10

Lock layer1, select layer2, go to frame 10 and press F6 key. Select Modify > Transform > Rotate 90 ^o CCW ( Ctrl + Shift + 7 )

Step 11

Select frame 20 and press F6 key. Then use the mouse to drag the Home text to the top of the button (rectangle) as shown below

Macromedia Flash - Create vertical Flash menu Picture 10

Step 12

Select layer1, go to the Properties Panel , at Tween choose Motion .

Macromedia Flash - Create vertical Flash menu Picture 11

Step 13

Select frame 20 of layer1, open the Action Script Panel ( F9 ) and enter the following script:

stop ();

Step 14

Go back to the main scene (Scene 1), add a new layer and name it Invisible Button 1. Then create the ' Invisible Button ' on the first button (see image below).

Macromedia Flash - Create vertical Flash menu Picture 12

Step 15

Select ' Invisible Button ', open the Action Script Panel ( F9 ) and enter the following code (note to change the link to the address you want Home link to).

on ( rollOver ) {
_root .mouse_over_button1 = true ;
}
on ( rollOut ) {
_root .mouse_over_button1 = fstartlse;
}
on ( release ) {
getURL ( "https://quantrimang.com/" , "blank" );
}

Step 16

Add a new layer and name it Action Script. Go to the first frame and enter the following script:

_root .button1.onEnterFrame = function () {
if (mouse_over_button1) {
_root .button1. nextFrame ();
} else {
_root .button1. prevFrame ();
}
};

So we've finished the first button of the menu. Follow the same steps as above to complete the remaining buttons in the menu.

The Script for the ' Invisible Button ' of other buttons

on ( rollOver ) {
_root .mouse_over_button2 = true ;
}
on ( rollOut ) {
_root .mouse_over_button2 = fstartlse;
}

on ( release ) {
getURL ( "https://quantrimang.com/" , "blank" );
}

And Action Script for buttons is

_root .button1.onEnterFrame = function () {
if (mouse_over_button1) {
_root .button1. nextFrame ();
} else {
_root .button1. prevFrame ();
}
};
_root .button2. onEnterFrame = function () {
if (mouse_over_button2) {
_root .button2. nextFrame ();
} else {
_root .button2. prevFrame ();
}
};
_root .button3. onEnterFrame = function () {
if (mouse_over_button3) {
_root .button3. nextFrame ();
} else {
_root .button3. prevFrame ();
}
};
_root .button4. onEnterFrame = function () {
if (mouse_over_button4) {
_root .button4. nextFrame ();
} else {
_root .button4. prevFrame ();
}
};
_root .button5. onEnterFrame = function () {
if (mouse_over_button5) {
_root .button5. nextFrame ();
} else {
_root .button5. prevFrame ();
}
};

Download source file (.fla)