High Tech flash menu

Learn this tutorial and see how to create High Tech flash menu in flash 8 using the Action Script and some tricks.



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);