Step 1
Open a new Flash file. Select Modify > Document ( Ctrl + J ). Set the width and height for your file: 200 x 200px. Select white as background color, Frame rate to 26fps> click OK.
Macromedia Flash - Create a simple menu Picture 1
Take the Selection Tool (V), double click on layer 1 to rename its name in the menu.
Step 2
Select the Line Tool (N), in the Properties Panel (Ctrl + F3) set the following properties:
- Choose #DCDCDC color for Stroke color
- Select the type of line that is Solid with a thickness of 1
- Choose Stroke hinting to remove the book from the corners when drawing
Macromedia Flash - Create a simple menu Picture 2
After that, draw 4 lines like the image below
Macromedia Flash - Create a simple menu Picture 3
Step 3
Create the first button for the menu with the Text tool (T). In the Properties Panel , select the following options:
- Select Static Text field
- Select the Trebuchet MS fone type
- Choose font size 16
- Font color is # 9F9F9F
Then enter the name of each button
Macromedia Flash - Create a simple menu Picture 4
Step 4
Use the Line Tool (N) to draw the 'arrow' on the left of the text menu as shown below.
Macromedia Flash - Create a simple menu Picture 5
Step 5
Create other buttons in the menu in the same way as creating the first button
Macromedia Flash - Create a simple menu Picture 6
Step 6
Select the first button (in the example 'About Company') and press F8 (or go to Modify > Convert to Symbol ) to convert the first button into a Movie Clip.
Macromedia Flash - Create a simple menu Picture 7
Step 7
Go to the Properties Panel , at the entry, enter button1 as shown below
Macromedia Flash - Create a simple menu Picture 8
Step 8
Double click on the newly created Movie Clip with the Selection Tool (V). You will go to edit in Movie Clip.
Macromedia Flash - Create a simple menu Picture 9
Step 9
Just select the 'arrow' section, press Ctrl + X (Cut), create a new layer, select it and press Ctrl + Shift + V (Paste in Place)
Step 10
Go back to layer 1 (layer text), select it and press F8 ( Convert to Symbol ) to convert it to Graphic.
Macromedia Flash - Create a simple menu Picture 10
Step 11
Select frame 15 and press F6 key. After that, drag the Graphic just created to the right a little bit, remember to hold down Shift while dragging to avoid skewing.
Step 12
Pick the Selection Tool (V), click once on Graphic to select it, open the Properties Panel ( Ctrl + F3 ). On the right, you will see the Color section. Select Tint with the color # 4183BF for Color (as shown below).
Macromedia Flash - Create a simple menu Picture 11
Step 13
Right-click anywhere in the light purple area between the two keyframes and select Create Motion Tween from the menu that appears
Macromedia Flash - Create a simple menu Picture 12
Step 14
Lock layer 1, select layer 2, click on frame 15 and press F6 key. Then drag the 'arrow' to the right a bit further (remember to hold down the Shift key when dragging).
Macromedia Flash - Create a simple menu Picture 13
Step 15
Right-click anywhere in the light purple area between the two keyframes, select Create Motion Tween from the menu that appears.
Step 16
Return to the main scene ( Scene 1 ), create a new layer open on the layer menu and name it IB1 (Invisibale Button 1). After that, create the Invisible Button above the first button. See the picture below.
Macromedia Flash - Create a simple menu Picture 14
Step 17
Select Invisible Button, press F9 key or go to Window > Actions to open the Actions Panel. Then put the following ActionScript code into the Actions panel:
on ( rollOver ) {
_root .mouse_over_button1 = true ;
}
on ( rollOut ) {
_root .mouse_over_button1 = fstartlse;
}
Step 18
Create a new layer and name it AS (Action Script). Select the first frame and enter the following script:
_root .button1.onEnterFrame = function () {
if (mouse_over_button1) {
_root .button1. nextFrame ();
} else {
_root .button1. prevFrame ();
}
};
So it is done. You can download the source file here.