This content has been marked as final. Show 3 replies
Here's one way to do it:
Create a new class, extending Canvas. Into this class place your image (either as MXML or via ActionScript).
The class should have a UIComponent child added after the Image so that it lies on top of the Image. In either the updateDisplayList function or when the image has loaded (ie, some event to trigger this), create a series of Shape object s(see flash.display.Shape) and add them to the UIComponent.
Draw your shapes using their graphics properties, but use a solid fill with alpha = 0. You won't get mouse events if don't draw something and the alpha will make them invisible but selectable.
Add an eventHandler to the UIComponent to capture mouse clicks. The UIComponent will only receive the clicks over the shapes. You can either then dispatch your own event depending on which shape was picked or just let the click event bubble up.
Note: you can draw directly into the UIComponent's graphics too, but it will be easier to tell where the mouse has been clicked if you use separate shapes.
Note: if you want to change the cursor to a hand over the shape, set the UIComponent's useHandCursor="true"; its buttonMode="true"; its mouseChildren="false". You have to do all 3 to see the hand cursor.
Great help, Peter.
One small problem...
How do I determine which shape was clicked in the UIComponent when handling the "Mouse.CLICKED" event?
Maybe the problem is Im addling the eventListener at the wrong location.
Im adding it to the UIcomponent.
Do something like this, where shapes is an Array of the Shape you created.
private function onClick( event:MouseEvent ) : void
for(var i:int=0; i < shapes.length; i++)
var sh:Shape = shapes as Shape;
if( sh.hitTestPoint(event.stageX, event.stageY, true) )
_selectedItem = hitAreas;
dispatchEvent( new Event("hitClick") );