Understanding AS3 localToGlobal method

One AS3 DisplayObject method I don’t see that much used since AS2 became obsolete is localToGlobal.

Now I’ll show you how useful can be this method when it’s time to save coding time.

First, the definition:

localToGlobal(point:Point):Point
Converts the point object from the display object’s (local) coordinates to the Stage (global) coordinates.

Let’s see what does it mean.

We have a square, whose width (and height) is 60 pixels.

Assuming its center is at (0,0), we can easily determine the coordinates of the four vertexs since if the width is 60, the half-width will be 30.

The diagonal, useful during the script you’re about to see, is dermined by:

square_root(60*60+60*60) or square_root(2)*60

Now imagine to rotate clockwise the square by an arbitrary angle, and tell me the position of the upper left vertex.

You can do it with trigonometry this way:

x = -42.426*cos(45-angle) = -30 if angle is zero. (42.426 is half the diagonal)
y = -42.426*sin(45-angle) = -30 if angle is zero

It’s not impossible, but it can be done in an easier way using localToGlobal.

Basically we know the upper left vertex is always at (-30,-30) in a world relative just the square itself, no matter of its position in the stage.

localToGlobal will handle the position in the stage according to the absolute (-30,-30) coordinate.

Here it is the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package {
	import flash.display.Sprite;
	import flash.geom.Point;
	public class square_mc extends Sprite {
		public var diagonal:Number=42.42640687119285;
		public var deg_to_rad:Number=0.0174532925;
		public var point:Point;
		public var pos_x,pos_y:Number;
		public function square_mc():void {
 
		}
		public function random_pos():void {
			x=Math.random()*400+50;
			y=Math.random()*300+50;
			rotation=Math.random()*360;
			point=new Point(-30,-30);
			point=localToGlobal(point);
			pos_x=x+diagonal*Math.cos((135-rotation)*deg_to_rad);
			pos_y=y-diagonal*Math.sin((135-rotation)*deg_to_rad);
		}
	}
}

Line 5: defining the half diagonal of a square whose width is 30

Line 6: degrees to radians conversion number

Line 7: defining a Point variable. The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis.

Lines 9-11: intentionally left blank for a possible more complex example in the future

Lines 13-15: randomly placing and rotating the square on the stage

Lines 16-17: retrieving upper left vertex coordinates using localToGlobal

Lines 18-19: retrieving upper left vertex coordinates using trigonometry

Here it is the result (included in a main class that just handles input and output)

Click the mouse on the stage to randomly move the square and retrieve the upper left vertex (marked in red) using both ways.

Which one do you prefer?

Download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.67 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

  1. Erman Haskan

    on June 22, 2010 at 6:52 pm

    I didn’t know about this tecnique! Thank you.

  2. BivisGames

    on June 23, 2010 at 1:49 am

    Nice! I didn’t know this… It ll save time on coding!

  3. Alexandre Colella

    on June 25, 2010 at 3:11 am

    Hei! Thanks Emanuelle! Thanks a lot!

    Did you see this?
    http://lab.andre-michelle.com/tonematrix

    Do you know how we can do this??

    Thanks!

  4. Todd

    on June 29, 2010 at 2:31 am

    One caution I might point out to people planning on using localToGlobal is that if your Flash movie itself ends up getting embedded by _another_ Flash movie, localToGlobal will give you your coordinates within on that parent Flash movie, which might be what you want, but might not be…

  5. dim

    on July 4, 2010 at 2:32 pm

    quote: “ActionScript 3 no longer uses the _lockroot property. The _lockroot property was introduced in Flash Player 7 and allowed _root references in loaded movies to continue to reference the loaded movie’s _root instead of the _root of the movie which loaded in that movie if the movie was loaded into a MovieClip.

    In ActionScript 3, all references to root remain connected to the original root of the file as though _lockroot was already in place.”

  6. jose

    on August 7, 2010 at 1:52 am

    does it exists a globaltolocal for the inverse operation

  7. suresh

    on December 21, 2010 at 10:55 am

    Nice & useful…

  8. Vinod

    on August 24, 2011 at 1:52 pm

    Hi Emanuele,

    Can you please define more by the simple about localToGlobal and globalToLocal
    basics as these methods are very confusing to me . Please define when we are having many children.

    Thanks in Advance

    Vinod

  9. George Profenza

    on August 24, 2011 at 5:55 pm

    Hmmm…so displayObject.localToGlobal(point) is the shorthand version of displayObject.transform.concatenatedMatrix.transformPoint(point) ?