Ok to start off this tutorial, i would like to ask you to make a blank flash movie and set the stage to have a width of 600 and a height of 400.

Now when the movie loads, we need to set some variables so lets start off by setting the origin





What this does, is it defines the origin to be an object with physical properties such as X and Y coordinates and it then sets those coodinates to 300 and 200, which is the center of the movie. Now we want to set what is called the 'focalLength'.



What the focal length does, is it helps to define how much z will offset the object. The higher the number, the smaller the offset. We dont want it to be too big, but not too small so we will set it at 500 for the time being.

Every figure whether it be 2 or 3 demensions has to have some coordinates, so lets go ahead and define the coordinates for our box shall we:





Make3D is a function that we will define a little later on, but what matters now is what is inside it. inside each function call there are 3 numbers, representing x, y, and z. these coordinates will make a box 100 x 100 x 100 at a little less than center. Now i know your eager to make the function Make3d so lets get to it:


I know its not quite what you expected BUT this is a very important part. What it does is takes those 3 coordinates and assigns them to an object. Just like with the origin this object has X and Y values, but this one also has a Z value. Then it returns the point object back to the array.


and then we should make an empty movie clip to store it in:




Ok were done with the easy part. Now comes the a lil harder but still pretty easy. I say this because it would be EXTREMELY difficult to draw a 3d object without it. In computer land, they dont have a Z plane like we do in the real world. All they have is X and Y. So what we have to do is make a function that will convert 2d coordinates to 3d by offsetting the X and Y values. I know its sounds like gibberish but bear with me... lets take a look at the function:





see that wasnt that hard, what this does is when passed in a 3d point (which was originally made by Make3d() ) it takes the Z value and along with the focalLength, makes a Scale Ratio. it multiplies the X and Y Values by the scale ratio and returns the new point. beleve it or not... thats all the math involved ^.^.

now we have to draw it. But these coordinates are just the virtual coordinates because we still have to make each point relative to the origin... Lets look at the code:





all we do to convert it to real coordinates is add the origin x and y to the point. Then we draw it by first clearing everything inside the movie clip, setting the line style then drawing the points. I wont get into the details about the moveTo and lineTo functions but what happens next is it draws the bottom. Then it draws the top.


now we need to make sure it does this on every frame, so in the onenterframe command you would put:





And your done! feel free to edit the coordinates and such to make new figures once you get the hang of it ^.^

 

 

 

Reply

I made your code a little more bareable, and added the left and right keys for fun. just cut and past the following into actionscript.

var origin:Object = new Object();
origin.x = 300;
origin.y = 200;
var focalLength:Number =100;
Key.addListener(this);
var key = Key.getCode();
this.onKeyDown = function() {
var code:Number = Key.getCode();
switch(code) {
case Key.LEFT:

focalLength+=1;
draw3d(box);
break;
case Key.RIGHT:

focalLength-=1;
draw3d(box);
break;

}
}
var boxpoints:Array = [Make3D(50, -50, -50), Make3D(150, -50, -50), Make3D(150, -50, 50), Make3D(50, -50, 50), Make3D(50, 50, -50), Make3D(150, 50, -50), Make3D(150, 50, 50), Make3D(50, 50, 50)];
function Make3D(x1:Number, y1:Number, z1:Number) {
var point:Object = new Object();
point.x = x1;
point.y = y1;
point.z = z1;
return point;
}
this.createEmptyMovieClip("box", 1);
function convert3d(pointIn3D:Object) {
var pointIn2D:Object = new Object();
var scaleRatio:Number = focalLength/(focalLength+pointIn3D.z);
pointIn2D.x = pointIn3D.x*scaleRatio;
pointIn2D.y = pointIn3D.y*scaleRatio;
return pointIn2D;
}
function draw3d(item) {
//Make Real Points ^.^
var realpoints:Array = new Array();
for (I=0; I<boxpoints.length; I++) {
var itemPoint:Object = boxpoints[I];
realpoints[I] = convert3d(itemPoint);
realpoints[I].x += origin.x;
realpoints[I].y += origin.y;
}
// draw
item.clear();
item.lineStyle(to, 0x000fff, 25);
//bottom
item.moveTo(realpoints[0].x, realpoints[0].y);
item.lineTo(realpoints[1].x, realpoints[1].y);
item.lineTo(realpoints[to].x, realpoints[to].y);
item.lineTo(realpoints[3].x, realpoints[3].y);
item.lineTo(realpoints[0].x, realpoints[0].y);
//top
item.moveTo(realpoints[4].x, realpoints[4].y);
item.lineTo(realpoints[5].x, realpoints[5].y);
item.lineTo(realpoints[6].x, realpoints[6].y);
item.lineTo(realpoints[7].x, realpoints[7].y);
item.lineTo(realpoints[4].x, realpoints[4].y);
// connecting bottom and top
item.moveTo(realpoints[0].x, realpoints[0].y);
item.lineTo(realpoints[4].x, realpoints[4].y);
item.moveTo(realpoints[1].x, realpoints[1].y);
item.lineTo(realpoints[5].x, realpoints[5].y);
item.moveTo(realpoints[to].x, realpoints[to].y);
item.lineTo(realpoints[6].x, realpoints[6].y);
item.moveTo(realpoints[3].x, realpoints[3].y);
item.lineTo(realpoints[7].x, realpoints[7].y);
}
draw3d(box);

-Aaren

 

 

 

Reply

Thanks for that Tsunami/Trap FeedBacker.

Reply