Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Developer
BrianMcPeek
Posts: 74
Registered: ‎02-09-2011
My Device: Torch 9850/64GB PlayBook
Accepted Solution

Custom Button as an Image

Hi all,

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!!

Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Custom Button as an Image

I'm guessing that you are drawing each state and its boundary. If each one of those are a Sprite or UIComponent that is added to the underlaying map, you can add a listener for a mouse down or moise click event. From there, the state drawing function can be updated to show a selected mode. Any Sprite or UIComponet that is being drawn in with the graphics attribute can respond to mouse events.
BlackBerry Development Advisor
jdolce
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: Custom Button as an Image

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.

 

 

New Developer
BrianMcPeek
Posts: 74
Registered: ‎02-09-2011
My Device: Torch 9850/64GB PlayBook

Re: Custom Button as an Image

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.

New Developer
BrianMcPeek
Posts: 74
Registered: ‎02-09-2011
My Device: Torch 9850/64GB PlayBook

Re: Custom Button as an Image

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.  

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Custom Button as an Image

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.

 

(By the way, make sure you check the terms of use (licensing) for whatever you do use.  I don't know whether you can just dump a Google maps snapshot into your app without violating some agreement.  Not saying you can't... I simply don't know.)


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
New Developer
BrianMcPeek
Posts: 74
Registered: ‎02-09-2011
My Device: Torch 9850/64GB PlayBook

Re: Custom Button as an Image

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!!

Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Custom Button as an Image

You also might want to Google 3rd party libraries that provide similar functionality of AS3 projects. I recall seeing some country level mapping libraries that allow you to select states.