Scripting 3D in Flash
      by senocular

Triangular Hourglass and Spaceship
Two pyramids here are put together to create a very angular looking hourglass. The hourglass itself represents one shape, though for it to be properly drawn, its been divided into two smaller shapes - two pyramids. The idea is to keep those simple shapes related properly to each other as to not allow any unusual overlapping.

[ rendered hourglass shape of two pyramids ]

 

Steps to Create Animation (partial)

  1. The process in making this happen is actually quite simple. There's basically nothing new. Each movieclip for each pyramid is simply treated as faces of a divided shape. In fact, its the same concept - a complex shape divided into smaller ones, only here, instead of dividing the shape into single faces, it's just divided into 2 simpler shapes. Given the layout of this hourglass, though, we won't even have to get an average z depth for each pyramid since any one of the outside points will suffice. This won't always be the case - this example is just, luckily, set up for that to be applicable. Here's what the setup looks like:

 

Complications Never Cease
That was a relatively straight-forward example of simple shape swapping to overcome the overlapping issue. It isn't always as easy though. Consider the following example of a long shape and its relation to two other shapes. in a 3D space.

[ complicated positioning ]

Given a straight-on view of the shapes, the appropriate overlapping for each polygon is not directly proportional to their relation to the screen. After all, the middle triangle is long and actually is both closer and further away than the other two smaller triangles. Since two of the three points of that triangle are also far back in the space, using an average of those points may still not appropriately represent a correct position of depth for that triangle in relation to the others. Instead, what will be needed is an extra point - one that won't be used in drawing, to represent the position of that shape in regards to the others.

WARNING! Using Extraneous Points for Depth Calculations
This process won't always work. It depends on the design of the shapes and how well they can interact with each other in the given space. You might find yourself in a position where no matter how you look at it, there may be no easy way to correctly solve for overlapping, at which case a redesign is in order.

Complex Spaceship
This is a slightly more advanced application of 3D in Flash using a few tricks mentioned earlier. Though apparently one shape, it's really broken down into four simple shapes (not counting the windshield which accounts for another two). To get past some depth issues, it makes four new points (visible in holding down the spacebar) for controlling depth relations of those clips.

[ rotating spaceship ]


It's Not Over!
This is not the end of the road for all and everything there is 3D. There are many methods of implementation and other forms of camera control (especially) which you can play with given the proper background in Linear algebra with the use of matrix methods etc. - those very things which were avoided here to avoid complexity and confusion. This tutorial was just meant as a kick-starter for 3D for beginners and, for most purposes, all that is really needed when it comes down to the use of 3D in Flash. A lot can be done with the knowledge provided here, but there's always more to know and always more which can potentially be done with that which is currently unknown.

Download Source Files

 

Senocular

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.