背面クリック

あるコンポーネントの背面に配置されている親子関係ではない別のコンポーネントがあった場合、前面のコンポーネントを透かしてクリックしたいときがある。
たとえば、コンポーネントの前面にエフェクト装飾用のコンポーネントを置きたいときなど、、

親子関係ならば、mouseChildrenやmouseEnabled などで対応できるが、
兄弟関係ではそれが出来ない。
そういうときは、hitAreaを使うといいみたい。

たとえば、こんな感じ

　　<!-- Main.mxml -->
　　<mx:Style>
　　　　.canvasCover{
　　　　　background-image: Embed(source="widget_waku.png",
　　　　　　　　　　　　　　　　　　scaleGridTop="5", 
　　　　　　　　　　　　　　　　　　scaleGridLeft="5", 
　　　　　　　　　　　　　　　　　　scaleGridBottom="241", 
　　　　　　　　　　　　　　　　　　scaleGridRight="447");
　　　　　background-size:"100%";
　　　　　background-color:#ffffff;
　　　　　background-alpha:0.5;
　　　　}
　　</mx:Style>

　　<mx:Canvas width="100%" height="100%" borderStyle="solid" borderThickness="0" cornerRadius="20" backgroundColor="#666666">
　　　　<mx:Button x="64" y="96" label="Click Me !" buttonMode="true" click="Alert.show('わーい！')"/>
　　　　<mx:Canvas x="20" y="20" width="200" height="200" styleName="canvasCover" hitArea="{new Sprite()}"/>
　　　　<mx:Label x="81.5" y="228" text="画像を敷いた場合" color="#FFFFFF"/>
　　</mx:Canvas>

hitArea に new Sprite()を指定すると、大きさ0のスプライトがヒットエリアとなり、クリックに反応しなくなる。

が、前面のコンポーネントにイメージ背景などがあると、hitAreaがうまく動作しない。
枠線や半透明の塗りつぶしなどはスクリプトで描画するしかないっぽい。

　　<!-- Cover.mxml -->
　　override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
				
　　　　super.updateDisplayList(unscaledWidth, unscaledHeight);
　　　　var g:Graphics = graphics;
　　　　g.clear();
　　　　g.beginFill(0xFFFFFF, 0.5);
　　　　g.lineStyle(1, 0x666666, 0.7);
　　　　g.drawRoundRectComplex(0, 0, unscaledWidth-1, unscaledHeight-1, 5, 5 ,0, 0);
　　　　g.endFill();
　　}

　　<!-- Main.mxml -->
　　<mx:Canvas width="100%" height="100%" borderStyle="solid" borderThickness="0" cornerRadius="20" backgroundColor="#666666">
　　　　<mx:Button x="64" y="96" label="Click Me !" buttonMode="true" click="Alert.show('わーい！')"/>
　　　　<local:Cover id="ccc" x="20" y="20" width="200" height="200" hitArea="{new Sprite()}" />
　　　　<mx:Label x="64" y="228" text="スクリプトで描画した場合" color="#FFFFFF"/>
　　</mx:Canvas>