|
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.
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!
|
Introduction to 3D using AS3 - Page 1
