Grabbing Image with Transparent Mask

[Brahmanathaswami]

see:

http://dev.himalayanacademy.com/media/apps/unjumble/Unjumble1.0.1.livecode


1) why images?  that's was default when using "import snapshot" which 
was the only way I could figure out how to dynamically create tiles from 
text in a field that could be dynamically updated on the fly.  But since 
that failed in HTML5 and I had to "migrate" to using buttons... now I 
see I could probably just create the buttons and just stop there... 
taking snapshot out of the method completely might make it easier for 
enscripten --> HTML5

2) I did find the solution which was one of your options: I set the 
background of the button to the same ID as the pattern image used on the 
card itself and  then set the button template to opaque="true" now you 
can mousedown anywhere and it is draggable.

Caveat: assumes the pattern of the card is fine grained enough that one 
does not see any discontinuity across the tile and the card background 
or adjacent images: this the case  for this stack. But it could break if 
one had a background with more diverse swatches/swaths in the pattern.

  it works! and it also works as HTML4 in Firefox  (only Firefox)

(see: http://quality.livecode.com/show_bug.cgi?id=15900)

OK so this is working... (not complete in HTML5 but as an LC stack it 
works quite well) ans I just need to have a more robust framework 
(levels, rewards etc.)

NEXT: slicing up images... and since we eventually want this to work in 
html5 Peter says we *must* do snapshots from objects...

he also suggested just taking a snapshot of the entire field and then 
slicing it up... that should work for an image...but we have solve that one. 


BUT though I have yet to wrap my head around making tiles from a jpeg... 
I could have sworn there was a lesson an making a game of tiles from an 
image but I cannot find it today. The math to slice up an image is 
simple enough, but then for HTML5 you can only take snapshots of 
objects, so how to get a graphic object where background that is the 
image data of only the a small rect of the image: eg. the first tile 
might be. 0,0,100,100  for an image that is 500 X 500 (=25 tiles 100 X 
1000) I don't see a way to get image data for some portion only of an 
image...

inport snapshot from rect will fail in HTML 5...

Oh wait: perhaps  "crop" is our best tool (if it works in HTML5.. will 
have to test) again, avoid snapshot...

keep the image data in a prop, import repeated on a loop and move the 
crop around to get tiles...

If anyone has code for that already... please send it along...

any other ideas for making tiles from an image without using import 
snapshot from rect?

BR

Scott Rossi wrote:
> Hi Bramanatha:
>
> You don't say why you're using images as the tiles.  The easiest solution
> would be to use a different object, like a button or graphic as the tile.
>
> That said, if you're set on using imported images, the key to making them
> clickable is to make the background of the captured image 1% opaque (or
> the reverse: 99% transparent).  There are several ways to capture a
> snapshot of an object with opaque text and a translucent background:
>
> - Group your transparent button with an opaque graphic of the same size
> whose blendLevel is set to 99.  Set the margins of the group to 0.  Import 
>
> a snapshot of the group.
>
> - Make your button opaque, import or create an image that is 99%
> transparent, set that as the backPattern of the button, and import a
> snapshot of the button.
>
> - Use a graphic instead of a button. Apply a two color gradient to the
> graphic of the same color (i.e. white to white).  Set the opacity of each
> color stop of the gradient to 1%. Set the showName of the graphic to true
> and set the label of the graphic to your text.  Import a snapshot of the
> graphic.
>
> There are some code options you could use to determine if the mouse is
> within the rect of your draggable object, but if you make your object
> slightly opaque (or just use a different object) you should be able to use 
>
> "grab me" as you explain.
>
> Regards,
>
> Scott Rossi
> Creative Director
> Tactile Media, UX/UI Design