masking an image |SOLVED|

[Johan_VH]

Hi all,

first up, you're going to hear a lot of me I'm afraid. I just started using LiveCode, and have 7 projects to finish by the end of august.... I'be been programming in Adobe (macromedia) Director and Flash since 1996. So I have a little bit of experience

So far I've succesfully managed to work with XML-files and sockets, that part was quite easy and having done this in Flash and Director previously, LiveCode develops waaaaaaaay faster. But now I have a problem.

The projects that I am making are interactive exhibits that will run on a windows or linux machine. They have a screensaver, when the user scans his RFID he or she is taken to the actual 'game'. So far so good. But the screensaver is giving me a problem right of the bat. The thing is, I am required to continue the look and feel of our other exhibits (I work at a Science museum) and those screensavers were made with flash.

An image (a logo) is shown on the left hand side of the screen, scrolls to the middle where it is masked so it gradually dissapears, and when it is completely masked it is changed by another image that scrolls to the left until completely visible, and scrolls back to the right to repeat the process. At the same time, on the right hand side of the screen, the title of the game is shown, it scrolls to the left at the same time as the image scrolls to the right, and dissapears behind a mask of its own in the middle.

So in short: 2 objects fly towards eachother, dissapear behind masks, and reappear from behing those masks. Rince, repeat. In Flash this was easy: just indicate a layer is a mask for another one and done. In Livecode, I cannot seem to find how to pull this off... Can anyone point me in the right direction?

thanks in advance,

Johan - Belgium

[Simon]

Hi Johan,
Do you have photoshop or gimp?

blend.png (32.45 KiB) Viewed 6574 times

With a transparent gradient you can make your mask, then all you need is "move".
Is that enough info?

Simon

[Mark]

Hoi Johan,

When we use the word "mask", usually an alpha mask is meant. I'm not sure that this is what you mean. Can you be more clear about the type of mask you want to use?

Hiding and showing a picture can be done in several ways. E.g. using the blendlevel:

Code: Select all

on hideImage theImageID
  repeat with x = 0 to 100 with messages
    set the blendLevel of img id theImageID to x
    wait 0 ticks with messages
  end repeat
  hide img is theImageID
end hideImage

and to show it again:

Code: Select all

on hideImage theImageID
  show img is theImageID
  repeat with x = 100 down to 0 with messages
    set the blendLevel of img id theImageID to x
    wait 0 ticks with messages
  end repeat
end hideImage

To move images simultaneously, you can use the move command. Here's an example demonstrating how to move two objects simultaneously.

This is the essential script from the example:

Code: Select all

on test
   lock moves
   // prepare fld 1
   put -1000,item 2 of the loc of fld 1 into myLoc1
   set the loc of fld 1 to myLoc1
   put the width of this cd + the width of fld 1 + 50,item 2 of the loc of fld 1 into myLoc2
   set the right of fld 1 to -1
   move fld 1 to myLoc2 in 1 second without waiting
   // prepare fld 2
   put item 1 of the loc of fld 2,-100 into myLoc3
   set the loc of fld 2 to myLoc3
   put item 1 of the loc of fld 2,the height of this cd + the height of fld 2 + 50 into myLoc4
   move fld 2 to myLoc4 in 1 second without waiting
   // go!
   unlock moves
end test

[Johan_VH]

Hi,

thanks for the swift reply! I already figured out how to use the move command. Although I'm not sure if I will need the 'lock moves', will I be able to still get event triggers from my xml socket that is listening on a port in the background?

But since a picture says more than a thousand words : dl*dot*dropboxusercontent*dot*com/u/25458608/IMG_5823*dot*gif
(since I get the message that my account does not have permission to post links, just copy and paste the above and put https:// in front of it and replace *dot* with actual dots...)

This is a quick and dirty video I took from an existing screensaver. So you can see that the logo's and texts seem to hide behind an invisible 'wall'. I can do this by using a rectangle and putting that on a higher layer for one side, but then I run into a problem for the other side of course... So using a mask like I do in Flash would be ideal...

[Mark]

Hi Johan,

This can be accomplished in LiveCode really simply. Just group a field (or an image or any other control) and set the lockLoc of the group to true. Use the move command to move the field from outside the group border to the area within the group border. The part of the image outside the group borders will be invisible.

You need two grouped controls. One that moves from beyond the left border of the group to the centre and back; and one that moves from beyond the right border of the group to the centre and back. Place the two groups in such a way that their left and right sides touch each other and put an image, like in your example, in the middle where the two groups touch.

Kind regards,

Mark

[Johan_VH]

Thank you!

That did the trick. Now I still have a problem with the lock moves, but that's for another thread.