Gradients with transparency?

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Gradients with transparency?

Mark Waddingham via use-livecode
Is it possible to have a gradient with one of its end-points being transparent instead of a solid colour?

I want to overlay a graphic with a vertical gradient that blends from transparent to white to give the effect that the underlying content is fading out as you move down the screen. I’m able to achieve this effect using a black and white linear gradient in combination with the blendScreen ink but I need to be able to export the object (gradient plus underlying controls) as an image keeping the effect intact. When I export it now the ink effect is lost.

Terry...
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
On 2017-04-03 11:37, Terry Judd via use-livecode wrote:
> Is it possible to have a gradient with one of its end-points being
> transparent instead of a solid colour?

Yes the color values you specify for gradients can have an alpha
component. For example:

   0.5,255,0,0 -> at half way through the gradient, the color should be
solid red

   0.5,255,0,0,127 -> at half way through the gradient, the color should
be 50% transparent red.

Hope this helps!

Mark.

--
Mark Waddingham ~ [hidden email] ~ http://www.livecode.com/
LiveCode: Everyone can create apps

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
Thanks Mark, I'll try that out.

Regards,

Terry...

Sent from my iPad

> On 3 Apr 2017, at 8:30 pm, Mark Waddingham via use-livecode <[hidden email]> wrote:
>
>> On 2017-04-03 11:37, Terry Judd via use-livecode wrote:
>> Is it possible to have a gradient with one of its end-points being
>> transparent instead of a solid colour?
>
> Yes the color values you specify for gradients can have an alpha component. For example:
>
>  0.5,255,0,0 -> at half way through the gradient, the color should be solid red
>
>  0.5,255,0,0,127 -> at half way through the gradient, the color should be 50% transparent red.
>
> Hope this helps!
>
> Mark.
>
> --
> Mark Waddingham ~ [hidden email] ~ http://www.livecode.com/
> LiveCode: Everyone can create apps
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
In reply to this post by Mark Waddingham via use-livecode
Personally I'd fake it:

I'd set up a gradient with one end being transparent in my graphics
weapon of choice (GIMP) and save it as a PNG image,
import it and overlay it on top of your content, then make sure you
group it with your content before you do an

export from group "JazzyGradient" to file "JazzyGradient.png" as PNG

Richmond.

On 4/3/17 12:37 pm, Terry Judd via use-livecode wrote:

> Is it possible to have a gradient with one of its end-points being transparent instead of a solid colour?
>
> I want to overlay a graphic with a vertical gradient that blends from transparent to white to give the effect that the underlying content is fading out as you move down the screen. I’m able to achieve this effect using a black and white linear gradient in combination with the blendScreen ink but I need to be able to export the object (gradient plus underlying controls) as an image keeping the effect intact. When I export it now the ink effect is lost.
>
> Terry...
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
In reply to this post by Mark Waddingham via use-livecode
Would exporting a snapshot work well enough for your needs?

--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com



On April 3, 2017 4:39:07 AM Terry Judd via use-livecode
<[hidden email]> wrote:

> Is it possible to have a gradient with one of its end-points being
> transparent instead of a solid colour?
>
> I want to overlay a graphic with a vertical gradient that blends from
> transparent to white to give the effect that the underlying content is
> fading out as you move down the screen. I’m able to achieve this effect
> using a black and white linear gradient in combination with the blendScreen
> ink but I need to be able to export the object (gradient plus underlying
> controls) as an image keeping the effect intact. When I export it now the
> ink effect is lost.
>
> Terry...
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
The thing about using a graphic gradient (as opposed to an image) is the graphic is infinitely more flexible:
- variable size (no loss of quality when resizing)
- variable colors
- variable transparency

As far as exporting goes, last I checked, I don’t think ink effects export intact, even when using “with effects” in the snapshot syntax, so if you can’t get the visual result you want with the default ink, you may need to export a snapshot of the region of the card you need.  Maybe support for exporting inks has improved recently (though in my quick dp4 test, exporting to the desktop crashes).

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design



> On Apr 3, 2017, at 10:26 AM, J. Landman Gay via use-livecode <[hidden email]> wrote:
>
> Would exporting a snapshot work well enough for your needs?
>
> --
> Jacqueline Landman Gay         |     [hidden email]
> HyperActive Software           |     http://www.hyperactivesw.com
>
>
>
> On April 3, 2017 4:39:07 AM Terry Judd via use-livecode <[hidden email]> wrote:
>
>> Is it possible to have a gradient with one of its end-points being transparent instead of a solid colour?
>>
>> I want to overlay a graphic with a vertical gradient that blends from transparent to white to give the effect that the underlying content is fading out as you move down the screen. I’m able to achieve this effect using a black and white linear gradient in combination with the blendScreen ink but I need to be able to export the object (gradient plus underlying controls) as an image keeping the effect intact. When I export it now the ink effect is lost.
>>
>> Terry...
>> _______________________________________________
>> use-livecode mailing list
>> [hidden email]
>> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
In reply to this post by Mark Waddingham via use-livecode
Hi Terry,

Terry Judd wrote:
> I want to overlay a graphic with a vertical gradient
> that blends from transparent to white to give the effect
> that the underlying content is fading out as you move
> down the screen. I’m able to achieve this effect using a
> black and white linear gradient in combination with the
> blendScreen ink but I need to be able to export the object
> (gradient plus underlying controls) as an image keeping the
> effect intact. When I export it now the ink effect is lost.

In LiveCode, there is another way to do this:

1- Import an Image without Transparency... or
create a snapshot of a group, vector graphic,
field, or any other control inside the card.

2A- Import a transparent PNG... or
2B- Take a snapshot of a vector graphic that
contains a Green to transparent gradient

For example:

on mouseUp
import snapshot from grc 1 with effects
end mouseUp

3- Put that transparent PNG on top of
the image without transparency...

4- Run this script from a button
to create a mask from PNG...

on mouseUp
set the locklocation of img 1 to true
import snapshot from img 1
set the loc of last img to the loc of img 1
delete img 1
-- after deleting img 1 (an image without transparency),
-- then img 2 (a transparent png) becomes img 1

crop img 2 to the rect of img 1

set the width of img 1 to the width of img 2
set the height of img 1 to the height of img 2

set the alphadata of image 2 to the alphadata of image 1
end mouseUp

Download a stack from this forum thread:
http://forums.livecode.com/viewtopic.php?f=10&t=28352

 Alphamask from Transparent PNG.livecode.zip (1k)

Al
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gradients with transparency?

Mark Waddingham via use-livecode
Thanks for all the responses. I really wanted to use a graphic rather than importing an image for all the reasons that Scott mentioned. Mark’s method works of adding an alpha value to the ramp settings of the fillgradient property of the graphic works perfectly so there is a (relatively) simple solution available. I just need to make sure that I remember it for next time as well ;)

While we’re on gradient properties, does anyone else ever have problems getting the backgroundColor gradient setting window to show up? Unless you have a pretty big screen (I’m working on a 13 inch Macbook Air) the properties palette is so wide that the settings window can open off screen, making it inaccessible. If you close the properties palette, open it again and move it so the right edge is clear of the right edge of the screen then you can usually get the settings window to show.  But not always.

Terry...

On 4/04/2017 8:41 am, "use-livecode on behalf of Alejandro Tejada via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    Hi Terry,
   
    Terry Judd wrote:
    > I want to overlay a graphic with a vertical gradient
    > that blends from transparent to white to give the effect
    > that the underlying content is fading out as you move
    > down the screen. I’m able to achieve this effect using a
    > black and white linear gradient in combination with the
    > blendScreen ink but I need to be able to export the object
    > (gradient plus underlying controls) as an image keeping the
    > effect intact. When I export it now the ink effect is lost.
   
    In LiveCode, there is another way to do this:
   
    1- Import an Image without Transparency... or
    create a snapshot of a group, vector graphic,
    field, or any other control inside the card.
   
    2A- Import a transparent PNG... or
    2B- Take a snapshot of a vector graphic that
    contains a Green to transparent gradient
   
    For example:
   
    on mouseUp
    import snapshot from grc 1 with effects
    end mouseUp
   
    3- Put that transparent PNG on top of
    the image without transparency...
   
    4- Run this script from a button
    to create a mask from PNG...
   
    on mouseUp
    set the locklocation of img 1 to true
    import snapshot from img 1
    set the loc of last img to the loc of img 1
    delete img 1
    -- after deleting img 1 (an image without transparency),
    -- then img 2 (a transparent png) becomes img 1
   
    crop img 2 to the rect of img 1
   
    set the width of img 1 to the width of img 2
    set the height of img 1 to the height of img 2
   
    set the alphadata of image 2 to the alphadata of image 1
    end mouseUp
   
    Download a stack from this forum thread:
    http://forums.livecode.com/viewtopic.php?f=10&t=28352
   
     Alphamask from Transparent http://PNG.livecode.zip (1k)
   
    Al
    _______________________________________________
    use-livecode mailing list
    [hidden email]
    Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
    http://lists.runrev.com/mailman/listinfo/use-livecode
   



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Loading...