Scale Around a Point | Transform Multiple Objects

Scale Around a Point | Transform Multiple Objects | ActionScript 3 (AS3)

Last Updated on Thursday, 12 August 2010 15:53 Written by Nicholas Dunbar

Scaling objects with ActionScript 3.0 (AS3) relative to a static point is commonly done with the the transform matrix, but I propose another solution after.

Solution 1:

var tx:Number = clip.x;
 var ty:Number = clip.y;
 var m:Matrix = clip.transform.matrix;
 m.translate( -tx, -ty );
 m.rotate(30*Math.PI/180);
 m.translate( tx, ty );
 m.scale( 1.5, 1.5);
clip.transform.matrix = m;

If you look at this and your response was "Huh?" I recommend reading on to solution two. The above example works well for scaling, rotating and translating objects when you know what the heck is going on, but when you start playing with iterative transformations and multiple objects you will start to have problems without a deep knowledge of the transform matrix. Here is what I suggest. If you want real control and understanding of what is going on you should do the transformations by hand. Here is solution 2 for scaling:

public static function scaleAroundPoint(objToScale:DisplayObject, regX:int, regY:int, scaleX:Number, scaleY:Number):void{
            if (!objToScale){
                return;
            }
            var transformedVector:Point = new Point( (regX-objToScale.x)*scaleX, (regY-objToScale.y)*scaleY );
            
            objToScale.x = regX-( transformedVector.x);
            objToScale.y = regY-( transformedVector.y);
            objToScale.scaleX =  objToScale.scaleX*(scaleX);
            objToScale.scaleY =  objToScale.scaleY*(scaleY);
}

So how does it work? The key is creating a vector that represents the location of our objToScale in relationship to our static point from which we want to scale.

Let us first look at my reason for doing this so as to have some sort of context for the solution.

Once upon a time, a little programmer was creating a drawing program. He created a user interface where one can select muliple objects on the screen which draws a bounding box around the selected objects. The next thing he did was to make it so the user can drag that bounding box to be larger or smaller. At this point what he wanted to do was to change the locations and scales of each of the selected objects so that they would fit into the new bounding box proportionaly to the way they originally fit in the orignal bounding box. First step was to find the static point (regX, regY) So when he created the new size for the bounding box he determined a point that was static. How he did this was by looking for a point that didn't move from befor to after the transformation. For example if you drag the top left corner of the box then the bottom right corner is the static point. If you drag the top right corner then the bottom left corner is the one that is static. If the scale from center option is set then that center point is the static point.

So again this point that does not move would be regX and regY in the above function in solution 2. Next each object is proccessed separately by the function using the same regX and regY. We then create a vector that runs from the registry point (aka the static point) to the x,y coordinates of our objToScale. This vector has an X component and a Y component which is the height and width of the vector if it was to be drawn on stage. Then we scale that vector by multiplying each component by our scaleX and scaleY values. From this new scaled vector we can determine the new location of the objToScale and relocate it by adding the X and Y component of the vector to the registry point. Then finally we can scale the movie clip its self and boom we are done.

I hope you understand this long and belabored explination. Please feel free to ask questions in the comments

Set as favorite

Bookmark

Email This

Comments (6) add comment

Subscribe to this comment's feed

Gregory Steimann said:

	That's completely brilliant! Have you posted any of your code for the actual drawing of the shapes and applying the curves anywhere? Or would you be willing to? I'm kind of a novice AS3 programmer and honestly it would help me out sooo sooo much with a project I'm working on! I've been trying to figure this out for weeks now.
	report abuse vote down vote up

June 11, 2010
Votes: +0

Nicholas said:

Thanks! Check out the articles below for more things you might want to know about to build your own drawing program.

How to draw a bezier curve with two control points instead of the one.
http://www.actionscript-flash-guru.com/blog/31-cubic-bezier-using-beziersegment-actionscript-3-as3

Precision is the key to getting scaling right.
http://www.actionscript-flash-guru.com/blog/35-precision-problems-width-height-getbounds-actionscript-30-as3

Also in solution 2, regX and regY are integers. This is not necessary. In fact I suggest using numbers for everything since precision is key to getting this right as I mention in article 35 "precision problems with width height and getBounds".

A little bit on how I work with colors on the color selection panel:
http://www.actionscript-flash-guru.com/blog/36-uint-to-6-digit-rgb-hex-actionscript-30-as3

I am glad you like it.

report abuse

vote down

vote up

June 11, 2010 | url
Votes: +0

melodave said:

	Thanks for this solution! I was thinking on it in the last few hours and it has just perfectly erased all my rubbish sketches. They were confusing anyway Thanks for sharing! Pisz
	report abuse vote down vote up

June 16, 2010
Votes: +0

Nicholas said:

	thanks melodave for the link to how you used this simple algorithm. others can check it out here http://extrarelish.co.uk/presentations/zooom/
	report abuse vote down vote up

June 24, 2010 | url
Votes: +0

Greg Steimann said:

Thanks for the articles Nicholas! They helped some, but I'm still having a terrible time drawing out shapes. How are you accomplishing this? I've attempted methods like adding a circle on click so the users can see a point added, then immediately adding the point data it to a vector-array (like "shape:Vector.") then running a drawGraphicsData(shape) for each time a new point is added, but its really not working out the way I want.

The project I'm working on is a project for work, where people draw on a kite and the only thing I can't get to work is basically what you've figured out here, being able to draw/complete and move custom shapes.

report abuse

vote down

vote up

July 01, 2010
Votes: +0

Nicholas said:

	Someone contacted me after checking out this post and provided me with a cool link that better describes how solution 1 works above. Here is the link for anyone trying to do skews http://www.touchspin.com/Actio...mation.php thanks greg!
	report abuse vote down vote up

July 02, 2010 | url
Votes: +0

Write comment