Flex / ActionScript - Click Through An Element To Application Behind Air App - apache-flex

Question

I'm attempting to build a desktop AIR app using flex/Action Script in Flash Builder.
My desired functionality is this:
- transparent background
- semitransparent (alpha 0.5) item/element that ignores all mouse events and "passes clicks through" to the application behind the app
So essentially what I want to have is that the element handles mouse events in exactly the same way a transparent background does - ie. it is like you're clicking on the application behind
Here is a code example of what I have tried. In the below example clicking on the button fires the "window clicked" alert to demonstrate that the click is being ignored by the button and reaching the window with the transparent background. When I remove the click handler though, clicking on the button does not result in the click being passed through to application behind, like a click anywhere else on the transparent background does.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
alwaysInFront="true"
creationComplete="maximize();">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
background-color:#999999;
background-alpha:"0";
}
</fx:Style>
<fx:Script>
import mx.controls.Alert;
public function windowClicked():void{
Alert.show("window clicked");
}
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Window id="mainWindow" height="100%" width="100%" mouseChildren="false" backgroundAlpha="0">
<s:Button label="Click Through Me Please" alpha="0.5"/>
</s:Window>
</s:WindowedApplication>

Answer 1

I made a quick comment to your question but thought I would elaborate in an answer.
Since I'm sure you are going to do more than your example up there, here is how those properties work:
mouseEnabled="false" - this says you can't click me but you can click my children. This works well when you are disabling a single item or want click event to pass through an item to it's children.
mouseChildren="false" - this says you can't click my children. This is useful if you are goin to build complex overlays in your app that might contain 10 display objects and want want the mouse to ignore them all.
Hope this helps!