Flex/Flash/Actionscript

ImageMap component added to FlexLib

I’ve added a new Flex component to FlexLib: an ImageMap component that is an attempt to replicate client-side image maps in HTML. If you know about image maps in HTML then this component should be self-explanatory. Basically it lets you define clickable areas of an image, either rectangles, circles, or polygons. THe component dispatches various events for those hotspots, such as mouse over, mouse out, click, etc. So you can capture the mouse events and do whatever you want, like launch the link by using navigateToURL(), which is what would most closely resemble the HTML image-map functionality. But you can also do anything else you want when the event fires.

I tried to make it so you could basically just copy/paste the HTML code that you have for an existing client-side image map. So your MXML might look like this:



    
    
     WA
     OR   
    
  
  

You define the

attribute either using MXML or AS (I used MXML in the example above). Then within your map tag you have a series of

tags. Each area tag should have a shape attribute and a coord attribute. Basically you should be able to generate your image map in whatever you use already (DreamWeaver, etc) and just copy and paste it into your MXML Flex app.

View the documentation
View the source of the example MXML file.

To get the source of the ImageMap component, download the FlexLib project from Google code.

Here’s the example:

This movie requires Flash Player 9.

P.S. I stole the image map of the USA from the fine people at HotPads.com. Don’t sue me guys!

Related:

  • Here are all the examples I showed today in my session at 360|Flex. The demos are the Physics Form, VistaFlow 3D, WindowShade + Degrafa, MP3 Thumbnail CoverFlow, and FlexSpy Event Listeners. All examples have the full source code available and I've tried to write up brief descriptions about each one.…
    Tags: example, source, view, flexlib, component, flex, app
  • I just made a quick new component and added it to FlexLib. It's a Button component, but it allows you to add any child UI components to the button via MXML. So if you find the single icon and label format of the button to be a bit too restrictive,…
    Tags: component, flexlib, view, documentation, source, /swf, example, mxml
  • Am I the only one who's going to say this? Seems like the Flex blogosphere is drooling over the concept that Google would do something in Flex. But I haven't heard anyone talk shit about the app. Maybe it's because it's 1:30am and I've had a few beers, but seriously…
    Tags: flex, google, html, app
Standard

23 thoughts on “ImageMap component added to FlexLib

  1. Ramon Helena says:

    Doug,

    Very cool,

    Thanks for shared it,

    I was looking forward for one component or function like this.

    Best,

    Ramรณn

  2. Viacom sued Google for $1 Billion this week….how much do you think we could get for this blatant violation of our rights!?!?!?

    ๐Ÿ™‚

    Douglas Pope
    hotpads.com

  3. Nice man… good work.

    Is your sleeper componenet going to extend VideoDisplay and have a “dreams” array property? That could be kinda fun… ๐Ÿ™‚

  4. Todd says:

    Cool component, thanks!

    A cool addition would be a small standalone app that would allow the developer to DRAW the polys visually and output the list of coordinates for pasting into the mxml/as code.

    Y’know. Because I’m too lazy to make it myself…

    Nice job!

  5. Pingback: MadeInFlex » Blog Archive » Componente ImageMap

  6. Doug says:

    Your ImageMap is great. I have one question (if I’m allowed to ask here) and that is how do I programmatically extract the area where I clicked? I’m tring to basically say:

    public function setSomeProperty(event:Event):void {
    someProperty = /* how do I know the area at this point ??? */
    }

  7. Excellent work! Since it iherits from mx.ontrols.Img, will it properly respond to changes with scaleX and scaleY? I would like to be able to resize the mapped img, but still keep the mapping. Thanks! ๐Ÿ™‚

  8. Reddog says:

    I don’t even know if this thread is still open, but I keep getting “Parse error at ”” when I try to build the project.

    I’m using Flex 2 under FlashDevelop 3.0.0 Beta 6 with flexlib-.2.4

    Thanks!

  9. Reddog says:

    Sorry, the whole error is:

    ImageMap_Sample.mxml(38): col: 4 Error: Parse error at ”.

    Any ideas?

  10. prop says:

    I have a question:it works great when everything align to the left, but if you align the image to the center, all the maps are not moving… any suggestions please?

  11. Alex says:

    I was wondering if it possible to change the color of each individual map polygon.
    Like for example in the current example of USA , when the mouse hovers over some state it will change the color of the state ?

    Thanks

  12. You never cease to amaze me, where do you find the time!

    I am kind of new to Flex (love it but still getting a grip on the ActionScript side) could you possibly post the code nessary to use the ImageMap component with a ViewStack rather than the navigateToURL command?

    Please and Thank You!

  13. Tracy Spratt says:

    What a fine community. I finally needed something like this myself, and voila, Doug to the rescue.

    Thank you so much.

    Tracy

  14. bulear says:

    my question :
    how to generate the map with outline.now i have a map .i want to district by zone .
    it is that meaning how to get to “the coords=”85,11,133,11,134,…”.
    how to define Coordinates .
    thank you !

  15. Chris says:

    Hi Doug,

    It think that your component is great. (I also bought your book, which helped me a lot).

    Any suggestions on how to draw the polys and get the coordinates? At the moment, I just eyeball it, guess the coordinates, and refine it until it looks okay. There has to be a more efficient way. Any suggestions? Is there some way of doing it in photoshop?

    Again, thank you so much for your fine component.

    -Chris

  16. newFlex says:

    Dear Doug,
    I’m honour to find your project .It helps me a lot.But there are two questions puzzling me!
    Q1:

    I was wondering if it possible to change the color of each individual map polygon.
    Like for example in the current example of USA , when the mouse hovers over some state it will change the color of the state ?

    Q2:

    how do I programmatically extract the area where I clicked? Iโ€™m tring to basically say:

    public function setSomeProperty(event:Event):void {
    someProperty = /* how do I know the area at this point ??? */
    }

    โ€ฆ

    yours,
    Coolala

  17. Paolo says:

    Dear Doug, I’m try to use the imagemap component with actionscript, but i’m a newbie with flex and as. I have the coord stored into a mysql db and i can retreive it with a httpservice into xml format, but i not understand how to put into map tag with as.

    Can you help me?

    Thanks you in advance,
    Paolo

  18. Hello all,

    I can’t get it to work via Actionscript.
    I’d like to set the areas at runtime with values that come from a webservice. It gives a runtime error that my Array cant’t be casted into an flexlib.controls.area
    Can somebody give me an example?

  19. Hi friends,

    I am struggling to pass (corrds xml formate) into ‘iMap.map’ using actionscript. Can anyone give me an idea ?. if possible send me the piece of code to

  20. Dan says:

    Trying to figure out how to fire a function on a specific area shapeOver, shapeOut etc.
    Anybody done this? Thanks.

Comments are closed.