flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Subscriptions <subscripti...@leeburrows.com>
Subject Re: Clickable images
Date Tue, 30 Sep 2014 19:13:04 GMT
How about triggering a hotspot based on MouseEvent localX, localY 
properties?

something like this...

yourImage.addEventListener(MouseEvent.CLICK, mouseHandler);

function mouseHandler(event:MouseEvent):void
{
     for (var i:int=0;i<rects.length;i++)
     {
         if (rects[i].contains(event.localX, event.localY)
         {
             //hotspot i clicked, do something
             break;
         }
     }
}

rects will be an array of Rectangle objects that represent your hotspots

Lee Burrows
ActionScripter

On 30/09/2014 19:03, mark goldin wrote:
> The thing is I dont know up front how many hot spots I am going to have and
> where I will put them. This about this  as a chart.
>
> On Tue, Sep 30, 2014 at 1:00 PM, jude <flexcapacitor@gmail.com> wrote:
>
>> Is what you are looking for similar to an HTML image map? If so there's a
>> component for it in flexlib,
>> http://stackoverflow.com/questions/535003/image-map-in-flex.
>>
>> Alex, I've been surprised by how powerful Spark skinning is and I still
>> don't think people are realizing how they can use it. It was and is a
>> newish paradigm that many Flex devs haven't fully explored IMHO.
>>
>> In this case you would have a custom SkinnableContainer with your custom
>> skin. In the skin you would have the background image and the clickable
>> images (Spark Image instances with unique ID's?). Then in the custom
>> SkinnableContainer you would override the addPart handler and add listeners
>> for each clickable image. Does this make sense or am I over complicating
>> it?
>>
>> On Tue, Sep 30, 2014 at 11:23 AM, Alex Harui <aharui@adobe.com> wrote:
>>
>>>
>>> On 9/30/14 3:30 AM, "mark goldin" <markzolotoy@gmail.com> wrote:
>>>
>>>> If I have a custom skin with objects that need be shown over the picture
>>>> then I can position these objects differently at the run time?
>>> You can add code to the skin to change the depth order of things in the
>>> skin, or place non-mouseEnabled items over the button.
>>>
>>> -Alex
>>>
>>>


Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message