HSlider, кастомная область реагирования на мышь у ThumbSkin

[kutuzov]

Есть HSlider внутри thumb в виде Button и к этой кнопке есть скин в виде небольшой BitmapImage c PNG 64x64, у картинки видимая часть только 22x22, остальная область этой красивый glow эффект.


Кнопка разумеется реагирует на всю область, а хочется сделать так чтобы картинка была абсолютно не кликабельная, и нарисовать поверх Rect квадратик который будет неким аналогом hitArea

При этом в текущей версии (см. ниже) все работает если кнопка не включена в скин HSlider'а.

никакие шаманства с установкой hitArea непосредственно на Skin или hostComponent не помогают, картинка все равно не пропускает клики дальше вниз

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 creationComplete="sparkskin1_creationCompleteHandler(event)"
			 >
 
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void {
//				(pic.displayObject as Sprite).mouseEnabled = false;
//				(pic.displayObject as Sprite).mouseChildren = false;
//				mouseEnabled = false;
//				mouseChildren = false;
//				hostComponent.mouseEnabled = false;
//				hostComponent.mouseChildren = false;
 
//				hitRect.mouseEnabled = false;
//				hitArea = hitRect;
				hostComponent.hitArea = hitRect;
			}
 
		]]>
	</fx:Script>
 
	<s:states>
		<s:State name="up" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="disabled" />
	</s:states>
 
	<s:BitmapImage
		id="pic"
		verticalCenter="0"
		horizontalCenter="0"
		source="@Embed('pic.png')"
		/>
 
	<!-- hit area -->
	<s:Group
		id="hitRect"
		verticalCenter="0"
		horizontalCenter="0"
		>
		<s:Rect
			width="22"
			height="22"
			>
			<s:fill>
				<s:SolidColor alpha="0.5" />
			</s:fill>
		</s:Rect>
	</s:Group>
 
</s:SparkSkin>

В примере ниже два варианта:
1. Кнопка поверх большой кнопки (все работает как надо)
2. HSlider поверх большой кнопки (glow эффект считается за кнопку, не реагирует на клик, но и большая кнопка не кликабельна в этой области)
Пояснения:
- скин для кнопки один и тот же
- желтый глоу + зеленый кружок это PNG
- серый квадрат поверх кружочка это желаемая область реагирования

SkinCustomHitArea.swf   (291.1 Кб)

Так же прикреплен проект в виде переименованного файла с fxp на zip

Флекс использовался 4.9.0, но так же был протестирован и на 4.5 и 4.6 (результат везде одинаковый)

[kutuzov]

решилось добавлением в скин HSlider'а хендлера на creationComplete

protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void {
	mouseEnabled = false;
	hostComponent.mouseEnabled = false;
}