Toxiclab.org

Clear white menu

9.1.2007, 2:31
Submited in: Flash | Total Views: 62399

In this tutorial, I will explain how to create clear white flash menu in flash 8 using the Action Script.



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 200 pixels. Select white as background color, for Frame rate set 36 fps and click ok.



Take the Selection Tool (V) and double click on layer 1 to rename its name in menu.

Step 2

Take the Line Tool (N) and in the Properties Panel (Ctrl+F3), below the Scene, set the following options:

1. Enter #DCDCDC 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.



Then, draw a four "line" like it is shown on the picture below.



Step 3

It is time to create the first button in menu, so take the Text tool (T). In the Properties Panel, select the following options:

1. Select a Static Text field.
2. Select a Trebuchet MS font
3. Choose 16 as font size.
4. Select #9F9F9F as color.


Now, add your first menu text. See the picture menu



Step 4

Using the Line Tool (N), draw the "arrow" from the left side of text. See the picture below.



Step 5

Create the all other texts in menu in an equivalent way, like we have create the first text. See the picture below.





Step 6

Select the first text (in my example "About Company"), and press F8 key (or select Modify > Convert to Symbol ) to convert the first text into a Movie Clip symbol.



Step 7

Then, Go to the Properties Panel below the scene. You will find the Instance name input field there. In that input field type ( Call this movie clip) "button1". See the picture below.



Step 8

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



Step 9

Select only the "arrow", press Ctrl+X key (Cut), create a new layer, select it, and press Ctrl+Shift+V key (Paste in Place).

Step 10

Go back on layer 1 (text layer), select it and press again F8 key (Convert to Symbol) to convert it into a Graphic symbol.



Step 11

Click on frame 15 and press F6 key. After that, move the Graphic symbol to the right a little, by holding down Shift and pressing the right arrow key on the keyboard.

Step 12

Take the Selection Tool (V), click once on the Graphic symbol to select it, open the Properties Panel (Ctrl+F3), on the right, you will see the Color menu. Select Tint and for Tint color choose #4183BF. See the picture below.



Step 13

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



Step 14

Lock layer 1, select layer 2, click on frame 15, and press F6 key. Then, move the "arrow" to the right a little, by holding down Shift and pressing the right arrow key on the keyboard.



Step 15

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

Step 16

Go back on the main scene (Scene1), create a new layer above menu layer and name it IB1 (Invisible Button 1). After that, create the Invisible Button over the first button. See the picture below.



Step 17

Select the Invisible Button, and press F9 or select Window > Actions to open the Actions panel. After that, Enter the following ActionScript code inside the Actions panel:

on (rollOver) {
_root.mouse_over_button1 = true;
}
on (rollOut) {
_root.mouse_over_button1 = fstartlse;
}

Step 18

Create a new layer and name it A.S. (Action Script). Click on the first frame, and enter the following ActionScript code inside the Actions panel:

_root.button1.onEnterFrame = function() {
if (mouse_over_button1) {
_root.button1.nextFrame();
} else {
_root.button1.prevFrame();
}
};

We're done!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends