Basic Ideas Behind the Code

The code in the fla files dodecahedron_1.fladodecahedron_2.fla is well-commented. Yet, the code will be easier to follow after you glance at the basic ideas explained below.

To obtain pentagonal or circular bitmaps and to rotate them in 3D, we use masking and the transform.matrix property of the Sprite class. We begin by importing twelve picSize by picSize jpegs to the Library (picSize=116 in our case) and linking them to AS3 through the Library menu item. We instantiate the bitmaps at runtime and make them children of twelve Sprites: spSide0,...,spSide11. We create a mask for each bitmap, spMask0,...,spMask11. The masks are also children of spSide0,...,spSide11. We draw a pentagon shape in each mask as follows:

(In dodecahedron_2.fla, we draw circular masks instead.) Initially, the spSide0,...,spSide11 are all at the positon (0,0). We will transform them in our renderView function.

Now we think of our dodecahedron in 3D. It has twelve sides each being a pentagon. We define all 20 vertices and 12 faces of the dodecahedron. We chose the size of the dodecahedron so the width of each face is equal to picSize. Now consider a square described on each pentagonal face as follows:

(This and the next picture are for side 0; for other sides, everything is analogous.) The picture appears in 2D but the face is really in 3D. Each vertex is a three-element array, that is, a point in 3D. We store the vertices of of each square in the arrays side0Verts,...,side11Verts. As we rotate and project each face, we also rotate and project each corresponding square. The projection of each square is a parallelogram on the 2D plane:

Now we transform spSide0,..., spSide11 onto the corresponding projection. The mask is transformed as well as a child od spSide0,..., hence the visible portion of the bitmap coincides with the projection of the polygonal face.

How to transform a square (or a rectangular) bitmap or a Sprite, say myBitmap, onto a given parallelogram? The simplest way is the following. In general, let us have a len by len Sprite or a bitmap, say myBitmap, and a parallelogram with vertices v0, v1, v2, v3:

The following code will give you the right transform matrix that transforms the bitmap onto the parallelogram.

var finMatrix:Matrix=new Matrix((v1[0]-v0[0])/len,(v1[1]-v0[1])/len,

(v3[0]-v0[0])/len,(v3[1]-v0[1])/len,0,0);

var transMatrix:Matrix=new Matrix(1,0,0,1,v0[0],v0[1])

finMatrix.concat(transMatrix);

mayBitmap.transform.matrix=finMatrix;

For a discussion of transform matrices and the Matrix class, see the tutorial: Rotating Bitmaps in 3D in Flash CS3, 3D Menu on a Cube in ActionScript 3.

Back to Advanced and Experimental              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.