Using 4x4 3DMatrix in AS3 to Distort Images

Question

I have an AS3 bitmap that I would distort like this:

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

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

Here is a sample code for what I have 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 appreciated!

Answer 1

If you want to use Matrix3D quickly, here is an example of the 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 the way you don't want it. For example, it will compress your image horizontally on one side (as you wish), but the content of the image will be stretched vertically . It is difficult to explain, but as soon as you try the method described above, you will notice how the image is vertically stretched.

The same effect can be obtained using rotationX in combination with PerspectiveProjection and scaleY .

If you need a more elegant solution, both in code and image, try DistortImage . The method there is not straightforward (uses a grid of subimages), but it has excellent results.

Answer 2

I can only recommend that you read the best information I have ever learned about this:
Understanding Transformation Matrix

Reading this, I think you really could understand everything about the transformation matrix. This is from Flash 8 (AS2), but theoretical information will also be used with AS3.