Tutorial details:
Written by: Leo Meyerovich
Time: 30 minutes
Difficulty Level: Advanced
Requirements: Flash MX
Topics Covered: How to create a 3D shape using ActionScript.
Assumed knowledge: Plenty.


3D Face Extrusion: the non-Swift3d spinning logo.
Your client wants a spinning logo. And itsy bitsy little random shapes floating around it. You have 3 basic options: look for a pricey program, code something, or drop the client.
Assuming you want to take the more intellectually challenging route, lets extrude a face. The basic idea is that a function takes in a face, copies it, moves it a bit, and then connects all the lines. The trick is in efficiency.
I’m going to take you into the dark world of 3d engines a bit, but most of it can be glossed over. This is all a one frame movie. Just paste the code into the first frame of your clip and done. Mod to your delight.

The plan:

  • I. 3dOM - syntax/creation of faces/objects we’ll use
  • II. Extrude - actual function to calculate new faces and points with minimum repetition.
  • III. 3D Engine - thing that is needed to work. Just plop it all into the first frame if you’re not really interested.

I. 3DOM - 3d object model. Clever huh?

A. Shapes

A 3d engine takes a point with an x, y, and z coordinate and figures out how to show that point on the screen with just an x and y coordinate. That in itself is useless, so we want to group points together in shapes to form an object. So, we have:


mass = our movieclip
shapes = an array of different shapes/faces (face being a side of 3d object)

The first property of shapes ( [whichShape] ) is the ID of a specific face on the object.
In a cube, we can have shapes[0] the top, shapes[1] the left, shapes[2] the top, etc.
A face is just a collection of points, or vertices. A triangle has 3 points, a square 4. So the second property of shapes will be the ID of a specific point on that shape. If we want the ID of the first point on the first face, all we do is write mass.shapes[0][0] (remember, arrays start on 0, not 1). The second point on the third face would be mass.shapes[2][1].

The goal of the rest of the tutorial will be to write:

extrude(mass, whichShape, 100); // where 100 would be the thickness of our desired logo.

B. Point List

A lot of faces will share a common point – the corner point of a cube connects to three faces. When telling the computer to rotate the cube, it is really told to rotate the points. In a cube, if each face had a property of 4 points, there would be 24 points to rotate every second (6 faces * 4 points per face. However, if we had a list of points else where, and each face said which one of those points it used, the computer would only rotate 8 points every second (8 points on a cube). So we need an external point list: mass.pts[whichPoint].

Each point needs to have some properties, so for the first point we’d say:

mass.pts[0] = new Object(); // only objects can have properties
p = mass.pts[0]; // don?t want to write mass.pts[0] a lot
p.x = 5; p.y = 10; p.z = 32; // p now has 3 properties, x, y, z