Grabbing Image with Transparent Mask

[Brahmanathaswami]

I am working on a small routine that will later be incorporated into a 
kind of edu/game module.

This is a puzzle generating scenario where I am dynamically generating 
tiles from quotes for re-ordering by the player using this routine.

1) taking a field
2) stepping through each of the word
3) creating a button with the word as the label
4) then doing "import snapshow from btn "word_1"

*repeat* withx = 1tothenumberofwordsoffld"_Quote"
*set*theopaqueofthetemplateButtontofalse
*set*thetextFontofthetemplateButtonto"Arial Black"
*set*theshowborderofthetemplateButtontofalse
*set*thetextSizeofthetemplateButtontotTextSize*
set*theforegroundcolorofthetemplateButtontotRGB
*put*theformattedRectofwordx offld"_Quote"intotNextWordRect*
add*10toitem4oftNextWordRect *# needed to pick up descenders which are 
otherwise cut off*

*put*getLocation (tNextWordRect) intotWordLocation
*put*wordx offld"_Quote"intotNextWord
*create*ButtontNextWord
*put*heightofbtntNextWord intotHeight
*set*therectofbtntNextWord totNextWordRect**
*import*snapshotfrombuttontNextWord ofthiscd
*delete*buttontNextWord

-----
The tiles have a behavior set that includes  "grab me"

But... the image that results from the snapshot does not respond to 
mouseDown in areas where there is no letter.

So we have in image of the word (e.g.)

Learn

but the mouse must be touch some portion of any of the letters in order 
for it to be draggable.

i.e. the snap shot if being "faithful" to the shape of the letters and 
the opacity setting of the button, and a sort of transparent alpha 
channel mask has been made inside the image rect that will not send any 
mousedown message.

 From one angle, this behavior probably could be deemed "performed as 
expected."

Previously I had just use a snap shot of the formattedRect of the 
word... which included the background on the card, but this will not 
(and Peter says probably will *never, ever* work in HTML 5 and to try 
getting a snapshot from the object. I switch my snapshot code... which 
was really easy to change and YES! it works in HTML 5  BUT  I it's a 
"pain" for the user because she has to get her mouse right down on the 
letters to drag.

is there some other algorithm that I can use in the behavior so that if 
the user mouses down anywhere in the rect of the image, even on the 
transparent parts... that the mousedown/grab me message will be triggered?


the current background of the card uses a pattern and looks lovely, the 
other alternative is to either set the pattern of the background of the 
button to the same as the background of the card  OR to use ugly flat 
colors and make the background of the button opaque and use the same 
color... then there is not transparency and the whole image is 
responsive of the mousedown. But I would rather find the algorithm that 
will allow dragging the image regardless of the state of its background 
transparency.

it would also be super cool if we could set the blend level of just the 
background of any object (Actually there are many use cases for this 
besides this one)

Happy Pancha Ganapati Day 4!

Brahmanathaswami