Introduction to 3D using AS3

by kirupa   | filed under Flash and ActionScript

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 section, we'll go beyond the concepts and look at the code that will allow you to manipulate your content in 3d space.

In the previous section, you learned what manipulating the various axes will do. Now that you have a good overview of how to think about the 3D functionality in Flash, it's about time we looked at the code.

Looking at the Code

Let's first start with something simple. To set the position of your element across all three axis, just follow your instance name with the x, y, or z property:

movieClip.x = 20;
movieClip.y = 50;
movieClip.z = 100;

The above code moves your movie clip to the 20, 50 position with a depth of 100. In other words, your movie clips moves a bit to the top-right and becomes smaller.

The other common task that you will perform is actually rotating your element across all three of the axes. That is handled by the rotationX, rotationY, and rotationZ properties.

movieClip.rotationX = 180;
movieClip.rotationY = -45;
movieClip.rotationZ = 90;

The following diagram shows you what your rotation would look like when you adjust the rotationX, rotationY, and rotationZ properties:

Rotation is a bit interesting. In my examples describing the three axes, I've stated that the z axis is perpendicular to your computer screen, and in my example of you swimming, I said that the z value is the equivalent to how deep you are diving. When you begin to rotate the x, y, and z axes, mapping between the real world and what your content actually looks like will become difficult. Just keep that in mind when you encounter code that skews the 3d representation.

That's all there is to it. Setting the above six properties that I've shown you will allow you to create some neat effects that gives your old 2D elements some 3D attention!

Things to be Aware Of

Despite the coolness of all this, there are some limitations to how much you can do in Flash without resorting to writing a lot of extra code or looking at using 3rd-party 3d libraries.

All 3D Content Gets Converted into a Bitmap

One of the drawbacks of the 3d functionality in Flash is that whatever element you are attempting to manipulate in 3D space is automatically converted from a vector into a bitmap. If you ever set any of the z, rotationX, rotationY, and rotationZ properties, Flash will rasterize the affected elements into a bitmap.

A perfect vector shape such as the four squares that I've been using throughout this tutorial looks pretty good when viewed at its default size. Once you start zooming in, notice that the classic banding/blurring associated with bitmaps are visible:

Besides the visual artifacts, as you can imagine from manipulating actual images instead of vectors, performance suffers a bit as well.

Intersections aren't Possible

When shapes move in three dimensions, interesting collisions and intersections are possible. Unfortunately, this is something that isn't possible with the functionality available today. For example, imagine you have two parallel rectangles placed near other as shown below:

If I were to rotate the blue rectangle, in the real world, it would seem like a portion of the blue rectangle's edge will go through the yellow rectangle that is directly adjacent to it. Instead, what happens is that the blue rectangle rotates without taking the yellow rectangle into account:

This looks a little weird. It is almost as if each element has its own 3d universe based on its z-order instead of coexisting in one large universe where interactions and collisions are possible.

Conclusion

I really hope this article helped you to understand conceptually how the x, y, and z axes are treated in Flash. The concepts are really the difficult part to fully wrap your head around. As you saw, the code itself is fairly straightforward. Even something like the example I showed on the first page is very easy to create, and I've provided the source file for that below:

Download Source

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇