Clear red and white menu

Date: 1.2.2008, 1:32    Total views: 43821

In this lesson, you have a chance to learn how to create modern clear red and white flash menu using the action script code and some special flash tips and tricks. You can use this menu for any web site, if you like dynamic menu. In this lesson, you will also learn how to design this menu, apply action script code on it, animate it and much more!


Example:




Step 1

Create a new flash document. Select Modify > Document . Set the dimensions of your Flash movie to 200 by 120 pixels and set the speed (frame rate) to30 fps. Select white as background color and click ok.





Step 2


Take 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 Trebuchet MS as font and bold it.
3. Choose 12 as font size.
4. Select #676767 as color,
5. As the rendering option, select Use Anti-alias for readability.



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



Step 3

Select all names (Ctrl+A) and go to the Align Panel (Ctrl+K). After that, and do the following:

1. Make sure that the Align/Distribute to Stage button is turned off,
2. Click the Distribute vertical center button.



Step 4

Take the Selection Tool (V) and select the first buttons text (in my example “HOME”) and press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.



Step 5

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 whatever you like. I have called my “home_mc”. See the picture below.



Step 6

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



Step 7

After that, while the text is still selected, press again F8 key (Convert to Symbol) to convert this text again into a Movie Clip Symbol.



Step 8

After that, select frame 15 and press F6 key on the keyboard. While you're still on frame 15, move the text a little left using the arrows key or by mouse.

Step 9

Then, take the Selection Tool (V) and click once on the text 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 #FF3358 and put it down to 100%. See the picture below.



Now, you have this:



Step 10

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 11

Create a new layer above the layer 1 and name it effect. Then, using the mouse, move the effect layer below the layer 1.

Step 12

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 #EEDADD and draw a “rectangle” about 210x13px and place it on the position like it is shown on the picture below.



Step 13

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



Step 14

Click on frame 15 and press F6 key. After that, go on frame 1, take the Free Transform Tool (Q). press and hold down Shift key and decrease the rectangle like it is shown on the picture below.



Step 15

While you're still on the first frame, take the Selection Tool (V) and click once on the rectangle to select it. Then, go to the to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 16

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.

Step 17

Go back on the main scene (Scene 1).

Step 18

Double click on layer 1 to rename its name into a menu. After that, create a new layer above the layer menu and name it invisible button.



Step 19

Select the invisible button layer and create the invisible button over the first rectangle and text - button. See the picture below.



Step 20

Take the Selection Tool (V), click once on the invisible button to select it and go the Action Script Panel (Shortcut key: F9). Then, enter the following action script code inside the actions panel:

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

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

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

Step 21

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

Step 22

Click on the first frame of layer action, go again to the Action Script Panel (F9), and enter this code inside the action panel:

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

We're done with the first button. Repeat this process for every other buttons in menu.Only difference is that you must use another instanca name.

Enjoy!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar