1. How to design flash menu,
2. How to animate it using some special flash tips and tricks,
3. How to apply action script code on it,
4. How to create invisible button and much, much more!

Example:



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 153 pixels and the height to 171 pixels. Select white as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.

Step 2

Call the current layer buttons. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Enter #b3b1b1 for the stroke color
2. Select Solid as the type of outline, with the line thickness set to 1.
3. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.


Step 4

Then, draw a four horizontal lines like it is shown on the picture below!


Step 5

Select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a ( Helvetica Condensed ) as font.
3. Choose 12 as font size,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.


Then, type the name of buttons like it is shown on the picture below.


Step 6

Take the Selection Tool (V) and select the first buttons text (in my example “HOME PAGE”) and line on the bottom. Then, press F8 key (Convert to Symbol) to convert this buttons name and line into a Movie Clip Symbol. See the picture below!



Step 7

While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip HomePage_mc.


Step 8

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.


It's time for animation

Step 9

Call the current layer line. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 10

Select the Selection Tool (V), select only a text (in my example "HOME PAGE") and press Ctrl+X key (Cut). After that, create a new layer above the layer line and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).

Step 11

While the text is still selected, hit again F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.


Step 12

Select now frame 8 and 16 and press F6 key.

Step 13

While you're still on frame 16, select the Selection Tool (V) and click once on the Movie Clip to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, for Tint color choose #A5A396 and put it down to 100%. See the picture below.


Step 14

Go back now on frame 8 and using the Selection Tool (V), move the text a little down.

Step 15

Right-click anywhere on the gray area between frame 1 and 8 and frame 8 and 16 on the timeline and choose Create Motion Tween from the menu that appears.


Step 16

Select now frame 16 of layer line and press F5 key.

Step 17

Create now a new layer above the layer line and name it rectangle.

Step 18

Click now on frame 2 of layere rectangle and press F6 key. While you're still on frame 2, take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose white and draw a “rectangle” at the bottom of button about 152x2px. See the picture below.


Step 19

Select now frame 16 and press F6 key. While you're still on frame 16, take the Free Transform Tool (Q) and do like it is shown on the picture below!


Step 20

Select now frame 2 of layer rectangle and go to the Properties Panel (Ctrl+F3) below the stage! On the left side you will see Color drop down menu. Select shape on it!


Step 21

Go back on the main scene (Scene 1).

Step 22

Create a new layer above the layer buttons and name it invisible button.

Step 23

Select now the invisible button layer and take again the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a rectangle over the first button shape. See the picture below!


Step 24

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.


Step 25

Double-click on the button on stage with the Selection tool(V). You should now be inside the button.


Step 26

Move now the keyframe from the Up state to the Hit state. See the picture below.


Step 27

Create now a new layer above layer 1 (layer 2).

Step 28

Click on the Over state of layer 2 and press F6 key. After that, find somewhere any sound (mp3. file) which you like to use for this lesson, and Import it into a Flash library (File > Import > Import to Library). You can also if you like, download my source file at the end of lesson, and use my sound file from flash library!


Step 29

Take now the Selection Tool (V), click once on the Invisible Button to select it, open the Action Script Panel (F9) and enter the following Action Script code inside the Actions panel:

on (rollOver) {
_root.mouse_over_HomePage_mc = true;
}

on (rollOut) {
_root.mouse_over_HomePage_mc = fstartlse;
}

on (release){
getURL("http://www.medhley.com");
}


Step 30

Create a new layer above the invisible button layer and name it action. Then, click on the first frame of layer action script and enter the following Action Script code inside the Actions panel:

_root.HomePage_mc.onEnterFrame = function() {
if (mouse_over_HomePage_mc) {
_root.HomePage_mc.nextFrame();
} else {
_root.HomePage_mc.prevFrame();
}
};

Now, we're done with the first button. Repeat this process also for every other buttons in menu!














[Via toxiclab]