Using a 4x4 3DMatrix in AS3 to skew images

Question

I have an AS3 bitmap image that I would like to skew like so:

I would only like to skew the bottom part of the image, and leave the top part alone. Based on my research that I've done so far, it looks like I'd want to use the Matrix3D class, but I'm not quite sure how to effectively implement it.

Thanks to an answer below, this article is an excellent resource to understand the Matrix3D class with a 3x3 matrix: http://www.senocular.com/flash/tutorials/transformmatrix/ However as awesome as that tutorial is, it does not provide the capability to skew the above image. What I'm looking for is a similar tutorial on how to use a 4x4 matrix. All I'd like to know is where to put the numbers in the matrix, and I should be able to figure out everything else.

Here's some example code on what I've got so for:

var tempLoader:Loader=new Loader();
var tempBitmap:Bitmap;
var fattenTheBottom:Number;
tempLoader.load(new URLRequest("image.png"));
tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,castBitmap);
function castBitmap(e:Event):void
{
    tempLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE,castBitmap);
    tempBitmap = Bitmap(tempLoader.content);
    // Make the image into a trapezoid here using fattenTheBottom
    addChild(tempBitmap);
}

Any advice would be wonderfully appreciated!

Answer 1

If you want a quick way using Matrix3D, here is an example of the kind of values you should use:

var m3d:Matrix3D = new Matrix3D(Vector.<Number>([
    1, 0,    0,    0, 
    0, 1.15, 0.25, 0.00005,
    0, 0,    1,    0,
    0, 0,    0,    1
]));
tempBitmap.transform.matrix3D = m3d;

But soon you will notice that this approach distorts the image in ways you don't want. For example, it will horizontally squeeze your image on one side (as you want), but the contents of the image will be stretched vertically as well. Hard to explain, but once you try the above method, you will notice how the image is being vertically stretched.

The same kind of effect can be obtained by using rotationX combined with PerspectiveProjection, and scaleY.

If you want a more elegant solution, both in code and image results, try out DistortImage. The method there is not straight-forward (uses a mesh of subimages), but has great results.

Answer 2

I can only recommend you to read the best info only I ever found about this:
Understanding the Transformation Matrix

Reading this, I think, you could really understand everything about transform matrix. It's from Flash 8(AS2), but it's theoretical information will serve as well using AS3.