Question of the Week

Introduction to 3D using AS3 - Page 1
by kirupa  |  15 March 2009

Flash CS4 and its runtime counterpart Flash Player 10 introduce support for taking two-dimensional elements and having them go crazy in a three dimensional world. If you've heard your fellow Flash friends throw around words such as perspective transform, 2.5D, and 3D projection, chances are they are talking about this same support.

The following is an example of a perspective transform (or 2.5D, or 3D projection) applied to a series of squares:

[ move your mouse around to see the design swivel and turn ]

In this short article, I will describe how to programmatically manipulate an element in 3D space just similar to what you see in the example above. While what I am describing now seems complicated and scary, it is actually very simple once you understand the basics of how perspective transforms in Flash work. With that said, let's start by first looking at how the three dimensions in Flash are represented.

There are Three of Them!
The three common dimensions are represented by x, y, and z. You are probably most familiar with the x and y dimensions that you've had in Flash from the very beginning:

With Flash Player 10 and Flash CS4, you still have the ability to display and create two dimensional content. What you now also have is the ability to take your two dimensional content and manipulate it in a three dimensional world with the introduction of the z axis:

Forget for a minute everything you know or may have heard about the z axis. Think of it as just another line on which you can place your content on. You've already seen what happens when you set your x and y values. What happens when you set the z value on an element? Let's look at a few examples.

First, take a look at the following diagram for what happens when your z value is decreased:

Your shape seems to get larger. When your z value increases, the exact opposite effect happens where your shape seems to get smaller:

The reason is that, the z axis is often said to represent depth. Imagine you are swimming in the water, and how deep you are diving in the water is representing by your z value. If you are just floating around in the water, the equivalent of your default depth, your z value will be 0. As you start diving deeper, your z value increases. For someone looking at you from the surface, the deeper you go, the smaller you start to seem. The closer to the surface you get, the larger you seem with the z value getting smaller to represent the shallowness of your drive.

In all of these examples, I've skewed the x, y, and z axes a bit so that you can get a better feel for the relationship among the three axes. Realistically, by default, you will always see the x and y axis in their familiar north/south and east/west orientations. The z axis is perpendicular to your computer screen, so it's orientation is almost like an arrow that is shooting straight at you:

In most representations of 3d, the z axis is often designated as a hollow circle (as shown in the above image) or a circle with an x inside it. This is only important if you are designating direction. A hollow circle means the z axis is coming towards similar to an arrowhead. The hollow circle with an x means the z axis is going away from you - kind of the like the four feathers that make up the tail of an arrow that is moving away from you. Aren't you glad you know that?

In the next page, we'll go beyond the concepts and look at the code that will allow you to manipulate your content in 3d space.

Onwards to the next page!

 1 | 2