Toxiclab.org

Blue flash menu

13.10.2008, 23:8
Submited in: Flash | Total Views: 11533

Read this tutorial and see how to create advanced blue flash menu using the Action Script. You can use this blue menu for any web sites. You will also learn:

1. How to design blue menu,
2. How to animate it,
3. How to use instance name,
4. How to apply action script on this menu and more.



Step 1

Start flash. Choose Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 180 pixels and the height to 120 pixels. Select #E6EEF1 as background color. Set your Flash movie’s frame rate to 28 and click ok.





Step 2


Take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Enter #A8BECA 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 five lines like it is shown on the picture below.



Step 3

After that, take the Rectangle Tool (R), and go again to the Properties Panel below the stage. Then, choose the following options:

1. Enter #517E97 for the stroke and fill color,
2. Select Solid as the type of outline, with the line thickness set to 0.5,
3. Turn on the Stroke hinting option to get rid of any blurry edges while drawing.



Then, draw a six rectangles about 4.5×4.5px, and place it on the position like it is shown on the picture below.



Step 4

It’s time for numbers, so take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select any font, for this example I have used MGI Archon font
3. Choose 10 as font size and bold it.
4. Select #6198AE as color,
5. As the rendering option, select Anti-alias for readability.



Then, type from the right side numbers, starting with 01,02…. See the picture below.




Step 5

After that, while the Text Tool is still selected, Click with the Text tool somewhere inside the blue area for the first button and type “Company”. See the picture below.



Do that for all area in menu, but use a different name. See the picture below.



Now we have designed our ingido blue menu, and it’s time for animaton and actions script.

Step 6

Take the Selection Tool (V) and select the first text in menu (in my example “Company”), including the rectangle and number. After that, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol. See the picture below.





Step 7

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 inputfield there. Call this Movie Clip “Company_mc”.



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

Take the Selection Tool (V) and select only the rectangle. Then, press Ctrl+X key (Cut), create a new layer, name it rectangle, select it and press Ctrl+Shift+V key (Paste in Place).

Step 10

Go back on layer 1, select only a number (01) and press Ctrl+X key. After that, create a new layer above the rectangle layer and name it number. Select the number layer and press Ctrl+Shift+V key again.

Step 11

Go back again on layer 1, double click on it and name it text. After that, while the text layer is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.



Step 12

Click on frame 15 of layer text and press F6 key. Then, move your text a little right using the arrows key or by mouse.

Step 13

Then, take the Selection Tool (V) and click once on the text to select it. After that, go to the Properties Panel below the stage. On the right, you will see the Color menu. Select Brightness in it and put it down to -22%.



Step 14

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 15

Select the rectangle layer, click on frame 15 and press F5 key.

Step 16

Select the number layer, click on frame 2 and press F6 key. Then, take the Selection Tool (V), double click on the number and change the number from 01 to 02. Repeat this process until you came to the end (06). See the picture below.



Step 17

After that, click on frame 7, press F6 key, double click on the number and change the 06 to 01. Then, click on frame 15 and press F5 key.



Step 18

Create a new layer above the all layers and name it effect.



Step 19

Select the effect layer and 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 #87A9BA and draw a “rectangle” from the left side about 2×12px. See the picture below.



Step 20

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



Step 21

Click on frame 15 of layer effect and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.



Step 22

While you’re still on frame 15, take the Selection Tool (V), click once on the rectangle to select it and go 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 30%.





Step 23

Go back on the first frame, take the Selection Tool (V) again, click once on the rectangle to select it and go again 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 24

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 25

We’re done with the animation. Now, it’s time for Action Script. Go back on the main scene (Scene 1).

Step 26

Create a new above the layer 1 and name it invisible button. After that, create the invisible button over the first button in menu. See the picture below.



Step 27

While the Invisible Button is still selected, go to the Action Script Panel (F9). Then, enter the follwing action script code inside the actions panel:

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

on (release){
getURL(”http://www.toxiclab.org/”);
}

Step 28

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

Step 29

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

_root.company_mc.onEnterFrame = function() {
if (mouse_over_company_mc) {
_root.company_mc.nextFrame();
} else {
_root.company_mc.prevFrame();
}
};

Test your Movie (Ctrl+Enter).

Have a nice day!

Download example

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

Browse by category


Most popular tutorials