Flex: Higlighting element on mouse over

Question

Hi!

I have a canvas with several small canvases on it.

Like this:

public class Board extends Canvas
    {
     public function Board()
     {
      //cellWidth = this.width/boardSize;
      //this.drawMech();
      addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
      super();
                }

then I added balls to the board using this.addChild(ball);

And ball

public class Ball extends Canvas
    {  
     public function Ball()
     {

      addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
      super();
     }

     public function creationComplete(event:Event):void
     {
      trace("created stones");
      //Alert.show("Creation complete ever called");
      addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
      //addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
     }

What I want to implement is:

I want the ball which I added to canvas Board, became highlighted (e.g. changed it's color) on mouse over on it, and became unhighlighted after mouse is go out of ball.

What I have done to achieve it. I added 2 event listeners to ball class, in order to listen for mouse over and mouse out events...But for some reason they was not called...

Please help!

Answer 1

Your class's name is Ball and constructor's name is Stone. The line addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete); will never be called. Change the constructor name to Ball.