3D flash menu

Step 1

Create a new flash document. Choose Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 450 pixels and the height to 350 pixels. Select white as background color.Set your Flash movie's frame rate to 50 and click ok. See the picture below.



Step 2

It's time for menu design.Take the Line Tool (N), go to the Properties Panel (Ctrl+F3) below the stage and choose the following selections:

1.block the fill color,
2.select #828282 color for the stroke (outline) color.
3.set the line type to Solid and choose 2 for line thickness.



Then, draw a cube like it is shown on the picture below.



Step 3

After that, draw another cube like it is shown on the picture below.



Step 4

Then, draw this cube:



After that, draw this two cubes:



And finally, draw this cube:



Step 5

Take the Paint Bucket Tool (K),set white for the fill color and paint every cube.



Step 6

Using the flash tools for drawing, draw any logo or something in the cneter of cubes. See the picture below.



Step 7

Now, we have designed a 3D menu. It's time for animation. Double click on layer 1 to rename its name in 3D menu.

Step 8

Take the Selection Tool (V) and select only one cube. See the picture below.




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



Step 9

Then, go to the Properties Panel below the stage. On the left side you will see the Instance name input field there. Call this Movie Clip cube1. See the picture below.



Step 10

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



Step 11

Take again Selection Tool (V) and select only this part of cube.



Then, press Ctrl+X key (cut), create a new layer (layer 2), select it , click on the first frame and press Ctrl+Shift+V key (Paste in Place).

Step 12

Select this part of cube and press again Ctrl+X key (Cut).



Step 13

Create a new layer above layer 2 (layer 3). Click on frame 6 and press F6 key. Then press Ctrl+Shift+V key (Paste in Place).

Step 14

Select this part of cube and press Ctrl + X key.



Step 15

Then, create a new layer above layer 3 (layer 4), click on frame 12 and press F6 key. Then press Ctrl+Shift+V key (Paste in Place).

Step 16

Go back on layer 1, click on frame 23 and press F5 key.Then, using the drag and drop technique, move the layer 1, above the layer 4. See the picture below.



Step 17

Select layer layer 2 and press F8 key (Convert to Symbol) to convert the first part of cube into a Movie Clip Symbol.



Step 18

Then, click on frame 3 and after that on frame 6 and press F6 key.

Step 19

Go back on frame 3, take the Selection Tool (V), click once on the first part of cube (Movie Clip) 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, for Tint color set #D7D7D7 and for Tint Amount set 100%. See the picture below.


Step 20

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



Step 21

Repeat this process for part 2 and 3 of cube (layer 3 and 4).





Step 22

Create a new layer above layer 4 (layer 5).

Step 23

Select layer 5, 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 #90BF3B and draw a rectangle on the position like it is shown on the picture below.



Step 24

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



Step 25

Click on frame 18 and press F6 key.

Step 26

Then, go back on frame 1, take the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.



Step 27

Take the Selection Tool (V) and click once on the rectangle that you just decreased to select it. Then, 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 0%.



Step 28

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



After that, click on frame 23 and press F5 key.

Step 29

Create a new layer above layer 5 (layer 6). Then, click on frame 18 and press F6 key.

Step 30

While you're still on frame 18, take the Text Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage.Then, select the following options:

1. Select a Static Text field.
2. Select a vedrana font.
3.Choose 16 as font size and bold it.
4. Select white as color.
5. As the rendering option, select Anti Alias-alias for animation.



Then, type on the green rectangle, that we have created in previous steps "About Us". See the picture below.



Step 31

While the text is still selected, press F8 key, to convert this text into a Movie Clip Symbol.



Step 32

Click on frame 23 and press F6 key.

Step 33

Go back on frame 18, take the Selection Tool (V), 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 0%.



Step 34

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 35

Go back on the main scene (Scene 1).

Step 36

Create a new layer above 3D menu layer and name it Invisible Button.Then, create the Invisible Button over the first cube. See the picture below.



Step 37

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

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

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

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

Step 38

Create a new layer above the Invisible Button layer and name it Action.

Step 39

Click on frame 1 and in Action Script Panel (F9) enter this Action Script code:

_root.cube1.onEnterFrame = function() {
if (mouse_over_cube1) {
_root.cube1.nextFrame();
} else {
_root.cube1.prevFrame();
}
};

Step 40

Test your Movie (Ctrl+Enter).

Have a nice day!





DOWNLOAD SOURCE FILE