Faces and Depths
We'll step it up from the pyramid here, using
a cube instead. Each face of the cube will act
as a button and even change color onRollOver!
[
drawn cube with buttons for sides ]
This cube, though the faces are separated, will
take advantage of the isVisibleBetween function
to determine visibility and not use swapDepths
on the clips used in making the faces. A reason
for that is that since we are dealing with button
actions in this example, if an action wasn't applied
to each face of the cube, then hidden, still drawn
faces beneath those which are visible could still
be activated when pressed if the face covering
it wasn't itself a button.
Steps to Create Animation (partial)
- A
new function will be defined for drawing a face
for the cube. Since all faces are the same,
all based on 4 points in a similar manner, a
function to handle each face can greatly reduce
the redundancy in the onEnterFrame function.
This function will check for the visibility
of the face and draw the face (if visible) based
on a set color (col) value defined in the face
movieclip which changes based on an onRollOver
event. This function is given to each face and
kind of acts as the display function which was
used in earlier examples. Though each face here
has more than three points, the isVisibleBetween
function can still work fine just using three
of the four points. If you think about a triangle
made by the first three points, if drawn along
with the 4 point face, it will be visible whenever
the 4 point face is and invisible when the 4
point face is not. So just those first three
points can be used to determine the visibility
of the entire face - and this is for any flat
face no matter how many points are used to make
it up.
- Following
that, you define the other functions used in
setting up the 3D, create the points array and
then get to the point where you create each
face's movieclip. These, as before, will just
be empty movieclips but, because they are special
movieclips with button actions, those actions
will need to be included on each as they are
made. This example uses a color change on rollover
(and dragover) with a color restore on rollout
(and drag out) and displays the movieclip's
name in a text box when pressed. Functions for
those actions can be defined and added to each
face when created (in this case, in a loop).
- Now
the onEnterFrame function can be defined. Given
the drawFilledSquare function (assigned to draw
in each of the faces) this function is quite
simple. Just rotate based on mouse and draw
each face. The draw function for each will determine
visibility and all interaction was added to
each face movieclip on its creation.
 |
SUGGESTION:
Faces Aren't the Only Things That Can be Interactive |
Remember
that really, any movieclip can have
interaction associated with it. You
don't have to assign multiple actions
to all the faces of a simple shape if
that entire shape is to have only one
action. Just give that action to a movieclip
containing the whole shape itself. |
|
Complications in Depths
Backface culling is only total solution
your overlapping problems some of the time. Well
maybe most of the time if you keep things simple.
This technique only works absolutely on regular
shapes you want to rotate, not the more irregular
ones. With a pyramid or a cube, for example, if
any faces are overlapping whatsoever, one of those
faces will have to be visible and the other will
have to be invisible or hidden. It's just the
way those 3D shapes are designed in regards to
how their faces exist in relation to each other.
For more irregular shapes though, or where you
are in a situation to have more than one shape,
other methods of drawing or depth determination
will be needed to make sure your faces overlap
correctly. In some instances, there will be nothing
you can do in Flash, nothing within reason that
is, which can be very limiting. . It's up to you
to plan wisely and make sure whatever shape you
have will be able to be handled properly within
the limitations of Flash and 3D.
Another limitation aside from the complications
in irregular objects is polygon intersection.
Flash has no way of calculating how faces should
be drawn if they intersect each other. In fact,
it still doesn't know 3D outside of what you've
taught it. Because of that, for an intersection
to be properly displayed, you would have to teach
that to Flash too. That would require too much
effort and be too processor intensive to even
worry about. So don't even try.
Despite the futility of polygon intersection,
not all is totally lost on the idea of irregular
shapes, though. You have a couple of solutions
here. They revolve around dividing your shape
that is to be displayed to be contained and drawn
in multiple movieclips and properly arranging
those movieclips in relation to each other, much
in the way of the division of a shape to single
faces.
As seen with the solid pyramids example, one
pyramid used separate movieclips for each of its
faces and used swapDepths to make sure that each
face was placed at a depth representing its proximity
to the camera therefore hiding those behind it.
Despite the irregularity of a shape, keeping each
face at its own respective depth would order each
face correctly so that no unusual overlapping
would occur. This is an option that would most
certainly seem to work for most irregular shapes.
And it can, but not always. Besides, depending
on the number of faces in your shape, you could
be dealing with a lot of un-necessary movieclips.
One thing we can work with though, to ease the
pain of having a movieclip for each face, is that
"regular" shapes, or at least shapes
which have faces that have no possibility of overlapping
each other, can pretty much consolidated into
one movieclip. Then we can treat that one simple
shape of many faces as a single swappable entity
in 3D space - swapping, not each individual face,
but rather, only the simple shapes that may make
up a more complex or irregular shape.