A skew is a type of geometric distortion. When a shape is skewed along the x axis each point is shifted along the xaxis by a set amount of divisions for each divsion that point is along the y axis. For example if a point (3,2) is skewd by 3 along the x axis three units are added to the x value of the point for every unit of the y value so the point becomes (3+6,2) or (9,2).

A simple matrix operator can be constructed to calculate the coordinates of a point undergoing a skew of Skx in the direction of the x axis.


A similar operator can be constructed to skew a point or set of points in the direction of the y axis:


Coordinates can be skewed both horizontally and vertically at the same time.


for each coordinate a value proprtional the the y coordinate is added to the x coordiante and a value propertional to the x value is added to the y coordainte. This creates a vertical and horizontal skew.

The Transformation Matrix
In the transformation matrix in flash skew is controlled by b and c with b representing the value of sky and c the value of skx. If b and c equal zero nothing is added to the x and y coordinates and so there is no skew effect.



To learn more about matrices in flash see the [Matrices Knowledgebase].

Matrix Skew Using Actionscript (movie clips)

Modified Tranformation matrix I (simple horizontal skew tween)
In this example 5 is added to the horizontal skew of the movie clip "my_mc" each time the movie enters a new frame creating a simple skew tween using the transformation matrix.

import flash.geom.Matrix;
var xskew:Number = 0;

onEnterFrame = function(){
xskew +=5;

my_mc.transform.matrix = new Matrix(1,xskew,0,0,1,0,0,0,1);
}

Modified Transformation matrix II (mouse coordiantes)
In this example the distance of the mouse position from the center of the stage is used to dynamically set the vertical and horizontal skew of the movie clip "my_car". In addition to this the movie clip is repositioned to the center of the stage using the translation properties of the transformation matrix.

import flash.geom.Matrix;

onEnterFrame = function(){
var xskew:Number = (_xmouse-Stage.width/2)*0.01;
var yskew:Number = (_ymouse-Stage.width/2)*0.01;

my_car_mc.transform.matrix = new Matrix(1,yskew,xskew,1,Stage.width/2,Stage.height/2);
}

Note: In actionscript 2.0 there is no "method" available for skew. However a custom method can be created using scale and rotation matrices concatenated into a single custom transformation matrix. To learn more about matrix concantenation see [ Matrix Concantination Knowledgebase].

Matrix Skew Using Actionscript (points)

var xskew = 2;
var yskew = 0.5;

my_point_matrix = new Array (20,150, 80,60, 95,130, 220,110);
xy_skew_matrix = new Array (1,yskew, xskew,1);

matrix_mult (my_point_matrix, xy_skew_matrix);


matrix_mult (matrixA:Array, martrixB:Array):Array {
var result_coords:Array = new Array();

result_coords[0] = matrixA[0]*martrixB[0] + matrixA[1]*martrixB[3];
result_coords[1] = matrixA[0]*martrixB[1] + matrixA[1]*martrixB[4];

result_coords[2] = matrixA[2]*martrixB[0] + matrixA[3]*martrixB[3];
result_coords[3] = matrixA[2]*martrixB[1] + matrixA[3]*martrixB[4];

result_coords[4] = matrixA[4]*martrixB[0] + matrixA[5]*martrixB[3];
result_coords[5] = matrixA[4]*martrixB[1] + matrixA[5]*martrixB[4];

result_coords[6] = matrixA[6]*martrixB[0] + matrixA[7]*martrixB[3];
result_coords[7] = matrixA[6]*martrixB[1] + matrixA[7]*martrixB[4];

return result_coords;
}

In this example I have vertically and horizontally skewed the coordinates of four 2d points. The actionscript can easily be extended to include moore 2d points by increasing the length of array "point_array" and editing the function "matri_mult" to multiple and return the additional points.

To learn how to skew 3d points in 3 dimensions see: [3D Skew Matrix Knowledgebase].