Scripting 3D in Flash: Faces and Depths

by senocular   | filed under 3D in Flash

We'll step it up from the pyramid here, using a cube instead. Each face of the cube will act as a button and even change color onRollOver!

[ drawn cube with buttons for sides ]

This cube, though the faces are separated, will take advantage of the isVisibleBetween function to determine visibility and not use swapDepths on the clips used in making the faces. A reason for that is that since we are dealing with button actions in this example, if an action wasn't applied to each face of the cube, then hidden, still drawn faces beneath those which are visible could still be activated when pressed if the face covering it wasn't itself a button.

Steps to Create Animation (partial)

1. A new function will be defined for drawing a face for the cube. Since all faces are the same, all based on 4 points in a similar manner, a function to handle each face can greatly reduce the redundancy in the onEnterFrame function. This function will check for the visibility of the face and draw the face (if visible) based on a set color (col) value defined in the face movieclip which changes based on an onRollOver event. This function is given to each face and kind of acts as the display function which was used in earlier examples. Though each face here has more than three points, the isVisibleBetween function can still work fine just using three of the four points. If you think about a triangle made by the first three points, if drawn along with the 4 point face, it will be visible whenever the 4 point face is and invisible when the 4 point face is not. So just those first three points can be used to determine the visibility of the entire face - and this is for any flat face no matter how many points are used to make it up.

                                drawFilledSquare = function(a,b,c,d){
 this.clear();
 this.lineStyle(2,0,100);
 if (isVisibleBetween(a,b,c)){
  this.moveTo(a.x, a.y);
  this.beginFill(this.col, 100);
  this.lineTo(b.x, b.y);
  this.lineTo(c.x, c.y);
  this.lineTo(d.x, d.y);
  this.lineTo(a.x, a.y);
  this.endFill();
 }
};
  

2. Following that, you define the other functions used in setting up the 3D, create the points array and then get to the point where you create each face's movieclip. These, as before, will just be empty movieclips but, because they are special movieclips with button actions, those actions will need to be included on each as they are made. This example uses a color change on rollover (and dragover) with a color restore on rollout (and drag out) and displays the movieclip's name in a text box when pressed. Functions for those actions can be defined and added to each face when created (in this case, in a loop).

                                rollOverFace = function(){
 this.col = 0xff0000;
};
pressFace = function(){
 display_txt.text = "You just pressed "+this._name;
};
rollOutFace = function(){
 this.col = 0xdddddd;
};
for (i=0; i<6; i++){
 emptyFace = theScene.createEmptyMovieClip("face"+i,i);
 emptyFace.col = 0xdddddd;
 emptyFace.onRollOver = emptyFace.onDragOver = rollOverFace;
 emptyFace.onRollOut = emptyFace.onDragOut = rollOutFace;
 emptyFace.onPress = pressFace;
 emptyFace.draw = drawFilledSquare;
}
  

3. Now the onEnterFrame function can be defined. Given the drawFilledSquare function (assigned to draw in each of the faces) this function is quite simple. Just rotate based on mouse and draw each face. The draw function for each will determine visibility and all interaction was added to each face movieclip on its creation.

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

 var pts2D = Transform3DPointsTo2DPoints(pointsArray, cubeAxisRotations);

 this.face0.draw(pts2D[0], pts2D[3], pts2D[2], pts2D[1]);
 this.face1.draw(pts2D[4], pts2D[5], pts2D[6], pts2D[7]);
 this.face2.draw(pts2D[0], pts2D[4], pts2D[7], pts2D[3]);
 this.face3.draw(pts2D[3], pts2D[7], pts2D[6], pts2D[2]);
 this.face4.draw(pts2D[2], pts2D[6], pts2D[5], pts2D[1]);
 this.face5.draw(pts2D[1], pts2D[5], pts2D[4], pts2D[0]);
};
theScene.onEnterFrame = rotateCube;
  

Complications in Depths

Backface culling is only total solution your overlapping problems some of the time. Well maybe most of the time if you keep things simple. This technique only works absolutely on regular shapes you want to rotate, not the more irregular ones. With a pyramid or a cube, for example, if any faces are overlapping whatsoever, one of those faces will have to be visible and the other will have to be invisible or hidden. It's just the way those 3D shapes are designed in regards to how their faces exist in relation to each other. For more irregular shapes though, or where you are in a situation to have more than one shape, other methods of drawing or depth determination will be needed to make sure your faces overlap correctly. In some instances, there will be nothing you can do in Flash, nothing within reason that is, which can be very limiting. . It's up to you to plan wisely and make sure whatever shape you have will be able to be handled properly within the limitations of Flash and 3D.

Another limitation aside from the complications in irregular objects is polygon intersection. Flash has no way of calculating how faces should be drawn if they intersect each other. In fact, it still doesn't know 3D outside of what you've taught it. Because of that, for an intersection to be properly displayed, you would have to teach that to Flash too. That would require too much effort and be too processor intensive to even worry about. So don't even try.

Despite the futility of polygon intersection, not all is totally lost on the idea of irregular shapes, though. You have a couple of solutions here. They revolve around dividing your shape that is to be displayed to be contained and drawn in multiple movieclips and properly arranging those movieclips in relation to each other, much in the way of the division of a shape to single faces.

As seen with the solid pyramids example, one pyramid used separate movieclips for each of its faces and used swapDepths to make sure that each face was placed at a depth representing its proximity to the camera therefore hiding those behind it. Despite the irregularity of a shape, keeping each face at its own respective depth would order each face correctly so that no unusual overlapping would occur. This is an option that would most certainly seem to work for most irregular shapes. And it can, but not always. Besides, depending on the number of faces in your shape, you could be dealing with a lot of un-necessary movieclips.

One thing we can work with though, to ease the pain of having a movieclip for each face, is that "regular" shapes, or at least shapes which have faces that have no possibility of overlapping each other, can pretty much consolidated into one movieclip. Then we can treat that one simple shape of many faces as a single swappable entity in 3D space - swapping, not each individual face, but rather, only the simple shapes that may make up a more complex or irregular shape.

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.