Why does the roll_out event fire in this code?

I have made this short example to demonstrate some problems I'm having.

<?xml开发者_Go百科 version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Canvas
        id="buttonCanvas"
        x="100" y="100" opaqueBackground="#000000" width="80%" height="300"
        creationComplete="init(event)">
        <mx:Button x="5" y="5"/>
        <mx:Button x="5" y="50"/>

    </mx:Canvas>


    <mx:Script>
    <![CDATA[
        private function init(event:Event):void{
            buttonCanvas.addEventListener(MouseEvent.ROLL_OUT, function(event:Event):void{
                buttonCanvas.opaqueBackground=(buttonCanvas.opaqueBackground==0)? 0x666666:0;
            });         
        }    
    ]]>
    </mx:Script>
</mx:Application>

I don't understand the following:

1. Why don't the percentage or absolute dimensions affect the canvas size?
2. Why does the roll_out event fire when the mouse leaves a button (even when it is still inside the canvas).

I'm going nuts trying to figure this out. Any help would be greatly appreciated!

---

Maybe you wanted to use backgroundColor style and not opaqueBackground property?

---

Just glancing at this, I can tell you that the default value for opaqueBackground is null, not 0.