Rotate, Scale and Move functionality using as3

Question

We want to scale, rotate and drag functionality in flash as3. I do have some code. It's rotation functionality is working good. But After we rotate image, zooming functionality does not work.

we rotate, and zoom image by one reference point.

Here is code:

function scaleRotateFromPoint(sx:Number, sy:Number, ptCenter:Point, angle:Number):void{
    var mat:Matrix = imgMat.clone();
    mat.tx -= ptCenter.x;
    mat.ty -= ptCenter.y;
    mat.rotate (angle*(Math.PI/180));
    mat.scale(sx,sx);
    mat.tx += ptCenter.x;
    mat.ty += ptCenter.y;
    loaderFirst.transform.matrix = mat;
}

we need to pass one point, zoom value and rotation angle.

Thanks in advance.

When you say "after we rotate image, zooming functionality doesn't work", do you mean that it no longer has any effect? Or that it doesn't work correctly? More info please! — aaaidan
@aaaidan, it doesn't work correctly. It has a zooming effect, but it does not zoom from given point. :( — Ronak
okay, well the general shape of the code seems reasonable to me, which makes me wonder if it's not a problem in the function itself? Are you meaning to clone the matrix from "imgMat" and assign to the loader's matrix? Also, shouldn't you be scaling by (sx,sy)? — aaaidan
Excellent article here by senocular: senocular.com/flash/tutorials/transformmatrix — aaaidan

aaaidan aaaidan · Accepted Answer · 2012-03-25T02:50:34

I've just had a play with your function in Flash, and it seems to work perfectly for me.

I changed the code so that it took the transform object as a parameter, and set the modified matrix after modifying it to make absolutely sure it was being used correctly.

function scaleRotateFromPoint(t:Transform, sx:Number, sy:Number, ptCenter:Point, angle:Number):void {
    var mat:Matrix = t.matrix;
    mat.tx -= ptCenter.x;
    mat.ty -= ptCenter.y;
    mat.rotate (angle*(Math.PI/180));
    mat.scale(sx,sy);
    mat.tx += ptCenter.x;
    mat.ty += ptCenter.y;
    t.matrix = mat;
}
// usage:
scaleRotateFromPoint(clip.transform, 1.01, 1.01, new Point(277,185), 5 );

The apparent problem might be because you're specifying the center point in the DisplayObject's local co-ordinates. The center point is specified in the parent co-ordinate space.

If you need to specify the co-ords in local space, one straightforward way to convert between co-ordinate spaces by using the DisplayObject.localToGlobal() and globalToLocal() functions. (Alternatively, you can invert() the local matrix, and transformPoint() to get a point in the parent's space.)

Rotate, Scale and Move functionality using as3

2 Answers