Packageflash.geom
Classpublic class Matrix
InheritanceMatrix Inheritance Object

The Matrix class represents a transformation matrix that determines how to map points from one coordinate space to another. You can perform various graphical transformations on a display object by setting the properties of a Matrix object, applying that Matrix object to the matrix property of a Transform object, and then applying that Transform object as the transform property of the display object. These transformation functions include translation (x and y repositioning), rotation, scaling, and skewing.

Together these types of transformations are known as affine transformations. Affine transformations preserve the straightness of lines while transforming, so that parallel lines stay parallel.

To apply a transformation matrix to a display object, you create a flash.geom.Transform object, set its matrix property to the transformation matrix, and then set the transform property of the display object to the Transform object. Matrix objects are also used as parameters of some methods, such as the following:

A transformation matrix object is a 3 x 3 matrix with the following contents:

Matrix class properties in matrix notation

In traditional transformation matrixes, the u, v, and w properties provide extra capabilities. The Matrix class can only operate in two-dimensional space so it always assumes that the property values u and v are 0.0, and that the property value w is 1.0. The effective values of the matrix are as follows:

Matrix class properties in matrix notation showing assumed values for u, v, and w

You can get and set the values of all six of the other properties in a Matrix object: a, b, c, d, tx, and ty.

The Matrix class supports the four major types of transformations: translation, scaling, rotation, and skewing. You can set three of these transformations using specialized methods, as described in the following table:

Transformation Method Matrix values Display result Description
Translation (displacement) translate(tx, ty) Matrix notation of translate method parameters Illustration of translate method effects Moves the image tx pixels to the right and ty pixels down.
Scaling scale(sx, sy) Matrix notation of scale method parameters Illustration of scale method effects Resizes the image, multiplying the location of each pixel by sx on the x axis and sy on the y axis.
Rotation rotate(q) Matrix notation of rotate method properties Illustration of rotate method effects Rotates the image by an angle q, which is measured in radians.
Skewing or shearing None; must set the properties b and c. Matrix notation of skew function properties Illustration of skew function effects Progressively slides the image in a direction parallel to the x or y axis. The value skx acts as a multiplier controlling the sliding distance along the x axis; sky controls the sliding distance along the y axis.

Each transformation function alters the current matrix properties so that you can effectively combine multiple transformations. To do this, you call more than one transformation function before applying the matrix to its display object target (by using the transform property of that display object).

Use the new Matrix() constructor to create a Matrix object before you can call the methods of the Matrix object.

View the examples.

See also
flash.display.DisplayObject.transform, flash.geom.Transform, flash.display.BitmapData.draw(), flash.display.Graphics.beginBitmapFill(), flash.display.Graphics.beginGradientFill(), flash.display.Graphics.lineGradientStyle()


Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties
 PropertyDefined by
  a : Number
The value in the first row and first column of the Matrix object, which affects the positioning of pixels along the x axis when scaling or rotating an image.
Matrix
  b : Number
The value in the first row and second column of the Matrix object, which affects the positioning of pixels along the y axis when rotating or skewing an image.
Matrix
  c : Number
The value in the second row and first column of the Matrix object, which affects the positioning of pixels along the x axis when rotating or skewing an image.
Matrix
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
  d : Number
The value in the second row and second column of the Matrix object, which affects the positioning of pixels along the y axis when scaling or rotating an image.
Matrix
 Inheritedprototype : Object
[static] A reference to the prototype object of a class or function object.
Object
  tx : Number
The distance by which to translate each point along the x axis.
Matrix
  ty : Number
The distance by which to translate each point along the y axis.
Matrix
Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods
 FunctionDefined by
  
Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0)
Creates a new Matrix object with the specified parameters.
Matrix
  
Returns a new Matrix object that is a clone of this matrix, with an exact copy of the contained object.
Matrix
  
Concatenates a matrix with the current matrix, effectively combining the geometric effects of the two.
Matrix
  
createBox(scaleX:Number, scaleY:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
Includes parameters for scaling, rotation, and translation.
Matrix
  
createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
Creates the specific style of matrix expected by the beginGradientFill() and lineGradientStyle() methods of the Graphics class.
Matrix
  
Given a point in the pretransform coordinate space, returns the coordinates of that point after the transformation occurs.
Matrix
 Inherited
Indicates whether an object has a specified property defined.
Object
  
Sets each matrix property to a value that causes a null transformation.
Matrix
  
Performs the opposite transformation of the original matrix.
Matrix
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
  
rotate(angle:Number):void
Applies a rotation transformation to the Matrix object.
Matrix
  
Applies a scaling transformation to the matrix.
Matrix
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
  
Returns a text value listing the properties of the Matrix object.
Matrix
  
Returns the result of applying the geometric transformation represented by the Matrix object to the specified point.
Matrix
  
Translates the matrix along the x and y axes, as specified by the dx and dy parameters.
Matrix
 Inherited
Returns the primitive value of the specified object.
Object
Property detail
a property
public var a:Number

The value in the first row and first column of the Matrix object, which affects the positioning of pixels along the x axis when scaling or rotating an image.

Example
The following example creates the Matrix object myMatrix and sets its a value.
  import flash.geom.Matrix;
  
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.a);  // 1
  
  myMatrix.a = 2;
  trace(myMatrix.a);  // 2
  

b property
public var b:Number

The value in the first row and second column of the Matrix object, which affects the positioning of pixels along the y axis when rotating or skewing an image.

Example
The following example creates the Matrix object myMatrix and sets its b value.
  import flash.geom.Matrix;
   
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.b);  // 0
  
   var degrees:Number = 45;
  var radians:Number = (degrees/180) * Math.PI;
  myMatrix.b = radians;
  trace(myMatrix.b);  // 0.785398163397448
  

c property
public var c:Number

The value in the second row and first column of the Matrix object, which affects the positioning of pixels along the x axis when rotating or skewing an image.

Example
The following example creates the Matrix object myMatrix and sets its c value.
  import flash.geom.Matrix;
  
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.c);  // 0
  
  var degrees:Number = 45;
  var radians:Number = (degrees/180) * Math.PI;
  myMatrix.c = radians;
  trace(myMatrix.c);  // 0.785398163397448
  

d property
public var d:Number

The value in the second row and second column of the Matrix object, which affects the positioning of pixels along the y axis when scaling or rotating an image.

Example
The following example creates the Matrix object myMatrix and sets its d value.
  import flash.geom.Matrix;
  
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.d);  // 1
  
  myMatrix.d = 2;
  trace(myMatrix.d);  // 2
  

tx property
public var tx:Number

The distance by which to translate each point along the x axis. This represents the value in the third row and first column of the Matrix object.

Example
The following example creates the Matrix object myMatrix and sets its tx value.
 
  import flash.geom.Matrix;
  
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.tx);  // 0
  
  myMatrix.tx = 50;  // 50
  trace(myMatrix.tx);
  

ty property
public var ty:Number

The distance by which to translate each point along the y axis. This represents the value in the third row and second column of the Matrix object.

Example
The following example creates the Matrix object myMatrix and sets its ty value.
  
  import flash.geom.Matrix;
  
  var myMatrix:Matrix = new Matrix();
  trace(myMatrix.ty);  // 0
  
  myMatrix.ty = 50;
  trace(myMatrix.ty);  // 50
  

Constructor detail
Matrix constructor

public function Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0)

Creates a new Matrix object with the specified parameters. In matrix notation, the properties are organized like this:

Matrix class properties in matrix notation showing assumed values for u, v, and w

If you do not provide any parameters to the new Matrix() constructor, it creates an "identity matrix" with the following values:

a = 1 b = 0
c = 0 d = 1
tx = 0 ty = 0

In matrix notation, the identity matrix looks like this:

Matrix class properties in matrix notation

Parameters
a:Number (default = 1) — The value in the first row and first column of the new Matrix object.
b:Number (default = 0) — The value in the first row and second column of the new Matrix object.
c:Number (default = 0) — The value in the second row and first column of the new Matrix object.
d:Number (default = 1) — The value in the second row and second column of the new Matrix object.
tx:Number (default = 0) — The value in the third row and first column of the new Matrix object.
ty:Number (default = 0) — The value in the third row and second column of the new Matrix object.

Example
The following example creates matrix_1 by sending no parameters to the Matrix() constructor and matrix_2 by sending parameters to it. Notice that matrix_1 created with no parameters results in an identity Matrix with the values (a=1, b=0, c=0, d=1, tx=0, ty=0).
 import flash.geom.Matrix;
 
  var matrix_1:Matrix = new Matrix();
  trace(matrix_1); // (a=1, b=0, c=0, d=1, tx=0, ty=0)
  
  var matrix_2:Matrix = new Matrix(1, 2, 3, 4, 5, 6);
  trace(matrix_2); // (a=1, b=2, c=3, d=4, tx=5, ty=6)
 

Method detail
clone method

public function clone():Matrix

Returns a new Matrix object that is a clone of this matrix, with an exact copy of the contained object.

Returns
Matrix — A Matrix object.
concat method

public function concat(m:Matrix):void

Concatenates a matrix with the current matrix, effectively combining the geometric effects of the two. In mathematical terms, concatenating two matrices is the same as combining them using matrix multiplication.

For example, if matrix m1 scales an object by a factor of four, and matrix m2 rotates an object by 1.5707963267949 radians (Math.PI/2), then m1.concat(m2) transforms m1 into a matrix that scales an object by a factor of four and rotates the object by Math.PI/2 radians.

This method replaces the source matrix with the concatenated matrix. If you want to concatenate two matrixes without altering either of the two source matrixes, first copy the source matrix by using the clone() method, as shown in the Class Examples section.

Parameters
m:Matrix — The matrix to be concatenated to the source matrix.
createBox method

public function createBox(scaleX:Number, scaleY:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

Includes parameters for scaling, rotation, and translation. When applied to a matrix it sets the matrix's values based on those parameters.

Using the createBox() method lets you obtain the same matrix as you would if you applied the identity(), rotate(), scale(), and translate() methods in succession. For example, mat1.createBox(2,2,Math.PI/4, 100, 100) has the same effect as the following:

  import flash.geom.Matrix;
    var mat1:Matrix = new Matrix();
  mat1.identity();
  mat1.rotate(Math.PI/4);
  mat1.scale(2,2);
  mat1.translate(10,20);
  

Parameters
scaleX:Number — The factor by which to scale horizontally.
scaleY:Number — The factor by which scale vertically.
rotation:Number (default = 0) — The amount to rotate, in radians.
tx:Number (default = 0) — The number of pixels to translate (move) to the right along the x axis.
ty:Number (default = 0) — The number of pixels to translate (move) down along the y axis.

See also
flash.display.Graphics.beginBitmapFill()
createGradientBox method

public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

Creates the specific style of matrix expected by the beginGradientFill() and lineGradientStyle() methods of the Graphics class. Width and height are scaled to a scaleX/scaleY pair and the tx/ty values are offset by half the width and height.

For example, consider a gradient with the following characteristics:

The following illustrations show gradients in which the matrix was defined using the createGradientBox() method with different parameter settings, as indicated:

createGradientBox() settings Resulting gradient
width = 25;
height = 25;
rotation = 0;
tx = 0;
ty = 0;
width = 25;
height = 25;
rotation = 0;
tx = 25;
ty = 0;
width = 50;
height = 50;
rotation = 0;
tx = 0;
ty = 0;
width = 50;
height = 50;
rotation = Math.PI / 4; // 45°
tx = 0;
ty = 0;

Parameters
width:Number — The width of the gradient box.
height:Number — The height of the gradient box.
rotation:Number (default = 0) — The amount to rotate, in radians.
tx:Number (default = 0) — The distance, in pixels, to translate to the right along the x axis. This value will be offset by half of the width parameter.
ty:Number (default = 0) — The distance, in pixels, to translate down along the y axis. This value will be offset by half of the height parameter.

See also
flash.display.Graphics.beginGradientFill(), flash.display.Graphics.lineGradientStyle()
deltaTransformPoint method

public function deltaTransformPoint(point:Point):Point

Given a point in the pretransform coordinate space, returns the coordinates of that point after the transformation occurs. Unlike the standard transformation applied using the transformPoint() method, the deltaTransformPoint() method's transformation does not consider the translation parameters tx and ty.

Parameters
point:Point — The point for which you want to get the result of the matrix transformation.

Returns
Point — The point resulting from applying the matrix transformation.
identity method

public function identity():void

Sets each matrix property to a value that causes a null transformation. An object transformed by applying an identity matrix will be identical to the original.

After calling the identity() method, the resulting matrix has the following properties: a=1, b=0, c=0, d=1, tx=0, ty=0.

In matrix notation, the identity matrix looks like this:

Matrix class properties in matrix notation

invert method

public function invert():void

Performs the opposite transformation of the original matrix. You can apply an inverted matrix to an object to undo the transformation performed when applying the original matrix.
rotate method

public function rotate(angle:Number):void

Applies a rotation transformation to the Matrix object.

The rotate() method alters the a, b, c, and d properties of the Matrix object. In matrix notation, this is the same as concatenating the current matrix with the following:

Matrix notation of scale method parameters

Parameters
angle:Number — The rotation angle in radians.
scale method

public function scale(sx:Number, sy:Number):void

Applies a scaling transformation to the matrix. The x axis is multiplied by sx; and the y axis it is multiplied by sy.

The scale() method alters the a and d properties of the matrix object. In matrix notation, this is the same as concatenating the current matrix with the following:

Matrix notation of scale method parameters

Parameters
sx:Number — A multiplier used to scale the object along the x axis.
sy:Number — A multiplier used to scale the object along the y axis.
toString method

public function toString():String

Returns a text value listing the properties of the Matrix object.

Returns
String — A string containing the values of the properties of the Matrix object: a, b, c, d, tx, and ty.
transformPoint method

public function transformPoint(point:Point):Point

Returns the result of applying the geometric transformation represented by the Matrix object to the specified point.

Parameters
point:Point — The point for which you want to get the result of the Matrix transformation.

Returns
Point — The point resulting from applying the Matrix transformation.
translate method

public function translate(dx:Number, dy:Number):void

Translates the matrix along the x and y axes, as specified by the dx and dy parameters.

Parameters
dx:Number — The amount of movement along the x axis to the right, in pixels.
dy:Number — The amount of movement down along the y axis, in pixels.
Class examples

The following example uses the class MatrixExample to show how a large gradient-filled square can be created. This is accomplished using the following steps:
  1. The application creates a new Matrix object myMatrix, and it uses the trace() method to output the default property values for the myMatrix object.
  2. Then the application calls the createGradientBox() with the width and height parameters set to 200 pixels, no rotation, and the distance to translate along the x and y axes set to 50 pixels.
  3. The application prints the myMatrix again to show the change after calling createGradientBox().
  4. The application then sets up three variables to control how the gradient box is filled:
    1. colors: sets the gradient colors to range between solid red and solid blue.
    2. alphas: sets the opacity to solid.
    3. ratios: sets the distribution of the colors to be equal for both red and blue.
  5. The application calls the graphics methods beginGradientFill(), which operates on the myMatrix object, and it calls the lineTo() method, resulting in the gradient filled box.
package {
    import flash.geom.Matrix;
    import flash.display.Sprite;
    import flash.display.GradientType;

    public class MatrixExample extends Sprite {

        public function MatrixExample() {
            var myMatrix:Matrix = new Matrix();
            trace(myMatrix.toString());    // (a=1, b=0, c=0, d=1, tx=0, ty=0)

            myMatrix.createGradientBox(200, 200, 0, 50, 50);
            trace(myMatrix.toString());    // (a=0.1220703125, b=0, c=0, d=0.1220703125, tx=150, ty=150)

            var colors:Array = [0xFF0000, 0x0000FF];
            var alphas:Array = [100, 100];
            var ratios:Array = [0, 0xFF];
            graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, myMatrix);
            graphics.lineTo(0, 300);
            graphics.lineTo(300, 300);
            graphics.lineTo(300, 0);
            graphics.lineTo(0, 0);
        }
    }
}




 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/labs/flashauthoringpreview/flash/geom/Matrix.html