Bouncing Flash Menu

In this tutorial, You have a chance to learn how to make advanced bouncing flash menu using the action script code and some special flash tips and tricks. You can use this menu for any web site and on that way make it a little dynamic. Using this tutorial, you will also learn:

1.how to design this menu,
2.how to animate it,
3.how to apply action script code on it,
4.how to apply alpha effect on animation and more.

Step 1

Create a new flash document.

Step 2

Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 200 pixels. Select #FDFDFD as background color and set your Flash movie's frame rate to 28 fps. Then, click ok.



Step 3

Take the Line Tool (N) and draw a five shapes like it is shown on the picture below.



Step 4

After that, while the Line Tool (N) is still selected, go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Enter #BDBDBD for the stroke color
2. Select dotted options as the type of outline, with the line thickness set to 2.



Then, draw a five horizontal line like it is shown on the picture below.



Step 5

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



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



Now we have designed our menu and it's time for animation.

Step 6

Take the Selection Tool (V) and select the first buttons text (in my example “COMPANY”) and the shape on left side and dotted line.See the picture below.



After that, press F8 key (Convert to Symbol) to convert this buttons name, dotted line and shape into a Movie Clip Symbol.



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 input field there. Call this Movie Clip whatever you like. I have called my “company_mc”. 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

Take the Selection Tool (V), select only a text (in my example "COMPANY") 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 10

Go back on layer 1 and select only the shape on the left side using the Selection Tool (V). See the picture below.



Step 11

Then, press again Ctrl+X key (Cut). After that, create a new layer above the text layer and it shape.

Step 12

Select the shape layer and press Ctrl+Shift+V key (Paste in Place).

Step 13

While the shape that you just cuted is still selected, press again F8 key (Convert to Symbol) to convert this shape into a Movie Clip Symbol.

Step 14

Click on frame 5 and 10 of layer shape and press F6 key.

Step 15

Go back on frame 5, take the Free Transform Tool (Q) and enlarge the shape a little. See the picture below.



Step 16

Go to the Property inspector (Ctrl+F3) and click on the Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 0% .



Step 17

Right-click anywhere on the gray area between the frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 18

Go back on frame text and press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.



Step 19

Click again on frame 5 and after that on frame 10 of layer text and press F6 key.



Step 20

While you're still on frame 10, take the Selection Tool (V) and click once on the text to select it.After that go to the Properties Panel (Ctrl+F3) again.On the right, you will see the Color menu. Select Tint in it. For Tint Color set #854A1F and put it down to 100%.



Step 21

Go back on frame 5 and move your text (in my example "COMPANY") a little down using the mouse or by arrows key. After that, take the Selection Tool (V) and click once on the text to select it. Then, go to the Property inspector once again and click on the Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 22

Right-click anywhere on the gray area between the frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.

Step 23

Click on frame 10 of layer 1 and press F5 key.



Step 24

Go back on the main scene (Scene 1).



Step 25

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

Step 26

Select the invisible button layer and create the invisible button over the first button in menu. See the picture below.



Step 27

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

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

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

Step 28

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

Step 29

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.company_mc.onEnterFrame = function() {
if (mouse_over_company_mc) {
_root.company_mc.nextFrame();
} else {
_root.company_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!