Static View
with 3D Wire Frame Boxes
We can take things a step further
and broaden the capabilities of this
technique of 3D. With this example,
we have something very similar to
example 1, only instead of scaled
movieclips, theoretical points in
the 3D space are moved and then Flash's
drawing API is used to dynamically
draw lines between those points to
give the impression that there is
a tall wire frame 3D box moving in
the space!
[
tall 3d rendered wire frame box ]
This example is very similar to example
1, only, instead of using figure movieclips,
Flash's drawing API is used to dynamically
connect-the-dots, if you will, to
give the impression of a wire frame
box being moved around in 3D! Because
of this, very little has changed.
Steps to Create Animation
The
only imagery here is the grid to
serve as a reference point for the
ground. It can be drawn easily and
placed near the bottom of the screen
without too much precision - it
can always be adjusted later to
look better if necessary.
Start
the code off defining the origin
and focalLength variables
Next
a new function will be defined.
What this function does is makes
a new Object and assigns that object
x, y and z values based on the x,
y and z passed in as arguments with
the function call. That object is
then returned with those new values
within. What this object represents
is a point in 3D space. The reason
an Object is used is because we
no longer have movieclips to assign
the x, y and z values to. This example
draws lines not between actual movieclips,
but rather, just theorized points
in space. Those points are kept
in objects created by this function
which will be called MakeA3DPoint.
This function really only serves
to make our lives easier in what
lies ahead. It's not technically
necessary as a new object could
be manually defined every time we
needed to make one. This just lets
us make a new object with three
properties quickly and easily with
one function call.
Given
the circumstance of using theoretical
points instead of movieclips, a
slightly different approach in calculation
will be taken. This will revolve
around keeping the points in an
array and for each one of those
points during a frame, converting
them from the 3D points they represent
into 2D points as they would appear
on the screen. Then, lines will
be drawn between those 2D points
to make the final box. Changing
those points into 2D points can
be done in a function. Basically
all this function needs to do is
take the 3D point and make a new
2D point based on x and y positioning
from a scale ratio determined from
the z value and the focalLenth.
This function can be aptly named
ConvertPointIn3DToPointIn2D. It
will take a 3D point as an argument
and return a 2D representative of
the 3D point as it would exist on
the screen based on the focalLength.
Now
the actual points can be defined
- where they exist in 3D space.
Their position would need to reflect
the shape of the box being made
as each point represents a corner
from which lines are drawn between.
This is where the MakeA3DPoint function
comes in handy. It allows us to
easily define 3D points within an
array that will be used to hold
them. The order of this array will
be important for you to know in
able to correctly reference each
point when drawing the lines, but
what that order is, is up to you.
Next
we'll create a new empty clip to
hold our box drawing as well as
define some extra variables for
this box. Those variables are dir
and speed for movement of the box
in the space as it moves side to
side and back and forth.
All
that remains is setting up the function
to run it all. This function will
serve three purposes. First, it
will go through all the points in
the pointsArray and move them around
in the 3D space to give the movement
in the movie. Secondly, after moving
each point, it will use ConvertPointIn3DToPointIn2D
to get a 2D point out of that 3D
position. Then, finally, when all
points have been moved and converted
to 2D, the function will draw the
lines necessary to draw out the
tall box that will be moved around
on the screen.
Because we're dealing with point
objects here, and not movieclips,
these actions will happen all in
one enterFrame. A for loop will
then be used to cycle through each
point to move and convert it as
opposed to each having its own onEnterFrame
event as was the case with example
1. This method of looping is generally
favorable over the onEnterFrame
approach and will be used further
in future examples here.
The very end part of this function
is the drawing of the lines to each
point in the new 2D points array
created with the conversion of ConvertPointIn3DToPointIn2D.
This where its important to know
where each point is in the array
since you use the index of the array
in determining which points you
are moving and lining to. Here,
the top is drawn followed by the
bottom - each as a single square.
Then the 4 corners of those squares
are connected with the remaining
lines needed to complete the box.
This function will be set as the
onEnterFrame of the box movieclip
setting up the actions of the movie.
SUGGESTION:
Pre-plan and Plot
A
simple box isn't that
difficult to plot out
in your head. You basically
have a 2 4-point squares,
one with the same points,
just with an increased
y value. When you start
getting into more complicated
shapes though, since
you are modeling
these manually and not
in some GUI, it's a
good idea to draw out
the shape and its points
on a piece of paper,
preferably graph paper.
This will make using
those points much easier
on you. If you want,
you can even map it
out in Flash if you
feel comfortable enough
doing so.
SUGGESTION:
Conquering the Origin Offset
In
these past two examples,
an origin offset was
used to place the 3D
scene in the middle
of the view. After all,
Flash's 2D origin is
in the upper left of
the screen (point 0,0).
However, in Example
2, an empty movieclip
was used to hold the
lines of drawn box.
Now, instead of adding
the origin to the location
of a point every time
it moves, you could
actually, instead, just
move the entire empty
movieclip itself to
the center of the screen
in the main timeline.
Then, everything would
still be based on 0,
but no offset would
be needed since the
entire movieclip itself
is already centered
in view.
The Concept of a Camera In the two previous examples,
you have a constant static view of
3D shapes moving in an apparent 3D
space. Though the shapes are able
to move about and reposition themselves,
the view itself, or camera,
is not.
When dealing with 3D, a view is often
referred to as a camera or camera
view. A camera represents a theoretical
location in a 3D space that acts as
the point of view of that space. As
with the previous examples, the camera
there didn't move, or really do anything
at all, so there was really no need
to even acknowledge its existence.
That won't always be the case though,
as you'll soon find out.
This idea of the camera is to allow
the view to change in respect to everything
else in your 3D world. For the most
part, all a camera really is, is a
set of 3D offset values for your 3D
shapes. Imagine yourself standing
somewhere remote like in the middle
of Utah's
Bonneville Salt Flats (U.S.A.)
- nothing but a huge flat desert of
salt. Now imagine my friend Joe Q.
Public is standing slightly off in
the distance and he begins walking
to you.
In doing so, he gets closer and closer
to you until you finally meet. Now
lets reverse the situation and say,
instead, that you begin walking to
him. As you walk, the same thing is
happening. He is getting closer to
you. The only difference is that you're
the one doing the walking here; your
feet are moving, not his. Since you
see what you see, you represent the
camera in the 3D space. With your
camera moving towards Joe, you get
the same effect as if Joe was moving
towards you.
[
moving camera vs moving a figure ]
So, really, instead of the camera
actually ever moving, it could, and
technically does, just offset everything
else in relation to it. Cameras don't
move. They move everything else to
adjust for what would happen if they
did.
Scripting
3D in Flash
Prev Page
