Considering the Flash 10 3D API

I'm back from a much needed vacation with a new lease on life.

Currently, I am looking into a 3D treatment for a UI in production. Where 3D meets Flash, there are plenty of established third-party 3D engines available from the open source community. To name a few:

Sandy 3d
Five3d
Papervision 3d
Unity 3d
and others...

With the advent of FP 10, Adobe now has their own, not quite 3d option.

2.5D

The Flash 10 3d api is known as a 2.5d option, since it involves perceptual transformations in a 2d environment rather than a bona fide x,y,z coordinate space. Aptly enough, it is also referred to as "Postcards in Space". It is fine for menus and presentations such as the one I'm looking into, where the scope of motion is limited to fixed options.

Planning it out

Putting together a 3d UI adds complexity to an already complex process. Thus it is necessary to break the process down into manageable steps. Here are the general guidelines I am following:

• Bitmapped planar polygons
• in a 2d mesh
• in a display object container
• perspective positioned relative to mouse position.
  

With this in mind, I can follow a process of assembly from top-down or bottom-up. Let's look at top-down.

1. Create xml-driven coordinate system to hold masked bitmaps as a 2d display object
2. Add each of these 2d display objects as a plane of a 3d cube
3. Render cube by mouse coordinates
   

or bottom-up

1. create 3d cube
2. wire up cube to mouse interaction
3. add complex content to faces of cube

In this case, I already have a sprite object built for top-down step 1, aka bottom-up step 3. I can scratch that off the to-do list. The question remains, how well would a proposed cube face handle a complex sprite?

First of all, there are different ways to present 3d objects in Flash 10. There is the use of a display object, with its properties of

• rotation x, y and z
• scale x, y and z

Another way is to use the newly-introduced vector data type to add a series of points to a graphics class, thus to draw polygons using a series of point data.

• beginShaderFill()
• drawGraphicsData()
• drawPath()
• drawTriangles()
• lineBitmapStyle()
• lineShaderStyle()

The latter method allows for precise polygon mapping with contour details intact. Some startling geometry can be plotted with the graphics API of Flash 10. Vector data and the graphics API is expertly detailed by senocular in his Flash 10 API primer.

Since my UI is effectively a cube with complex objects inside it, the former method will be the best for this effort. Incidentally, have a look at Lee Brimelow's recent tutorial on a Flash 10 API 3d image carousel. It's a good basic intro to the technique. Plus, it mentions a critical point of the implementation, the need to address z sorting. Did somebody say quaternion?

So, containers can use x,y and z positioning data. Furthermore, they may contain nested containers. Moving forward is now possible.