• home
  • forum
  • my
  • kt
  • download
  • 3D flash menu

    Author: 2007-06-06 09:19:45 From:

    This detailed lesson will teach you how to create advanced 3D flash menu in flash 8 using the Action Script.You will also learn how to design a menu, how to create buttons animation and how to draw a 3D cube using the Line Tool.

    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 (.fla)

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (228)
      Optimization (17)
      Animation (166)
      Projector (11)
      Audio (54)
      Special Effects (170)
      Backend (26)
      Text Effects (92)
      Drawing (34)
      Tips and Techniques (58)
      Dynamic Content (38)
      Tricks (8)
      Games (114)
      Utilities (24)
      Getting Started (99)
      Video (59)
      Interactivity (48)
      Web Design (37)

    New

    Hot