Flex: Highlighting element on mouse over

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.

---

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.