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!

Indulge

Maybe it will be easier to use 3D rotation to bring the bottom part closer to the viewer? Not sure if the 3D rotate tool comes with an AS3 equivalent, but if not you could try implementing a basic 3D engine. – Rarely

What kind of constraints do you want to be able to control, that is are you concerned with being able to explicitly defined the width of the bottom part of the trapezoid. If not as Marty suggests you should be able to just use rotationX help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/… otherwise I think using a 3DMatrix would work help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/… translate rotate around X translate then tempBitmap.transform.matrix3D = your3DMatrix. – Toft

If you're concerned with tight control of any of the constraints on the size of the Bitmap that need to be more exact rather than eyeballed this will probably require a bit more math. – Toft

This question has been asked time and time again. #773322 – Pallid

Those are great, but none of them explain how to use a 4x4 matrix. All research I've found have resulted in how to use 3x3 matrices, which do not have the skewing functionality I'm looking for. – Indulge

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.

Lithia

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.

Erethism