Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Clean flash menu

Posted on Oct 21st, 2009 in Flash Tutorials | 0 comments

In this lesson, I will explain to you how to create clean and advanced flash menu using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to design menu, how to animate it, apply action script code on it and much much more! You can use this menu for any web site.

Example:

Step 1

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

Step 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 #3A3A3A and draw a “rectangle” about 425x25px. See the picture below.

Step 3

After that, take the Free Transform Tool (Q) and duplicate this rectangle three times. See the picture below.

Step 4

Then, take the Selection Tool, select the all rectangles and go to the Align Panel (Ctrl+K) and set the following options:

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

Step 5

While the rectangles is still selected, press Ctrl+G key (Group) to group it.See the picture below.

Then, go again to the Align Panel (Ctrl+K) and set the following options:

1.Make sure that the Align/Distribute to Stage button is turned on,
2.Click on the Align horizontal center button and
3.Click the Align vertical center button.

Now, you have aligned the rectangles with the background.

Step 6

Press now, Ctrl+B key (Break Apart) to break apart this rectangles. Now, you have this:

Step 7

It’s time for text, so 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 Tahoma 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 text like it is shown on the picture below.

Step 8

After that, take the Selection Tool (V) and select the all text. Then, go again to the Align Panel (Ctrl+K) and set the following options:

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

Now. we have aligned the text verticaly.

Step 9

Take the Selection Tool (V) and select only the first text and rectangle. See the picture below.

Then, press F8 key (Convert to Symbol) to convert this rectangle and text into a Movie Clip Symbol.

Step 10

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. See the picture below.

Step 11

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 12

Take 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 1 and name it text.Then, select the text layer and press Ctrl+Shift+V key (Paste in place).

Step 13

Go back on layer 1, double click on it with Selection Tool (V) and change its name in rectangle.

Step 14

While you’re still on layer recatngle, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.

Step 15

Click on frame 15 of layer rectangle and press F6 key.

Step 16

While you’re still on frame 15, take the Selection Tool (V) and click once on the rectangle 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 #171717 and put it down to 100%. See the picture below.

Step 17

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 18

Select the text layer and press again F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.

Step 19

Then, click on frame 15 and press F6 key. While you’re still on frame 15, move the text a little right using the arrows key or by mouse. See the picture below.

Step 20

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

Now, you have this:

Step 21

Then, Click on the Filters tab in the Properties Panel.After that, click on the plus icon and select the Glow filter. Make the adjustements as follows:

1. Blur X and Y : 5
2. Quality : Low
3. Strength: 100%

Now, you have this:

Step 22

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 23

Go back on the main scene (Scene 1).

Step 24

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 25

Select the invisible button layer and create the invisible button over the first rectangle and text – movie clip. See the picture below.

Step 26

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_HomePage_mc = true;
}

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

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

Step 27

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

Step 28

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.HomePage_mc.onEnterFrame = function() {
if (mouse_over_HomePage_mc) {
_root.HomePage_mc.nextFrame();
} else {
_root.HomePage_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.

Have a nice day!

Source: flashfridge.com