Page 1 of 1

Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 10:33 am
by doobox
Hi there,

Situation : I have a "bubble image" virtually transparent, like a realistic bubble. I have this image as the icon of a button, floating up the screen.
When the user touches the bubble it pop's (i swap the icon for a popped bubble).

Problem : It works kind of fine, on mouseDown i get the name of the target and handle the pop. But bubbles are round and buttons are square, so you are able to pop the bubble, when touching outside the bubble, but within the button.

Quandry : I just went ahead and changed everything... I abandoned buttons in favor of just the bubble images, thinking, well, you cant trigger my handler unless you actually touch within the pixels of the bubble.

Problem got worse :-)... I forgot you cant get a message when touching pixels that are less than a certain transparency. So that did not work. There were only a couple of areas of the bubble image that would trigger a correct touch, where the transparency is slightly higher.

So my hope of a solution is : ..
Hopefully there is a way to do something like what intersect does. with the intersect function you can specify "pixels" or "opaque pixels"
So is there any way i could do something in this handler, that will only continue if the touch is on "pixels" of the button "bubble1"

Code: Select all

on pixelsOfButtonSelected
 // don't know how to test this though
end pixelsOfButtonSelected


on mouseDown
   put the short name of the target into tTarget --tTargetBubble
   if tTarget contains "bubble" then
    if pixelsOfButtonSelected then -- maybe i could do something like this handling the detection in another handler
      put char -1 of tTarget into tBubbleNumber
      clone group ("bubbleGroup" & tBubbleNumber)
      set the name of the last group to "poppedgroup"
      set the name of the button ("bubble" &  tBubbleNumber) of group "poppedgroup" to "poppedBubble"
      put the text of field ("sumField" & tBubbleNumber) of group "poppedgroup" & comma after field "displaySum"
      set the visible of field ("sumField" & tBubbleNumber) of group "poppedgroup" to false 
      loadIcon "poppedBubble", "bubblepop"
      delete variable sBubbleNames[("bubbleGroup" & tBubbleNumber)]
      delete group ("bubbleGroup" & tBubbleNumber)
      wait 50 milliseconds with messages
      delete group "poppedgroup"
      if the keys of sBubbleNames is empty then
         evaluateTheSum
      end if
    end if
   end if 
end mouseDown

Re: Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 11:30 am
by jmburnod
Hi Doobox,
I am not sur i have understood everything, maybe "mousecolor" is a way.
Something like that

Code: Select all

on mouseUp
   if the mousecolor <> 198,30,4 then exit mouseup
   beep
end mouseUp
Best regards

Jean-Marc

Re: Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 11:58 am
by doobox
Interesting idea, that could work with some careful setting up.

I have opted to add a round graphic to the bubble group, with the blending turned right down. And then say on 3 of the mouse handler :

Code: Select all

on mouseDown
   put the short name of the target into tTarget --tTargetBubble
   if tTarget contains "bubble" then
    if not(within(graphic "mouseCatcher",the clickLoc)) then
         exit mouseDown
    end if
      put the mousecolor into field "test"
      set the backgroundColor of field "test" to the mousecolor
      put char -1 of tTarget into tBubbleNumber
      clone group ("bubbleGroup" & tBubbleNumber)
      set the name of the last group to "poppedgroup"
// and so on and so on and so on
Not so happy with this though, as i now have yet another object withing the group to move at 50 frames a second. With maybe upto 10 groups on screen at any given time.
Each bubble group now contains ; "the group its self", "a button with the bubble image", "a text field", "and now a graphic"
All of which need to be moved when the group moves on updateScreen handler every 20 milliseconds.
I can definitely see a slow down when the screen has more than a half a dozen bubbles on it at once.

Re: Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 12:27 pm
by jmburnod
I have opted to add a round graphic to the bubble group
Why not a freehand curve graphic with the points of the bubble ?

Re: Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 12:44 pm
by doobox
Why would that be better than a round graphic..?
My first thoughts are, scripting a freehand curve to the points of the bubble, would just be producing a round graphic..!

Or are you suggesting scripting a freehand curve to the points of the bubble at the last millisecond, just before the check to see of the mouseloc is within the freehand curve.
I am not sure about the speed of that, myself. Nor in fact, how i would go about scripting the curve to the outer edge of the bubble image.

Made me realize though.. I could just add my cloned round graphic to the group at the last millisecond just before i do the check, and then delete it.
This way i am not moving all those extra graphics within the groups on screenUpdate.

Begs the question though.. Am i in fact assuming correctly, that moving a group that contains multiple objects is slower than moving a group that contains just one object.
Seems logical, but this may not be the case.

Re: Make button behave like image (on touch)

Posted: Sun Aug 05, 2012 12:48 pm
by jmburnod
My first thoughts are, scripting a freehand curve to the points of the bubble, would just be producing a round graphic..!
Ok your bubble are regular circle

Re: Make button behave like image (on touch)

Posted: Tue Aug 07, 2012 4:09 am
by scotttyang
You can do this....in photoshop, create your bubble. Then give it a big shadow effect and set the opacity of the shadow to 1. You cant see the shadow, but you can click on it....or an inner glow to cover the area you want to click. Save for web as png with transparency!

Re: Make button behave like image (on touch)

Posted: Tue Aug 07, 2012 8:20 am
by doobox
scotttyang wrote:You can do this....in photoshop, create your bubble. Then give it a big shadow effect and set the opacity of the shadow to 1. You cant see the shadow, but you can click on it....or an inner glow to cover the area you want to click. Save for web as png with transparency!

That's the opposite of what i was trying to do. I needed the area outside the circle not to respond to a click.
I ended up achieving this with good results using a round graphic inside the bubble group (blend level very low), and testing for within that graphic on mouseDown.
It also had spinoff bonus of being able to pragmatically change the blend and color of the graphic at any time to give the bubble some interesting effects :-)