Scripting 3D in Flash: Shapes and Fills

by senocular   | filed under 3D in Flash

Wire frame, though cool and very 3D in effect, has its limitations. It is just a Wire frame and can only go so far for you depending on what you want to do or make. A way to really add a 3 dimensional feel to your shape, whatever it is, is to make it have solid sides and not just lines outlining them. Luckily, the drawing API in Flash also allows us to create those lovely sides with fills as well as draw lines. Using these fills we can add some real plasticity to our 3D shapes. The addition of fills in the drawings is initially, and in its basics, not too difficult to include. After all, its just a matter of correctly throwing in the beginFill and endFill commands within the drawing operations. You do, however, have to be careful of fills drawing through themselves. When fills do that, they un-fill for the overlapping areas. Here's an example.

[ overlapping dynamic fills ]

This means filling a 3D object is not just a matter of surrounding the line calls with beginFill and endFill as the fills will end up overlapping each other. The shape will need to be divided and separate fills are needed for each flat area of the shape or each 3D side or face. Having separate fills for each face means no single fill will ever be in a position to overlap itself preventing that un-fill effect. Separate fills will overlap each other, but they wont make the fills dropout. Because of that, however, without adding further complications for correction, fills here will need to be semi-transparent so that all the fills can be seen and none of that overlapping will hide sides that should be seen.

Filled Pyramid

We'll start off simple making a filled pyramid. Each side, or face, is given its own fill. You can see here how the fills are transparent enough to show each other even though some may be on top of others.

[ drawn filled pyramid ]

Steps to Create Animation (partial)

1. Again, all the dirty work was created in the balloon-based cube example. Here you just need to define the pyramid and assign fills. There are 4 fills total for each of the 4 faces of the pyramid and each are set to a different color to at least somewhat separate them visually. With this kind of drawing, though, there will be some redrawing of lines not necessary in Wire frame renditions. This is because the triangle faces share the same edges, so in drawing each face, some lines will have to be re-drawn to complete the next face. It seems a little wasteful, but its needed to draw each face. Here is what the main onEnterFrame function looks like:

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

 var pts2D = Transform3DPointsTo2DPoints(pointsArray, pyramidAxisRotations);

 this.clear();
 this.lineStyle(2,0x000000,100);
 this.beginFill(0xff0000, 20);
 this.moveTo(pts2D[0].x, pts2D[0].y);
 this.lineTo(pts2D[1].x, pts2D[1].y);
 this.lineTo(pts2D[2].x, pts2D[2].y);
 this.lineTo(pts2D[0].x, pts2D[0].y);
 this.endFill();
 this.beginFill(0x800000, 60);
 this.moveTo(pts2D[0].x, pts2D[0].y);
 this.lineTo(pts2D[1].x, pts2D[1].y);
 this.lineTo(pts2D[3].x, pts2D[3].y);
 this.lineTo(pts2D[0].x, pts2D[0].y);
 this.endFill();
 this.beginFill(0x400000, 20);
 this.lineTo(pts2D[1].x, pts2D[1].y);
 this.moveTo(pts2D[2].x, pts2D[2].y);
 this.lineTo(pts2D[3].x, pts2D[3].y);
 this.lineTo(pts2D[1].x, pts2D[1].y);
 this.endFill();
 this.beginFill(0xdf0000, 20);
 this.moveTo(pts2D[2].x, pts2D[2].y);
 this.lineTo(pts2D[0].x, pts2D[0].y);
 this.lineTo(pts2D[3].x, pts2D[3].y);
 this.lineTo(pts2D[2].x, pts2D[2].y);
 this.endFill();
};
theScene.onEnterFrame = rotatePyramid; 

The following tutorials will build-upon what you learned and introduce some advanced fill techniques.

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.