Actionscript 3.0: Scale Object from Center Point

Note: This is almost exactly the same solution I posted earlier for rotating an object around its center point (Actionscript 3.0: Rotate Around Center Point). I thought I’d post this slightly altered solution for people who need it.

Problem:

You need to scale a movieclip/sprite from its center point, but its registration point is at (0,0) and you can’t and/or don’t feel like putting this object in the center of a container movieclip and rotating that

Solution:

TCBWMO (Take care of business with the matrix object).

Here’s the function:

private function scaleFromCenter(ob:*, sx:Number, sy:Number, ptScalePoint:Point) { 
	var m:Matrix=ob.transform.matrix;
	m.tx -= ptScalePoint.x;
	m.ty -= ptScalePoint.y;
	m.scale(sx, sy);
	m.tx += ptScalePoint.x;
	m.ty += ptScalePoint.y;
	ob.transform.matrix = m;
}

Now to make this work, you could call it like this:

//this will create a point object at the center of the display object
ptRotationPoint = new Point(mcPhoto.x + mcPhoto.width/2, mcPhoto.y + mcPhoto.height/2);
//call the function and pass in the object to be rotated, the amount to scale X and Y (sx, sy), and the point object we created
scaleFromCenter(mcPhoto, 2, 2, ptScalePoint);

In this example we’re subbing in “2″ for both the sx and sy values. This will scale our image to twice its size. If you want to scale down, use numbers lower than 1.


9 Comments »

  1. very helpful. thank you

    Comment by seiji — October 21, 2008 @ 12:30 am

  2. This works ok for equal scaling values and no rotation. However, if you rotate and apply different values, the object will get skewed.

    Comment by Emil Tamas — February 2, 2009 @ 5:00 am

  3. I’m getting the error that ptRotationPoint and ptScalePoint are undefined how and where do i define them. How can i get this to work? any help?

    Comment by Anonymous — February 18, 2009 @ 5:35 pm

  4. I am working on this as well. I have a problem though, when I try to run the script. An error comes up that says “1084:Syntax error: expecting a rightparen before multi.” Any suggestions? I do not appear to be missing a paren anywhere.

    Comment by Amber Nicole — April 9, 2009 @ 10:54 am

  5. Should be like this:
    //this will create a point object at the center of the display object
    ptScalePoint = new Point(mcPhoto.x + mcPhoto.width/2, mcPhoto.y + mcPhoto.height/2);
    //call the function and pass in the object to be rotated, the amount to scale X and Y (sx, sy), and the point object we created
    scaleFromCenter(mcPhoto, 2, 2, ptScalePoint);

    Comment by Anonymous — April 12, 2009 @ 6:32 pm

  6. In your sample your variable is named “ptRotationPoint”, but you are passing “ptScalePoint” in your function call. Might want to change that so people don’t get confused.

    Otherwise, this is a godsend. Saved me hours of figuring it out for myself. Off to read more about matrices now.

    Thanks!

    Comment by Joel — April 23, 2009 @ 12:37 pm

  7. Nice, but how can u scale according to the rotation (if applied to the object before scaling)?
    The tx/ty always moves the matrix according to the zero rotation. That’s the problem.

    Comment by Jloa — December 2, 2009 @ 9:21 am

  8. DO IT BY HAND,

    Manual Scale: set the code (general ‘load youtube vid’, sorry dont have it to hand) into a movie clip with a handle on a separate layer, the handle is a graphic/big orange block that you draw to the exact dims of the intended YT. Come out of the movie clip, manually scale the handle, ctrl/shift to retain proportions, this applies relative to the display of the Youtube vid that is loaded.

    might also work with the 3d tool should you feel like playing about with the MC. you can run multiple vids at any shape and size you want, worked amazingly well for a few video walls I’ve done.

    if you want to see an example email dan.hemsley@live.co.uk.

    Dan

    Comment by Dan — March 4, 2010 @ 9:16 am

  9. To Dan: you say do it by hand and I agree. Here is an article that gives a lot of detail:

    http://www.actionscript-flash-guru.com/blog/33-scale-around-a-point–transform-multiple-objects–actionscript-3-as3

    Comment by Nico Limpika — May 26, 2010 @ 6:42 pm

Leave a comment