How to create 3D Cube in Flash CS4 with AS3 (ActionScript 3.0)

| Posted by

Hi Friends!

This is Alauddin Ansari, going to show you how to create 3D-Cube in Adobe Flash CS4 with AS3 (ActionScript 3.0). In my opinion it’s a very simple thing to create 3D-Cube or 3D-box in flash with AS3.

Flash 3D-cube Effect

Click on Image to see example

Flash 3D-Cube Effect

Click on Image to see example




For last many days I’m searching for it over the internet and also getting some ideas from my friends. Finally I got many ideas and source to do this but they all are very tough to understand for a beginner or a lower level Flash Developer. Then, I decided to make this simplest and finally I done this. I find a very easy way to create this. You just need CS4 or above version of Adobe Flash. So, just follow these simple and short steps and make this yourself.

    1. Open a new blank Flash Document with ActionScript 3.0.
    2. Save this in an empty folder with name “3dCube.fla”.
    3. Download SimpleZSorter.as and SimpleZSortVO.as in that folder.Now you’ve 3 files in that folder3dCube.fla, SimpleZSorter.as and SimpleZSortVO.as
      Figure 1.1
    4. Now come to the flash. On the stage, create a Square box with 200 x 200 pixel and copy this five times so that there are six squares on the stage.
    5. Make all the six squares with different colors so that they may identify easily. (See figure 1.2)

6 Panel for 3d-cube in flash CS4 with AS3

6 Panels for 3D-Cube



Figure 1.2
    1. Now convert all six squares into Movie Clip separately by pressing F8 and selecting Movie Clip option.

Movie Clip Option

Figure 1.3
  1. Then select all six boxes (by pressing Ctrl+A) and centralize them (Go in Menu “Modify>Align” and make sure that “ü To Stage” option is checked, if not then click on it to checked it and then press Ctrl+Alt+2 (for horizontally center) and then Ctrl+Alt+5(for vertically middle)).
  2. Now all six boxes are at same place one-behind-one. So you can only see the most top box.
  3. Again select all boxes (Ctrl+A) and press F8 to convert them into Movie Clip. Now all six boxes are in one Movie Clip.
  4. Select the Movie Clip on the Stage and give it an <Instance Name> “container”. Your all effort has done. Now just remain a small ActionScript.
  5. Create a new Layer and name it “Action”. Select the first keyframe of “Action” Layer and press F9 to open ActionScript Panel and type or Copy/Paste below script.
stop();

/* formation of 3D Cube starts here */

container.getChildAt(0).rotationY = 90;
container.getChildAt(0).x += 100; // move the on of side panel to 100px right;

container.getChildAt(1).rotationY = 90;
container.getChildAt(1).x -= 100; // move the on of side panel to 100px left;

container.getChildAt(2).rotationX = 90;
container.getChildAt(2).y += 100; // move the top panel to 100px above;

container.getChildAt(3).rotationX = 90;
container.getChildAt(3).y -= 100; // move the bottom panel to 100px below;

container.getChildAt(4).z += 100; // move the back panel to 100px backside;
container.getChildAt(5).z -= 100; // move the front panel to 100px closer;

/* formation of 3D Cube ends here */

/* These six panels make a 3D Cube. Just think deeply about these settings. I'm sure you'll understant this easily. For live example just take 6 cards and place them together and then try to make a cube using that cards as side panels according to above settings. */

/* Now to rotate the 3d cube box with mouse direction */

this.addEventListener(Event.ENTER_FRAME, rotateThis);

function rotateThis(e:Event):void{

SimpleZSorter.sortClips(container);  /* this is to sort the six panels according to their Z-axis. try without this code, you can understand it value */

container.rotationY += (mouseX - stage.stageWidth/2)*0.05;
container.rotationX += (mouseY - stage.stageHeight/2)*0.05;
}

Save the file. Now you can test your flash movie by pressing Ctrl+Enter.

You can download all the source files from here.

If you think that this tutorial is enough to understand or if you have any queries or suggestions then please comment here.

Alauddin Ansari

 

9 thoughts on “How to create 3D Cube in Flash CS4 with AS3 (ActionScript 3.0)

  1. Ashish

    Looks good and also working fine.
    Thanks dude!
    I was needed for this.

    Why you not post some other examples like games and web-related etc.

    Reply
  2. iRACKERS

    hi, i have loaded this dynamically into a different flash file using the uiLoader. but when i change to a different frame on the stage i get this error in the output box

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at _3dCube_fla::MainTimeline/rotateThis()</code

    it works perfectly in practice except from that output

    Reply
  3. iRACKERS

    hi, i have loaded this dynamically into a different flash file using the uiLoader. but when i change to a different frame on the stage i get this error in the output box

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at _3dCube_fla::MainTimeline/rotateThis()

    it works perfectly in practice except from that output

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *