Adobe Flash and Flex support three coordinate systems for different purposes:

• global
• local
• content

You can use Flex properties and methods to convert between coordinate systems.

About the coordinate systems

The following table describes the coordinate systems:

The following image shows these coordinate systems and how they relate to each other.

Using coordinate properties and methods

In some cases, you have to convert positions between coordinate systems. Examples where you convert between coordinates include the following:

• The MouseEvent class has properties that provide the mouse position in the global coordinate system and the local coordinates of the event target. You use the content coordinates to specify the locations in a Canvas container, or Application or Panel container that uses absolute positioning. To determine the location of the mouse event within the Canvas container contents, not just the visible region, you must determine the position in the content coordinate system.
• Custom drag-and-drop handlers might have to convert between the local coordinate system and the content coordinate system when determining an object-specific drag action; for example, if you have a control with scroll bars and you want to know the drag (mouse) location over the component contents. The example in Example: Using the mouse position in a Canvas container shows this use.
• Custom layout containers, where you include both visual elements, such as scroll bars or dividers, and content elements. For example, if you have a custom container that draws lines between its children, you have to know where each child is in the container's content coordinates to draw the lines.

Often, you use mouse coordinates in event handlers; when you do, you should keep the following considerations in mind:

• When you handle mouse events, it is best to use the coordinates from the MouseEvent object whenever possible, because they represent the mouse coordinates at the time the event was generated. Although you can use the container's contentMouseX and contentMouseY properties to get the mouse pointer locations in the content coordinate system, you should, instead, get the local coordinate values from the event object and convert them to the content coordinate system.
• When you use local coordinates that are reported in an event object, such as the MouseEvent localX and localY properties, you must remember that the event properties report the local coordinates of the mouse relative to the event target. The target component can be a subcomponent of the component in which you determine the position, such as a UITextField inside a Button component, not the component itself. In such cases, you must convert the local coordinates into the global coordinate system first, and then convert the global coordinates into the content coordinates container.

All Flex components provide two read-only properties and six methods that enable you to use and convert between coordinate systems. The following table describes these properties and methods:

Example: Using the mouse position in a Canvas container

The following example shows the use of the localToGlobal() and globalToContent() methods to determine the location of a mouse pointer within a Canvas container that contains multiple child Canvas containers.

This example is somewhat artificial, in that production code would use the MouseEvent class stageX and stageY properties, which represent the mouse position in the global coordinate system. The example uses the localX and localY properties, instead, to show how you can convert between local and content coordinates, including how first converting to using the global coordinates ensures the correct coordinate frame of reference.

<?xml version="1.0"?>
<!-- containers\intro\MousePosition.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="white">
    
    <mx:Script>
        <![CDATA[
          import mx.controls.Alert;

          // Handle the mouseDown event generated 
          // by clicking in the application.
          private function handleMouseDown(event:MouseEvent):void {
                
            // Convert the mouse position to global coordinates.
            // The localX and localY properties of the mouse event contain
            // the coordinates at which the event occurred relative to the
            // event target, typically one of the 
            // colored internal Canvas controls.
            // A production version of this example could use the stageX 
            // and stageY properties, which use the global coordinates, 
            // and avoid this step.
            // This example uses the localX and localY properties only to
            // illustrate conversion between different frames of reference.
            var pt:Point = new Point(event.localX, event.localY);
            pt = event.target.localToGlobal(pt);
                
            // Convert the global coordinates to the content coordinates 
            // inside the outer c1 Canvas control.
            pt = c1.globalToContent(pt);
               
            // Figure out which quadrant was clicked.
            var whichColor:String = "border area";
              
            if (pt.x < 150) {
                if (pt.y < 150)
                    whichColor = "red";
                else
                    whichColor = "blue";
            }
            else {
                if (pt.y < 150)
                    whichColor = "green";
                else
                    whichColor = "magenta";
            }
                
            Alert.show("You clicked on the " + whichColor);
          }
        ]]>
    </mx:Script>

    <!-- Canvas container with four child Canvas containers -->
    <mx:Canvas id="c1" 
        borderStyle="none" 
        width="300" height="300" 
        mouseDown="handleMouseDown(event);">
        
        <mx:Canvas 
            width="150" height="150" 
            x="0" y="0" 
            backgroundColor="red">
            <mx:Button label="I'm in Red"/>
        </mx:Canvas>
        <mx:Canvas 
            width="150" height="150" 
            x="150" y="0"
            backgroundColor="green">
            <mx:Button label="I'm in Green"/>
        </mx:Canvas>
        <mx:Canvas 
            width="150" height="150" 
            x="0" y="150"
            backgroundColor="blue">
            <mx:Button label="I'm in Blue"/>
        </mx:Canvas>
        <mx:Canvas 
            width="150" height="150" 
            x="150" y="150"
            backgroundColor="magenta">
            <mx:Button label="I'm in Magenta"/>
        </mx:Canvas>
    </mx:Canvas>
</mx:Application>
The executing SWF file for the previous example is shown below: