Grabbing Image with Transparent Mask

[Scott Rossi]

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




On 12/24/15, 5:21 PM, "use-livecode on behalf of Brahmanathaswami"
<use-livecode-bounces at lists.runrev.com on behalf of brahma at hindu.org>
wrote:

>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
>
>_______________________________________________
>use-livecode mailing list
>use-livecode at lists.runrev.com
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:
>http://lists.runrev.com/mailman/listinfo/use-livecode