How to place a transparent PNG image over card image?
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
-
- Posts: 10
- Joined: Fri Nov 16, 2018 2:01 am
How to place a transparent PNG image over card image?
All,
I have a substack of cards, 1024, x 570. It's labeled SubStackCards.
I have a second substack of cards filled with frames (transparent backgrounds), called SubStackFrames.
The frames were built in PSD and exported as transparent PNGs.
I'm trying to place a card frame from the substackFrames over the top of a card from SubStackCards.
Again, both separate sub stacks.
Resulting effect: a picture frame on top of a bitmapped image.
Can't seem to find a method that works. Tried changing ink on both stacks, but to no avail.
Is it impossible to place a transparent card over a non-transparent image in LC? I read somewhere that LC does not support card-over-card, or put another way, image-over-image on the same card. It seems LC doesn't care if the the image is transparent or not, it simply refuses to accept two images on the same card. Or am I missing something here?
TIA,
John
I have a substack of cards, 1024, x 570. It's labeled SubStackCards.
I have a second substack of cards filled with frames (transparent backgrounds), called SubStackFrames.
The frames were built in PSD and exported as transparent PNGs.
I'm trying to place a card frame from the substackFrames over the top of a card from SubStackCards.
Again, both separate sub stacks.
Resulting effect: a picture frame on top of a bitmapped image.
Can't seem to find a method that works. Tried changing ink on both stacks, but to no avail.
Is it impossible to place a transparent card over a non-transparent image in LC? I read somewhere that LC does not support card-over-card, or put another way, image-over-image on the same card. It seems LC doesn't care if the the image is transparent or not, it simply refuses to accept two images on the same card. Or am I missing something here?
TIA,
John
Re: How to place a transparent PNG image over card image?
Hi John,
See screenshot, transparent PNG with dropshadow over a JPEG... Best
Klaus
you MUST be missing something here, I do this all the time, no problems!?it simply refuses to accept two images on the same card. Or am I missing something here?
See screenshot, transparent PNG with dropshadow over a JPEG... Best
Klaus
-
- Posts: 10
- Joined: Fri Nov 16, 2018 2:01 am
Re: How to place a transparent PNG image over card image?
Krause,
How did you do that?
John
How did you do that?
John
Re: How to place a transparent PNG image over card image?
Oh come on, if you aren't able to spell just copy/paste it!
Probably the same way as you do/did:
1. Create a stack
2. Import a JPG image
3. Import a transparent PNG image
4. That's it
-
- Posts: 10
- Joined: Fri Nov 16, 2018 2:01 am
Re: How to place a transparent PNG image over card image?
Klaus,
I am referring to runtime, not author mode. I'm looking for the code, not condescension. It should be obvious from my initial question that I am referring to runtime. Of course it's possible to place image over image in author mode. But it is not obvious on how to do that with code at runtime. Clearly, I have come to the wrong place. I'll look elsewhere for the answer, hopefully from somebody who knows how to teach, with respect.
I am referring to runtime, not author mode. I'm looking for the code, not condescension. It should be obvious from my initial question that I am referring to runtime. Of course it's possible to place image over image in author mode. But it is not obvious on how to do that with code at runtime. Clearly, I have come to the wrong place. I'll look elsewhere for the answer, hopefully from somebody who knows how to teach, with respect.
Re: How to place a transparent PNG image over card image?
How are you "placing" the two images?
I'm going to guess that your problem is something as simple as having the images in the wrong layer order.
Tryif that isn't it, then I don't understand what it is that is wrong in your stack. But (as you can see from Klausimausi's sampler) it is perfectly possible and simple to have multiple overlaying images.
I'm going to guess that your problem is something as simple as having the images in the wrong layer order.
Try
Code: Select all
set the layer of image "transparent frame image" to top
Re: How to place a transparent PNG image over card image?
Being condescending was really not intended!
Should be, but wasn't!TooManyNotes wrote: ↑Fri Dec 14, 2018 8:44 pmIt should be obvious from my initial question that I am referring to runtime.
As SparkOut wrote, set the correct layer of the images.TooManyNotes wrote: ↑Fri Dec 14, 2018 8:44 pmBut it is not obvious on how to do that with code at runtime.
Oh my, oh my, I am really sorry, Cpt. Sensible!TooManyNotes wrote: ↑Fri Dec 14, 2018 8:44 pmClearly, I have come to the wrong place. I'll look elsewhere for the answer, hopefully from somebody who knows how to teach, with respect.
And this from a guy who doesn't care to visit his postings again after receiving helpful answers, and maybe leave a little thank you...
Re: How to place a transparent PNG image over card image?
@TooManyNotes - I suspect there was just a complete mis-interpretation on your part in regards to Klaus's comments, just as there is a bit of a misunderstanding of what exactly you are looking to do. While this is no ones fault in particular, it is sometimes a good idea to take a step back, maybe take a breath or two, and then try again.
Having read (and re-read) the posts thus far, this is my understanding of what your asking. If it is not correct, feel free to chime back in again with clarification.
I set this up as closely as I could to what you initially stated, i.e.
I then put 2 buttons on the card, however you may not need buttons. These are just to clear the card, then reapply the images.
The code in button 'cmdPic' is -
The code for 'cmdClear' just sets the image objects to empty -
Here is the end result, running from a standalone file -
The code above is very much longhand, it can be shortened considerably, but it should give you an idea of how to start, I hope.
Edit - I forgot to mention this as well, if your 'Cards' or 'Frames' are not all the same size, you *can* make them display the full size of the image by setting the lockLoc of the image object under 'size and position'. You can also relayer the controls the way you need them in that panel as well, using the arrows at the bottom.
Having read (and re-read) the posts thus far, this is my understanding of what your asking. If it is not correct, feel free to chime back in again with clarification.
I set this up as closely as I could to what you initially stated, i.e.
Here is what I worked up in the IDE to match your descriptions, sizes are different - As mentioned above, the order you put things onto the main card count. To facilitate the pictures in the order they are to be displayed, I put 2 empty images on frmMain, named "imgCard" and "imgFrame". 'imgCard needs to be the first image object put on the card, followed by 'imgFrame' if you follow this example.TooManyNotes wrote: ↑Fri Dec 14, 2018 7:43 pmI have a substack of cards, 1024, x 570. It's labeled SubStackCards.
I have a second substack of cards filled with frames (transparent backgrounds), called SubStackFrames.
<sic>
I'm trying to place a card frame from the substackFrames over the top of a card from SubStackCards.
I then put 2 buttons on the card, however you may not need buttons. These are just to clear the card, then reapply the images.
The code in button 'cmdPic' is -
Code: Select all
on mouseUp
put the text of image 1 of card 1 of stack "subStackCards" into image "imgCard"
put the text of image 1 of card 1 of stack "subStackFrames" into image "ImgFrame"
end mouseUp
Code: Select all
on mouseUp
put "" into image "imgCard"; put "" into image "imgFrame"
end mouseUp
Edit - I forgot to mention this as well, if your 'Cards' or 'Frames' are not all the same size, you *can* make them display the full size of the image by setting the lockLoc of the image object under 'size and position'. You can also relayer the controls the way you need them in that panel as well, using the arrows at the bottom.
-
- VIP Livecode Opensource Backer
- Posts: 7227
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: How to place a transparent PNG image over card image?
Cards are like the walls in your house, they are structural and only one can be viewed at a time. The objects on the card are more flexible and can be overlapped.I read somewhere that LC does not support card-over-card, or put another way, image-over-image on the same card.
This should work in both the IDE and a standalone:
Code: Select all
copy image "frame 1" of card 1 of stack "substackFrames" to this card
set the loc of last Image to the loc of image 1
If you need to clear the card later you'd do:
Code: Select all
delete image "frame 1"
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: How to place a transparent PNG image over card image?
Yet another method:
Set the windowshape of a temporary stack from your main stack.
Make for this a button in your main stack with the following script.
All you have to adjust is
• the frame identification (you could name them) and
• set the wished image/card under the frame.
With that you can also use frames that have a non-rectangular outer opaque border. As the attachment (transparency is in the forum posts displayed as white).
Set the windowshape of a temporary stack from your main stack.
Make for this a button in your main stack with the following script.
All you have to adjust is
• the frame identification (you could name them) and
• set the wished image/card under the frame.
Code: Select all
local t="tmp", sf="subStackFrames", sc="subStackCards"
on mouseUp
lock screen; lock messages
if there is a stack t then delete stack t
create stack t
set rect of stack t to 0,0,1024,575
copy img 1 of card 1 of stack sf to stack t -- the frame
set topleft of img 1 of card 1 of stack t to 0,0
set windowshape of stack t to the short id of img 1 of stack t
set loc of stack t to the loc of stack sc -- the image
end mouseUp
shiftLock happens