Defining hitArea on Spark ToggleButton - actionscript-3

Question

I've been able to skin a ToggleButton with custom images (loading Skin images dynamically) and it is working well.
The last functionality I would like to add is to limit interactivity (mouseEvents) to the opaque pixels. I've been searching around and came across InteractivePNG and Creating a hitarea for PNG Image with transparent (alpha) regions in Flex. I had erratic results with InteractivePNGin initial tests so I thought I would try to define the ToggleButton hitArea property using the code from the second link.
I haven't been able to get it working. My code for generating the Sprite to define the hit area is below. (I've also tried just a simple Sprite with a rect drawn within it.) When I set the togglebutton.hitArea I don't get any errors but it is no longer interactive.
Does the Sprite defining the hitArea need to be added to the DisplayList of the object it is being applied to? If so, how to I do that with a subclass of ToggleButton?
hitSprite = createHitArea(upImageData, 1);
hitSprite.mouseEnabled = false;
this.hitArea = hitSprite;
Of course calling `addChild() on a ToggleButton throws an error.
this.addChild(hitSprite);
I've tried:
wrapping my custom ToggleButton in a Spark Group, and then an MX UIComponent so that I could have a use a SpriteDisplayElement to add things to – but that didn't work.
adding a Sprite within my custom ToggleButton definition – and get an error doing that.
Am I out of luck here using the ToggleButton class for this type of functionality? What I don't understand is why ToggleButton has a hitArea property if there isn't a way to set it – but that can't be the case so I must be doing something wrong.
Update
I just tried this approach( Flex 4 Custom Component - How to notify skin of property changes?) binding to a SpriteVisualElement that gets created in to ToggleButton – but still no success in setting the hitArea – either of the ToggleButton or the Skin it is using.
public function createHitArea(bitmapData:BitmapData, grainSize:uint=1):SpriteVisualElement
{
var _hitarea:SpriteVisualElement = new SpriteVisualElement();
_hitarea.graphics.beginFill(0x000000, 1.0);
for(var x:uint=0;x<bitmapData.width;x+=grainSize) {
for(var y:uint=grainSize;y<bitmapData.height;y+=grainSize) {
if(x<=bitmapData.width && y<=bitmapData.height && bitmapData.getPixel(x,y)!=0) {
_hitarea.graphics.drawRect(x,y,grainSize,grainSize);
}
}
}
_hitarea.graphics.endFill();
_hitarea.cacheAsBitmap = true;
return _hitarea;
}
]]>

Answer 1

I don't know much about the hitArea property, but I have dealt with buttons that have transparencies. I solve that by adding something like this to my button skin:
<s:Group id="clickTarget" top="0" left="0" bottom="0" right="0">
<s:Rect top="0" left="0" bottom="0" right="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" alpha="0.01" />
</s:fill>
</s:Rect>
</s:Group>