Having difficulty updating object properties in basic actionscript program

Question

I'm still working my way through some pretty basic Actionscript programming (in Flex), and I'm getting a little caught up with events and object properties.

I've got 3 files below, one application and two components. The basic goal is very simple - start out with two location canvases and one player canvas. When clicking in one location canvas, the player will update it's x and y coords to that canvas. Clicking in the other canvas will then update the player's x and y coordinates to that canvas. Repeat.

I think I'm close, but I can't quite figure out how to get a click within location1 or location2 to send their respective x and y coordinates back to the playerX and playerY values. Any suggestions about this specific issue, or even broader suggestions for accomplishing this more easily, would be great.

Here's my primary application file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:ns1="components.*">

    <mx:Script>
     <![CDATA[
      [Bindable]
      private var playerX:int = 20;
      [Bindable]
      private var playerY:int = 20;

      private function clickEventHandler(evt:Event):void
      {
       playerX = evt.x;
       playerY = evt.y;
      }
     ]]>
    </mx:Script>

    <ns1:location x="139" y="168" id="location1"
     playerMove="clickEventHandler(event)"/>
    <ns1:location x="629" y="168" id="location2"
     playerMove="clickEventHandler(event)"/>
    <ns1:player x="{playerX}" y="{playerY}"/>

</mx:Application>

Here's my "location" component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="200" height="200"
    click="clickHandler()">
    <mx:Script>
     <![CDATA[   
      import flash.events.Events

      private function clickHandler():void
      {
       var moveClick:Event = new Event("playerMove");
       moveClick.x = target.x;
       moveClick.y = target.y;
       dispatchEvent(moveClick);
      }
     ]]>
    </mx:Script>

    <mx:Metadata>
     [Event(name="playerMove")]
    </mx:Metadata>

</mx:Canvas>

And here's my player component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="50" height="100"> 
</mx:Canvas>

UPDATE:

I've been able to simulate the desired effect with the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
     <![CDATA[
      [Bindable]
      private var playerX:int = 20;
      [Bindable]
      private var playerY:int = 20;
     ]]>
    </mx:Script>

    <mx:Canvas x="139" y="168" id="location1" width="200" height="200"
     click="playerX = location1.x, playerY = location1.y" backgroundColor="#F60D0D"/>
    <mx:Canvas x="629" y="168" id="location2" width="200" height="200"
     click="playerX = location2.x, playerY = location2.y" backgroundColor="#EDE513"/>
    <mx:Canvas id="player1" x="{playerX}" y="{playerY}"
     width="100" height="100" backgroundColor="#3458F5"/>

</mx:Application>

Now I'm just working on modularizing it to achieve my real end goal, which is making sure I understand how events, objects, and event objects work.

Answer 1

You're not bubbling the event, so the parent document (the application) isn't "hearing" it.

Try changing this:

var moveClick:Event = new Event("playerMove");

to this:

var moveClick:Event = new Event("playerMove", true);

The added true sets the bubbles property of the event to true.

Answer 2

you should define a custom event class called PlayerMove with the x and y properties. and as eric said, set the bubbles properties to true.

public class PlayerMove extends Event {

      public static const PLAYER_MOVE : String = "playerMove";
      public var x : int;
      public var y : int;

      public function PlayerMove(x:int, y:int; type:String, bubbles:Boolean=true, cancelable:Boolean=false) {
             super(type, bubbles, cancelable);
             this.x = x;
             this.y = y;
      }
}

also, on your player canvas where you have the mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="200" click="clickHandler()" you must add the event keyword to the function like click="clickHandler(event)" and same to your function

private function clickHandler(event : MouseEvent) : void {
   dispatchEvent(new PlayerMove(event.target.x, event.target.y, PlayerMove.PLAYER_MOVE));
}

this should work