Flex event propagation - apache-flex

Question

I try to capture a event and I can't.
Please look here:
http://www.pata.ro/FlexTest/
The blue rectangle is the parent, and the other two are the children.
If I roll over a child (red or green) I am still over the blue one (the RollOut is not fired for the blue one). I made the green rectangle a little transparent so you can see that it is over the red one.
When I put my cursor over the green one in a place where it is over the red one, I get, BlueRollOver, GreenRollOver, RedRollOut.
What I try to do is to get the red one RollOver too, even if it is under the green one. Like the parent captures RollOver even if I am over one of it's children. Or vice versa.
So, how can I propagate the event down to the element under the one I have the mouse over?
Thanks
Bellow you have my code.
The event listeners were declared in the MXML, so I rewrite those for the red rectangle so I could add the useCapture argument. If I set useCapture to TRUE, the red rectangle dosen't capture any event, wherever I have the mouse. If I set it to false it works like before. So, how can I use this argument?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
applicationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function init():void
{
gRed.addEventListener(MouseEvent.ROLL_OVER,RedRollOver,true);
gRed.addEventListener(MouseEvent.ROLL_OUT,RedRollOut,true);
}
private function BlueRollOver(ev:Event):void
{
idBlue.text="RollOver";
}
private function BlueRollOut(ev:Event):void
{
idBlue.text="RollOut";
}
private function RedRollOver(ev:Event):void
{
idRed.text="RollOver";
}
private function RedRollOut(ev:Event):void
{
idRed.text="RollOut";
}
private function GreenRollOver(ev:Event):void
{
idGreen.text="RollOver";
}
private function GreenRollOut(ev:Event):void
{
idGreen.text="RollOut";
}
]]>
</fx:Script>
<s:Group id="gBlue" x="114" y="94" width="404" height="301" rollOver="BlueRollOver(event)" rollOut="BlueRollOut(event)">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#0000CC"/>
</s:fill>
</s:Rect>
<s:Group id="gRed" x="140" y="101" width="230" height="114">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#EE0000"/>
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="gGreen" x="39" y="20" width="200" height="200" rollOver="GreenRollOver(event)" rollOut="GreenRollOut(event)">
<s:Rect width="100%" height="100%" alpha="0.6">
<s:fill>
<s:SolidColor color="#00EE00"/>
</s:fill>
</s:Rect>
</s:Group>
</s:Group>
<s:Label x="535" y="94" text="Blue" color="#0000CC" width="149" id="idBlue"/>
<s:Label x="535" y="114" text="Red" color="#EE0000" width="173" id="idRed"/>
<s:Label x="535" y="137" text="Green" color="#00EE00" width="173" id="idGreen"/>
</s:Application>

Answer 1

Try setting the useCapture argument to true when you add the event listener to the red layer.

Answer 2

It's because the green and the red rectangles are siblings, the events can only bubble up if there is a parent / child hierachy. Use the useCapture flag on the red rectangle.