rotate (Matrix.rotate method) -- Version 8

Sets the values in the current matrix so that the matrix can be used to apply a rotation transformation.

The rotate() method alters the a and d properties of the Matrix object. In matrix notation this is shown as follows:

Parameters

Example

The following example shows how the rotate() method rotates rectangleMc 30˚ clockwise. Applying myMatrix to rectangleMc resets its _x value, leaving you to reset it to 100 manually.

import flash.geom.Matrix;
import flash.geom.Transform;

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

var degrees:Number = 30;
var radians:Number = (degrees/180) * Math.PI;
myMatrix.rotate(radians);
trace(myMatrix.toString()); // (a=0.866025403784439, b=0.5, c=-0.5, d=0.866025403784439, tx=0, ty=0)

var rectangleMc:MovieClip = createRectangle(20, 80, 0xFF0000);
trace(rectangleMc._x); // 0
rectangleMc._x = 100;
trace(rectangleMc._x); // 100

var rectangleTrans:Transform = new Transform(rectangleMc);
rectangleTrans.matrix = myMatrix;
trace(rectangleMc._x); // 0
rectangleMc._x = 100;
trace(rectangleMc._x); // 100

function createRectangle(width:Number, height:Number, color:Number):MovieClip {
    var depth:Number = this.getNextHighestDepth();
    var mc:MovieClip = this.createEmptyMovieClip("mc_" + depth, depth);
    mc.beginFill(color);
    mc.lineTo(0, height);
    mc.lineTo(width, height);
    mc.lineTo(width, 0);
    mc.lineTo(0, 0);
    return mc;
}

The previous example uses the _x property of the MovieClip object to position rectangleMc. Generally, when dealing with Matrix object positioning, mixing positioning techniques is considered poor format. The previous example written in correct syntax would concatenate a translation Matrix to myMatrix to change the horizontal location of rectangleMc. The following example demonstrates this.

import flash.geom.Matrix;
import flash.geom.Transform;

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

var degrees:Number = 30;
var radians:Number = (degrees/180) * Math.PI;
myMatrix.rotate(radians);
trace(myMatrix.toString()); // (a=0.866025403784439, b=0.5, c=-0.5, d=0.866025403784439, tx=0, ty=0)

var translateMatrix:Matrix = new Matrix();
translateMatrix.translate(100, 0);
myMatrix.concat(translateMatrix);
trace(myMatrix.toString()); // (a=0.866025403784439, b=0.5, c=-0.5, d=0.866025403784439, tx=100, ty=0)

var rectangleMc:MovieClip = createRectangle(20, 80, 0xFF0000);
trace(rectangleMc._x); // 0
rectangleMc._x = 100;
trace(rectangleMc._x); // 100

var rectangleTrans:Transform = new Transform(rectangleMc);
rectangleTrans.matrix = myMatrix;
trace(rectangleMc._x); // 100

function createRectangle(width:Number, height:Number, color:Number):MovieClip {
    var depth:Number = this.getNextHighestDepth();
    var mc:MovieClip = this.createEmptyMovieClip("mc_" + depth, depth);
    mc.beginFill(color);
    mc.lineTo(0, height);
    mc.lineTo(width, height);
    mc.lineTo(width, 0);
    mc.lineTo(0, 0);
    return mc;
}

Comments

Fumio Nonaka said on Dec 14, 2005 at 6:59 AM :

[Wrong]:
"The rotate() method alters the a and d properties of the Matrix object."

Such method should be the scale().

[Correct]:
"The rotate() method alters the a, b, c and d properties of the Matrix object."

CajunFlash said on May 16, 2006 at 4:03 PM :

Hi folks at macromedia, I was looking at the formula for your rotation matrix and I believe there is a sign mixup for "b" and "c":

From the rules of matrix multiplication, the formula for calculating the new point is:

x' = ax + by + tx
y' = cx + dy + ty

where:
x',y' are the new coordinates
x,y are the old coordinates
b = sin(q)
c = -sin(q)
q = angle of counterclockwise rotation

Remember that on the stage, y coordinates are POSITIVE in the DOWNWARD direction.

Let say we have a vector (1,0), if we rotate it by say 45 degrees ccw, we would expect to end up with a vector pointing DOWNWARD, but according to the formula:

y' = cx + dy + ty
= -sin(pi/4) * 1 + cos(pi/4) * 0 + 0
= -1/sqrt(2) < 0

Since negative y is UPWARD on the stage, the final vector points in the wrong direction.

I would really appreciate if someone could please explain this inconstency.

NPaquin said on May 8, 2007 at 7:00 AM :

After applying the transformation to a movieClip with a matrix that have a rotation in it, why does the movieClip's _rotation property does not change and keep the 0 value ? More than that, if I do myMovieClip._rotation += 0; my movieClip turns back to it's original orientation and cancel the effect of the transformation.

Is there a way to get the applied rotation by the transform method ?