masking an image |SOLVED|
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
masking an image |SOLVED|
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
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
Last edited by Johan_VH on Fri Jul 04, 2014 1:55 pm, edited 1 time in total.
-
- VIP Livecode Opensource Backer
- Posts: 3901
- Joined: Sat Mar 24, 2007 2:54 am
- Location: Palo Alto
Re: masking an image
Hi Johan,
Do you have photoshop or gimp? With a transparent gradient you can make your mask, then all you need is "move".
Is that enough info?
Simon
Do you have photoshop or gimp? With a transparent gradient you can make your mask, then all you need is "move".
Is that enough info?
Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!
Re: masking an image
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:
and to show it again:
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:
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
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
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
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode
Re: masking an image
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...
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...
Re: masking an image
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
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
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode
Re: masking an image
Thank you!
That did the trick. Now I still have a problem with the lock moves, but that's for another thread.
That did the trick. Now I still have a problem with the lock moves, but that's for another thread.