Flash 3D Boxes with ActionScript 3 | FlashMyMind - Flash and ActionScript 3 Tutorials

3D Boxes via ActionScript 3 – Part 1

February 6, 2009 by: smonte

I got an inspiration from this thread when I was thinking for a new tutorial subject. So, I decided to do a tutorial on Flash 3D with ActionScript 3.0. This tutorial will basically teach you how to place objects in 3D coordinates and how to convert them in to 2D coordinates. That’s how we create an illusion of a 3D environment.

Setting up the environment

1. Create a new Flash ActionScript 3 movie (500×300).

2. Draw a box on the stage. Make it size 37×37 with some border (border helps to emphasize the 3D effect). My box ended up looking like this:

My box

3. Convert the box in to a movie clip (name doesn’t matter, registration point in the center).

4. Linkage the box movie clip to a class named “MyBox”. If you are unfamiliar with movie clip linkage, please see the “External Classes” tutorial.

5. Remove the box from the stage. We’ll be adding all of the boxes to the stage via ActionScript 3.0.

Moving into ActionScript 3.0

6. First we need to create the “MyBox” class. So create a new ActionScript file and type the following code.

 
package {
        import flash.display.MovieClip;
 
        public class MyBox extends MovieClip {
 
                //These are the 3D coordinates for this box
                public var xpos3D:Number = 0;
                public var ypos3D:Number = 0;
                public var zpos3D:Number = 0;
 
                //Current angle of the box (needed in Part 2 of the tutorial)
                public var currentAngle:Number = 0;
 
                public function MyBox() {
 
                }
        }
}

7. Save the file as “MyBox.as”. Remember to save it in the same location where your .fla file is!

8. Go back to your main movie. Type the following code in the first frame.

//The maximum depth
const MAXIMUM_Z:Number = 450;
 
//The number of the boxes
const NUMBER_OF_BOXES:Number = 14;
 
//Create an array that will contain all the boxes
var boxes:Array = new Array();
 
//Focal length determines how much perspective is seen (you can play around
//with this value to see the effect yourself).
var focalLength:Number = 300;
 
//Vanishing point is the point where the objects converge.
//So when the object is really far away, it's coordinates
//are almost equal to the vanishing point.
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = 20;
 
//The 3D floor for the boxes
var floor:Number = 80;
 
//The starting depth for the first box
var startingDepth:Number = MAXIMUM_Z;
 
//The z distance between the boxes
var zDistance:Number = 50;
 
//This loop creates and positions the boxes (starting from the box furthest away)
for (var i=0; i < NUMBER_OF_BOXES; i++) {
 
        //Create a new box
        var box:MyBox = new MyBox();
 
        //3D x position is the same for all the boxes
        box.xpos3D = 0;
 
        //3D y position is the same for all the boxes 
        box.ypos3D = floor;
 
        //Assign a z value for the box (the greater the z, the further away the box is)
        box.zpos3D = startingDepth;
 
        //Update the starting depth for the next box (the next box will be closer)
        startingDepth -= zDistance;
 
        //Calculate the scale ratio for this box ("perspective formula")
        var scaleRatio = focalLength/(focalLength + box.zpos3D);
 
        //Scale the box according to the scale ratio
        box.scaleX=box.scaleY=scaleRatio;
 
        //Position the box on to the stage (from 3D to 2D coordinates)
        box.x=vanishingPointX+box.xpos3D*scaleRatio;
        box.y=vanishingPointY+box.ypos3D*scaleRatio;
 
        //Push the box to the array
        boxes.push(box);
 
        //Add the box on to the stage
        addChild(box);
}

Now you should have something like this.

9. To make the boxes move as in the movie on top of this page, write the following code below the previous code.

//We use ENTER_FRAME for the animation
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 
//This function is called in each frame
function enterFrameHandler(e:Event):void {
 
        //Loop through the array of boxes
        for (var i=0; i < NUMBER_OF_BOXES; i++) {
 
                //Save the box to a local variable
                var box:MyBox = (MyBox)(boxes[i]);
 
                //Decrease the depth of the box (bring the box closer);
                box.zpos3D-=5;
 
                //If zpos3D <= -focalLength, we end up with a negative scaleRatio (or we are dividing by zero).
                //At this point, we know that the object has already passed "us".
                //Therefore, we put the box behind the last box of the line.
                if (box.zpos3D<=- focalLength) {
 
                        //The last box of the line is always first in the array,
                        //because of the sortZ() function.
                        box.zpos3D=boxes[0].zpos3D+zDistance;
                }
 
                //Calculate a scale ratio for the box
                var scaleRatio = focalLength/(focalLength + box.zpos3D);
 
                //Scale the box according to the scale ratio
                box.scaleX=box.scaleY=scaleRatio;
 
                //Set an alpha according to the scale ratio
                box.alpha=scaleRatio-0.5;
 
                //Position the box on to the stage (from 3D to 2D coordinates)
                box.x=vanishingPointX+box.xpos3D*scaleRatio;
                box.y=vanishingPointY+box.ypos3D*scaleRatio;
        }
 
        //Sort the boxes according to depth
        sortZ();
}
 
//This function sorts the boxes so they overlap correctly
function sortZ():void {
 
        //Sort the array so that the box which has the highest 
        //z position (= furthest away) is first in the array
        boxes.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
        //Set new child indexes for the boxes
        for (var i:uint = 0; i < NUMBER_OF_BOXES; i++) {
                setChildIndex(boxes[i], i);
        }
}