Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Wooden flash menu

17.2.2007, 18:11    Total views: 48223

Read this thoroughly explained tutorial and see how to create advanced wooden flash menu. Using this tutorial, you will also learn how to design it, how to create Movie Clip Symbol and instance name, how to apply action script code on it and much more!






Example:




Step 1

First of all, you'll need to find any picture of "wood board", but for this time, download my picture.





Step 2


Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 320 pixels and the height to 225 pixels.Set the background colour as whatever you like, and set your Flash movie's frame rate to 32 fps. See the picture below.



Step 3

Choose File > Import > Import to Stage and Import your picture. While the picture is still selected, choose Window > Align (shortcut key: Ctrl+K) and choose 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.



Step 4

Double click on layer 1 to rename its name into a wood.Then, create a new layer above layer wood and name it menu. It's time for menu.

Step 5

Lock layer wood, select menu layer, take the Text Tool (T) and go to the Properities Panel below the stage. After that, select the following options:

1. Select a Static Text field.
2. Select a Georgia font
3. Choose 18 as font size and bold it.
4. Select #5F473D as color
5. As the rendering option, select Anti-alias for readability.



Now let's add some text.Type home and after that duplicate that text 4 times (press and hold down Alt+Shift key and using the mouse move it 4 times down) and change the text. See the picture below.



Step 6

Take the Selection Tool (V), click once on home text to select it and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 7

While the new made Movie Clip is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip home_mc. See the picture below.



Step 8

While the "Home" text is still selected, press again F8 key (Convert to Symbol) to convert this text again into a Movie Clip Symbol. See the picture below.



Step 9

Click on frame 15 and press F6 key. Then, using the arrow keys or by mouse, move the Movie Clip ("Home") on the right side. See the picture below.



Step 10

Take the Selection Tool (V), click once on the Movie Clip ("Home") to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint and for Tint color set black, and for Tint amount 100%. See the picture below.



Step 11

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 12

Create a new layer above layer 1 (layer 2). Click on frame 15 and press F6 key. Then, take the Line Tool (N), select a black as line color, and choose Solid as type of line, with thickness set to 1. See the picture below.



Then, draw a line beneath the "Home" text (Movie Clip). See the picture below.



Step 14

Take the Eraser Tool (E) and erase a little piece of line. See the picture below.



Step 15

Take the Selection Tool (V), select frame 15 and press F6 key. After that, take again Eraser Tool (E), and delete again a little piece of line.

Step 16

Repeat the previous step until you came to the end.



Step 17

Take the Selection Tool (V), select the all frames of layer 2, press right click and choose Reverse Frames from the menu that appears.



Step 18

Go back on the main scene (Scene 1).



Step 19

Create a new layer above menu layer and name it Invisible Button. Then, create the Invisible Button over the first menu text ("Home"). See the picture below.



Step 20

Take the Selection Tool (V), click once on the Invisible Button to select it, go to the Action Script Panel (F9) and enter the following Actions Script code:

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

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

on (release){
getURL("http://www.flashvault.net/");
}


Step 21

Create a new layer above the Invisible Button layer and name it Action. Take the Selection Tool (V), click on the first frame and in A.S.Panel enter this code:

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

We're done!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 296824

2. High-tech city animation
Total views: 247633

3. Water effect
Total views: 227060

4. Photo slide show
Total views: 209347

5. Special Picture Effect
Total views: 184914



Related links