07-15-2011 09:48 AM
I know this is probably in a bunch of other threads but I can't seem to find any information about how to make an image a button for what I am trying to do. By this I mean for example I want to make a map of the USA and have the States all be buttons. So when the user clicks a State it brings up a new view. Now I know I can just put a border container in the State and have a click event off the boarder container. The only problem is the border container can only be square or have rounded corners and States that are small would be difficult to make a square border container that wouldn't go into another state. So I would like to basically be able to use the States borders as a border container so all the area in the State can have a click event. If anyone knows how I could do this or knows of other threads or articles that will give me some information to research it would be sooo helpful. Thanks in advance!!
Solved! Go to Solution.
07-15-2011 09:58 AM
07-15-2011 10:02 AM
I am assuming that each one of your state's are png with alpha correct? One way to solve your issue is to make all of the states vector in Flash Pro or I think you could export fxg files from Fireworks. This would solve the issue as they hit state would now only be shape of the state.
The other option is to do a hit test on the point where the user is clicking, get a list of the objects under that point using the getObjectsUnderPoint() method and then check to see if that point is in their alpha or not.
07-15-2011 10:09 AM
I was just going to use a Google maps screen shot of each State and then just embed the pictures into my mxml and build the USA. I could draw it but I'm such a bad artist and don't really have any graphics design knowledge at all. Yes, I would like to skin the States so that I can have a mouse_up, mouse_down and focus event too. So I'm kind of lost as to the best way to do all this. Is there any way I can free draw and basically trace over the States border to make a border container? I'm not familiar at all with the Graphics attribute at all so I am going to look more into that. Thanks for the help.
07-15-2011 10:14 AM
Thanks for the replies, What do you mean by alpha correct. The transparency? I don't have Flash Pro or any other software except for Photoshop, I'm a new brand new developer so, I'm also not familiar with getObjectUnderPoint() but I will look into it thanks a lot.
07-15-2011 10:29 AM
A couple of ideas come to mind. Although some are unlikely to be that useful, I'll describe them just in case they inspire a better approach.
With a single bitmap for the whole map, it would be a bit hard to identify exactly which state was touched unless you could use 50 different colors. If you were planning to have a single-color map with borders shown, it's possible that won't work out well, but if you were going for the four-color approach, it would work. Just tweak the colors so you actually use values that vary by one, as in 0xff0000 and 0xff0011. If those two were not adjacent nobody could ever tell they were different. You could also vary the alpha level a bit. Varying each of the four values (RGB and A) within a range of 3 already gives you 81 colors, which covers all the states and the differences may not be noticeable.
How does that help? Use a single event listener, find the coordinate of the click, and do a getPixel32() call to find the color. Map that back to the state with a simple lookup-table and you're done.
Personally, I would try a different approach that ultimately may have more usability. The problem with that above approach is that you're tied to the visual representation of the map... if someone hits a particular pixel that's in one state, they get that state even if a reasonable person would think they were actually trying to click elsewhere. For example, if you saw a tap at the extreme left end of the Florida Panhandle, would you think they were really trying to tap on Florida, or is it more likely they meant to hit Alabama?
To deal with that, I'd probably draw an "overlay panel" on top of the bitmap. I might do this outside the app, in a vector graphics program. I'd manually "outline" each state, probably using simple straight lines that only roughly match the borders of most states. I'd convert that to coordinates, and turn that into a list of outlines for a bunch of Sprites that would be drawn in a transparent layer above the bitmap. I think when you do that you have to use an alpha level of 1 out of 255, or it will not receive the mouse events, but I'm not sure. Each gets an event listener, or just use one for the whole containing panel and inspect event.target when you get the event, to identify which sprite was hit.
The latter approach has some advantages over the former (e.g. you could make a larger region around Rhode Island so people could actually hit it), but as described above it may be more work.
Anyway, two options, either of which could work well.
07-15-2011 10:45 AM
Thank you so much, VERY helpful. I never even though of an idea like you first one and like you said It might not be the best for this application but I feel like that method could be helpfully in other applications. I will look into vector programs and see what I can find. Yes, I will look into the Google Maps and see if I could use it if not I will either find a map of the US royalty free or draw my owe. Thanks again for all the help!!
07-15-2011 11:21 AM