perspective in Flash

Question

I have an 2D image that I want to draw in true 3D, and spin around its centre.

I'm using Actionscript 3 code (actually Haxe, no IDE), and I'm struggling to discover the values by experimentation.

I have a DisplayObject. If I use rotateZ = 45, the object rotates around it's top-left, rather than centre; more complicated Display.transform.matrix things like rotate(Math.PI/4) work the same way. How can I rotate on the Z axis around the DisplayObject's XY centre?

And how do I then get the perspective to work? Is the perspective relative to the parent, or the object after rotation?

What rotation and position do I use on the DisplayObject instance? What are the values for the perspective transform, and on what object do I apply them?

Answer 1

A very common approach is to have a pivot DisplayObjectContainer, add your actual plane into that container, and offset it from the center. Then you actually rotate the container.

var pivot : DisplayObjectContainer;

// plane is a display object (e.g. Sprite) that has been created previuosly
// and contains your 2D image.
plane.x = -plane.width/2;
plane.y = -plane.height/2;
pivot.addChild(plane);

pivot.rotationY = 45;

Here, the plane is put inside the container named pivot, and offset by half it's width and height. This means that the center of the plane display object will be aligned with the registration point (origin) of the container. Rotating the container (pivot) around the origin now will rotate all of it's children, including the plane, around that same point.

This is usually easier to work with than matrix transformations. Especially as 3D matrices can easily get hard to follow, unless you're readily familiar with the math.

Besides, just modifying the plane.transform.matrix3D matrix object will not affect the display object, until you reset the matrix. This can be very tedious if you're using a tween engine for example, where you might need to have an UPDATE event handler that resets the matrix each time, like so:

plane.transform.matrix3D = myModifiedMatrix3D;

Using the pivot approach, you can simply tween the rotationX/Y/Z properties.