Scripting 3D in Flash: Wireframe Examples Using the Drawing API

by senocular   | filed under 3D in Flash

The drawing functions in Flash was only just touched upon in the first example. Its about time we started pushing what they have to offer in terms of getting a true rendered 3D shape out of all that has been learned so far in creating a 3D scene in Flash. No attached movieclips involved here.

Same as before, only now there's a wire frame cube drawn between those rotated points from the pointsArray and no balloon movieclips are involved.

[ drawn wire frame cube ]

Steps to Create Animation (partial)

1. There's pretty much only one change in this movie from the balloon-based cube, and that's the replacement of the attached clips with the drawing methods needed to draw out the wire frame All that involves is a lengthy planned out list of moveTo and lineTo commands to correctly connect the dots in the screenPoints array in the rotateCube onEnterFrame function.

                                rotateCube = function(){
 cubeAxisRotations.y -= this._xmouse/3000;
 cubeAxisRotations.x += this._ymouse/3000;

 var screenPoints = Convert3DPointsTo2DPoints(pointsArray, cubeAxisRotations);

 this.clear();
 this.lineStyle(2,0xff0000,100);
 // top
 this.moveTo(screenPoints[0].x, screenPoints[0].y);
 this.lineTo(screenPoints[1].x, screenPoints[1].y);
 this.lineTo(screenPoints[2].x, screenPoints[2].y);
 this.lineTo(screenPoints[3].x, screenPoints[3].y);
 this.lineTo(screenPoints[0].x, screenPoints[0].y);
 // bottom
 this.moveTo(screenPoints[4].x, screenPoints[4].y);
 this.lineTo(screenPoints[5].x, screenPoints[5].y);
 this.lineTo(screenPoints[6].x, screenPoints[6].y);
 this.lineTo(screenPoints[7].x, screenPoints[7].y);
 this.lineTo(screenPoints[4].x, screenPoints[4].y);
 // connecting bottom and top
 this.moveTo(screenPoints[0].x, screenPoints[0].y);
 this.lineTo(screenPoints[4].x, screenPoints[4].y);
 this.moveTo(screenPoints[1].x, screenPoints[1].y);
 this.lineTo(screenPoints[5].x, screenPoints[5].y);
 this.moveTo(screenPoints[2].x, screenPoints[2].y);
 this.lineTo(screenPoints[6].x, screenPoints[6].y);
 this.moveTo(screenPoints[3].x, screenPoints[3].y);
 this.lineTo(screenPoints[7].x, screenPoints[7].y);
};
theScene.onEnterFrame = rotateCube;
  

2. As an added bonus, the make2DPoint function no longer needs the depth or scaleRatio properties making it much simpler to use (not that it was such a burden previously). Otherwise, everything else can remain the same.

                                make2DPoint = function(x, y){
 var point = new Object();
 point.x = x;
 point.y = y;
 return point;
};
  

Wire frame Tube

So far, in using the drawing API, we've only implemented straight lines. Would you ever have thought curves work in 3D too? Well, they do. We can use curves and approximate a circle for each axis and rotate those circles to give the impression of a curved tube. All that's changed is the pointsArray and the drawing methods used to draw out the shape.

[ drawn wire frame tube ]

There is still quite a bit more, so feel free to explore the next tutorial for more information involving shapes and fills. After all, who likes to look at wireframe objects?

That wraps up this tutorial. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums. Your support is what keeps writing like this online! 😇

This tutorial was written by senocular, also known as Trevor McCauley. He has been one of this community's most generous teachers since the early Flash days, and he is still around: find him on senocular.com and on the forums.