Step 1
Open Flash and start a new project with dimension of 420 X 300, set the frame rate at whatever you want, I usually use 32 fps, for background color choose #E0E3D3. See the picture below.
Step 2
Double click on layer 1 to rename its name in background. After that, create a new layer above the background layer and name it menu.
Step 3
Select the menu layer and take the Rectangle tool (R). In the Properties panel (Ctrl+F3), below the stage, select Solid as type of line, with thickness set to 1. Put the Stroke color to #CECEB8 and the Fill color to #E0E3D3. See the picture below.
Step 4
Draw a "rectangle" about 185x130 pixels. See the picture below.
Step 5
Duplicate that "rectangle" four times and place them on the stage like it is shown on the picture below.
Step 6
Take the Text Tool (A) and in the Properties Panel below the stage, select the following options:
a) Select a Static Text field.
b) Select a Trebuchet MS font
c) Choose 90 as font size and bold it.
d) Select #717161 as color 
Step 7
Then, in every "rectangle" type the first letter of the buttons name - for example S like Services, C-Contacts. See the picture below.
Step 8
Take the Selection Tool (V) and select the first "rectangle", button in menu. After that, press F8 key (or select Modify > Convert to Symbol ) to convert this "rectangle" into a Movie Clip symbol. See the picture below.
Step 9
Double-click on the Movie Clip on stage with the Selection tool (V). You should now be inside the Movie Clip.
Step 10
Take the Selection Tool (V), select only the letter, press Ctrl+X key (Cut), create a new layer above layer 1, click on frame 1 and press Ctrl+Shift+V key (Paste in Place).
Step 11
While the letter is still selected press F8 key (Convert to Symbol) to convert it into a Graphic Symbol.
Step 12
Click on frame 2, 15,16 and 30 and press F6 key.
Step 13
Go back on frame 15, take the Free Transform Tool (Q) press and hold down Shift key and decrease the letter a lot. See the picture below.
Step 14
Take the Selection Tool (V), click once on the letter to select it, go to the Properties Panel below the stage and for Color choose Alpha and put it down to 0%.
Step 15
Take the Selection Tool (V), click again on frame 15, press Ctrl+C key (Copy), click on frame 16, press delete key, and after that Ctrl+Shift+V key (Paste in Place).
Step 16
Right-click anywhere on the gray area between frame 2 -15 and frame 16 - 30 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.
Step 17
Go back on frame 1, open the Action Script Panel (F9) and enter the following ActionScript code inside the Actions panel:
stop();
Step 18
Click on frame 2, go to the Properties Panel (Ctrl+F3) below the stage and for <Frame Label> type 1. See the picture below.
Step 19
Click on frame 15 and enter the following ActionScript code inside the Actions panel:
stop();
Step 20
Click on frame 16 and in Properties Panel for <Frame Label> type 2.
Step 21
Click on frame 30 and enter the following ActionScript code inside the Actions panel:
gotoAndPlay (1);
Step 22
Create a new layer above layer 2 (layer 3). Lock and hide layer 2, select layer 3, take the Text Tool (T) and repeat step 6, but for this time, for font size choose 32. See the picture below.
Step 23
Then, type the full catch word (in my example Home). While the text is still selected, go to the Align panel.If it isn't opened already, just select Window > Align or press Ctrl+K to open it. Then, while the text is still selected do the following in the Align panel:
a) Make sure that the Align/Distribute to Stage button is turned on,
b) Click on the Align horizontal center button and
c) Click the Align vertical center button.
Step 23
While the text is still selected, press F8 key (Convert to Symbol) to convert it into a Graphic Symbol. See the picture below.
Step 24
Click on frame 2, 15, 16 and 30 and press F6 key. Go back on frame 1, take the Free Transform Tool (Q), select the text, press and hold down Shift key and decrease it a lot. See the picture below.
Then, take the Selection Tool (V), click once on text to select it and open the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Alpha in it and put it down to 0% . Repeat this process also for frame 2 and 30.
Step 25
Go back on frame 1, open the Action Script Panel (F9) and enter the following ActionScript code inside the Actions panel:
stop();
Step 26
Click on frame 2, go to the Properties Panel below the stage and on the left for <Frame Label> type 3. 
Step 27
Click on frame 15 and enter the following ActionScript code inside the Actions panel:
stop();
Step 28
Click on frame 16 and in the Properties Panel for <Frame Label> type 4.
Step 29
Click on frame 30 and enter the following ActionScript code inside the Actions panel:
gotoAndPlay (1);
Step 30
Create a new layer above layer 3 (layer4). After that, go back on layer 1, select only the Fill color, without Stroke color and press Ctrl+C key (Copy). Then, click on frame 1 of layer 4 and press Ctrl+Shift+V key (Paste in Place).
Step 31
While the Fill color is still still selected, press F8 key to convert it into a Graphic Symbol.
Step 32
Click on frame 2, 15, 16 and 30 and press F6 key.
Step 33
Select frame 15, take the Selection Tool (V), click once on Fill color to select it and go to the Properties Panel. On the right, you will see the Color menu. Select Tint in it and for Tint color choose #ECEEE6. Tint Amount set on 100%. See the picture below.
Repeat this process also for frame 16.
Step 34
Right-click anywhere on the gray area between frame 2 and 15 and frame 16 and 30 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.
Step 35
Go back on frame 1, open the A.S.Panel and paste this script:
stop();
Step 36
Click on frame 2, and in the Properties Panel for <Frame Label> type 5. Repeat this process also for frame 16, but for <Frame Label> type 6.
Step 37
Select frame 15, and enter the following ActionScript code inside the Actions panel:
stop();
Step 38
Select frame 30 and enter the following ActionScript code inside the Actions panel:
gotoAndPlay (1);
Step 39
Click on frame 30 of layer 1 and press F5 key.
Step 40
Using the "drag and drop" technique, move layer 4 beneath layer 2. See the picture below.
Step 41
Unlock and unhide layer 2, and go back on the main scene (Scene1).
Step 42
Take the Selection Tool (V), click once on the first button ("rectangle") to select it, open the Action Script Panel (F9) and enter the following ActionScript code inside the Actions panel:
on (rollOver) {
gotoAndPlay ("1");
}
on (rollOut) {
gotoAndPlay ("2");
}
on (rollOver) {
gotoAndPlay ("3");
}
on (rollOut) {
gotoAndPlay ("4");
}
on (rollOver) {
gotoAndPlay ("5");
}
on (rollOut) {
gotoAndPlay ("6");
}
on (release) {
getURL ("http://www.flashfridge.com", _self);
}
Action Scrip Explanation
When we move the mouse over the button, label 1,3 and 5 will be started.
on (rollOver) {
gotoAndPlay ("1");
}
on (rollOver) {
gotoAndPlay ("3");
}
on (rollOver) {
gotoAndPlay ("5");
}
When we move the mouse out of button, label 2,4 and 6 will be started. It's so simple.
We're done for the first button in menu. Repeat the previous steps for every other button in menu.
Cheers!
Download source file (.fla)
discuss this topic to forum
