You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Ben Smeets <be...@bensmeets.com> on 2013/09/01 00:20:02 UTC
RE: Limit Blendmode to 1 layer
I know Maurice, I think the principle you showed me is indeed the only
way to go. Will try and apply some updateDisplayList in combination with
some Rectangle calculations (join/union/intersect/etc.) to see if I can
get it working while keeping it performant. Maybe it's less hard then I
think.
The custom shaders were a no-go like you said. Did a quick test but the
performance was way off. Too bad.
Cheers, Ben
Maurice Amsellem schreef op 2013-08-31 22:43:
> Ben, the code I sent you was simplified on purpose to help understanding.
> Of course you could create a "MaskableBitmap" component that would embed the masking rect.
>
> Moreover, masking is actually also a blending technique, using binary AND operator on two sources.
>
> Also, if you say that the colorizing could apply to a potentially huge number of images, I would suggest not to use custom shaders, as they will never be as fast as native FlashPlayer (blendmode or masking)
>
> Maybe there is some kind of magical combination of blendmodes that could do the same, but I can't help you on that. Let me know if you find something.
>
> Regards,
>
> Maurice
>
> -----Message d'origine-----
> De : Ben Smeets [mailto:ben@okapion.com]
> Envoyé : samedi 31 août 2013 22:11
> À : users@flex.apache.org
> Objet : Re: Limit Blendmode to 1 layer
>
> Thanks a lot Maurice, appreciate the help. I see what you mean, and although it could work all right, it would mean a lot of manual calculations. Doable, but I was hoping for something using blendmodes. The extra challenge I may not have mentioned before, is that it's not just 1 image that is placed, but theoretically unlimited. So that would mean creating the rects for each image separately. Doable though, so I'm keeping it in mind. Thanks!
>
> Ben
>
> On 31 aug. 2013, at 17:52, Maurice Amsellem <ma...@systar.com> wrote:
> Hi Ben, Back from vacation, I couldn't resist trying "for real" the tips I sent you. So here is a sample tested app that does what you need, in pure mxml: The file "Koala.jpg" is a sample 200x200 jpeg. The image is not draggable of course, but it's correctly masked (0.3 red colorized) outside of the central white area. Try it and let me know. <?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009 [1]" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray" > <s:Rect id="areaRect" left="100" top="100" right="100" bottom="100"> <s:fill> <s:SolidColor color="white" alpha="1"/> </s:fill> </s:Rect> <s:Group id="offMaskGrp" left="0" top="0" bottom="0" right="0"> <s:Rect id="leftStrip" left="0" top="0" bottom="0" width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="topStrip" left="100" top="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="rightStrip" top="0" bottom="0" right=
"0"
width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="bottomStrip" left="100" bottom="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <s:Group id="draggable" left="50" top="50"> <s:BitmapImage source="@Embed('/embedded/Koala.jpg')" /> <s:Rect id="offRect" left="0" top="0" right="0" bottom="0" mask="{offMaskGrp}"> <s:fill> <s:SolidColor color="red" alpha="0.3"/> </s:fill> </s:Rect> </s:Group> </s:Application> Regards, Maurice -----Message d'origine----- De : Ben Smeets [mailto:ben@okapion.com] Envoyé : mardi 27 août 2013 09:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Will try to come up with something working using your tips. If I do, I'll let you know. @Alex: I tried the Pbj shader as well, but it completely kills performance :( (as in, macbook lifting off into space with it's fan). Ben On 27 aug. 2013, at 09:15, Maurice Amsellem <ma...@systar.com> wrote
: Option
1) is not such complex math. You can use globalTolLocal and localToGlobal to help for conversions. Option2) you can get both red and alpha, because the hole only acts as a mask, and it´s the overlay rect that has the red fill with alpha. I am in vacation, without my pc, so i can't send you any code that i have tested until next week... Regards Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 23:08 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Option 1 is something I thought about. Doable, but complex math. It's what triggered me to find help for a different approach though. Option 2 is the road I'm at now. I have the hole. The challenge is, that I would like the parts outside the "shape layer" to be red instead of alpha. So masking (not sure) is not something that'll work. That's how I got to the blendmodes. E.g. making the layer on top (with the hole inside) red and blended. The
only
thing I'm still left with, is that that top layer will also colorize everything below the image (the thing I only need to be colorized). Either way what we come up with, It already helpes knowing that my current approach is not entirely crazy, tnx :) Ben On 26 aug. 2013, at 22:03, Maurice Amsellem <ma...@systar.com> wrote: Ok, i think i understood: the part of the dragged image that gets off the square dragging area needs to be colorized. Assuming my understanding is correct, I would do it either of two ways: 1) programmatic While the image is dragged around, determine the area that is off bounds and draw a semi-transparent rectangle ( in updateDisplayList) in. That area 2) mxml Add an overlay rect the size and position of the dragged image, with alpha fill ( put them in the same s:group) Create an area that corresponds to the off-bounds area, ie the background rectangle with a hole corresponding to the square white rectangle, and use it as a mask ( mask property)
to the
overlay rectangle. That way , the overlay rectangle will be drawn only where the mask is ON. However, perfromance may be impacted when using large masks, so i definitely prefer the programmatic way. Hope this helps Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 20:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Sure, I'll try to explain it :) This is what I currently have: - Top layer (blendMode=x) - Draggable object layer (image) - Shape layer (square white rectangle) - Background layer (plain gray) The Top layer is draggable. The goal is to make every part of Draggable layer which is dragged outside of the shape layer below it, colorized (or something visual, while retaining a bit of the visual aspect, which is why I got to overlaying a blended layer.). Most issues have been tackled. Only thing left now is that by applying a blendMode, the gray background get's part of that blend effect (
color)
as well. So I through the trick would be to limit the blendmode to only the Dragable Object Layer. Don't mean to spam the list, if this is not exactly Flex related. Any tips appreciated. Ben On 26 aug. 2013, at 19:29, Maurice Amsellem <ma...@systar.com> wrote: For me, colorTrasform applies to the whole layer, no masking is possible. Maybe if you can describe in more detail what you are trying to do, someeone can help... Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 19:23 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Didn't think of that one, nice. Extra challenge though, is that i can't transform the entire layer. Just the part that the top layer is over (or is that possible with colortransform as well)? Op 26 aug. 2013 om 17:35 heeft Maurice Amsellem <ma...@systar.com> het volgende geschreven: If the purpose of the blending layer is to apply an coloring / lighting eff
ect to
the layer below, they applying a color transform to the layer below instead (colorTransform property) could be what you need. Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 15:58 À : users@flex.apache.org Objet : Limit Blendmode to 1 layer Hi, Anybody know if it is possible to limit the effect of a Blended layer to only the layer below it (e.g.). My app has a dark background, the top layer which is blending is now blending over all layers, including the background. I am trying to let it blend over 1 specific layer below it without affecting anything else. Tnx, Ben
Links:
------
[1] http://ns.adobe.com/mxml/2009
Re: Limit Blendmode to 1 layer
Posted by Harbs <ha...@gmail.com>.
Sorry, but I wrote that backwards. First you draw the outside rect and then the inside one…
On Sep 1, 2013, at 2:39 PM, Harbs wrote:
> The drawing is not very difficult. You'd do something like this:
>
> //given four points for your inside rectangle and assuming that your outside one is the full width and height of the object
> g.clear();
> g.beginFill(0x6600066,0.5);// make it whatever color you want...
> g.moveTo(p1.x,p1.y)
> g.lineTo(p2.x,p2.y);
> g.lineTo(p3.x,p3.y);
> g.lineTo(p4.x,p4.y);
> g.lineTo(p1.x,p1.y);
> // draw your outside rect
> g.drawRect(0,0,width,height);
> g.endFill();
>
> On Sep 1, 2013, at 2:34 PM, Harbs wrote:
>
>> Do you mean something like the image cropping mechanism here?
>> https://printui.com/web-to-print-demo-step-1.php
>>
>> It works with a rectangle mask with a hole punched out of it. It's redrawn every time updateDisplayList is called. As you can see, performance is fine…
>>
>> Harbs
>>
>> On Sep 1, 2013, at 1:20 AM, Ben Smeets wrote:
>>
>>>
>>>
>>> I know Maurice, I think the principle you showed me is indeed the only
>>> way to go. Will try and apply some updateDisplayList in combination with
>>> some Rectangle calculations (join/union/intersect/etc.) to see if I can
>>> get it working while keeping it performant. Maybe it's less hard then I
>>> think.
>>>
>>> The custom shaders were a no-go like you said. Did a quick test but the
>>> performance was way off. Too bad.
>>>
>>> Cheers, Ben
>>>
>>> Maurice Amsellem schreef op 2013-08-31 22:43:
>>>
>>>> Ben, the code I sent you was simplified on purpose to help understanding.
>>>> Of course you could create a "MaskableBitmap" component that would embed the masking rect.
>>>>
>>>> Moreover, masking is actually also a blending technique, using binary AND operator on two sources.
>>>>
>>>> Also, if you say that the colorizing could apply to a potentially huge number of images, I would suggest not to use custom shaders, as they will never be as fast as native FlashPlayer (blendmode or masking)
>>>>
>>>> Maybe there is some kind of magical combination of blendmodes that could do the same, but I can't help you on that. Let me know if you find something.
>>>>
>>>> Regards,
>>>>
>>>> Maurice
>>>>
>>>> -----Message d'origine-----
>>>> De : Ben Smeets [mailto:ben@okapion.com]
>>>> Envoyé : samedi 31 août 2013 22:11
>>>> À : users@flex.apache.org
>>>> Objet : Re: Limit Blendmode to 1 layer
>>>>
>>>> Thanks a lot Maurice, appreciate the help. I see what you mean, and although it could work all right, it would mean a lot of manual calculations. Doable, but I was hoping for something using blendmodes. The extra challenge I may not have mentioned before, is that it's not just 1 image that is placed, but theoretically unlimited. So that would mean creating the rects for each image separately. Doable though, so I'm keeping it in mind. Thanks!
>>>>
>>>> Ben
>>>>
>>>> On 31 aug. 2013, at 17:52, Maurice Amsellem <ma...@systar.com> wrote:
>>>> Hi Ben, Back from vacation, I couldn't resist trying "for real" the tips I sent you. So here is a sample tested app that does what you need, in pure mxml: The file "Koala.jpg" is a sample 200x200 jpeg. The image is not draggable of course, but it's correctly masked (0.3 red colorized) outside of the central white area. Try it and let me know. <?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009 [1]" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray" > <s:Rect id="areaRect" left="100" top="100" right="100" bottom="100"> <s:fill> <s:SolidColor color="white" alpha="1"/> </s:fill> </s:Rect> <s:Group id="offMaskGrp" left="0" top="0" bottom="0" right="0"> <s:Rect id="leftStrip" left="0" top="0" bottom="0" width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="topStrip" left="100" top="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="rightStrip" top="0" bottom="0" right=
>>> "0"
>>> width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="bottomStrip" left="100" bottom="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <s:Group id="draggable" left="50" top="50"> <s:BitmapImage source="@Embed('/embedded/Koala.jpg')" /> <s:Rect id="offRect" left="0" top="0" right="0" bottom="0" mask="{offMaskGrp}"> <s:fill> <s:SolidColor color="red" alpha="0.3"/> </s:fill> </s:Rect> </s:Group> </s:Application> Regards, Maurice -----Message d'origine----- De : Ben Smeets [mailto:ben@okapion.com] Envoyé : mardi 27 août 2013 09:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Will try to come up with something working using your tips. If I do, I'll let you know. @Alex: I tried the Pbj shader as well, but it completely kills performance :( (as in, macbook lifting off into space with it's fan). Ben On 27 aug. 2013, at 09:15, Maurice Amsellem <ma...@systar.com> wrote
>>> : Option
>>> 1) is not such complex math. You can use globalTolLocal and localToGlobal to help for conversions. Option2) you can get both red and alpha, because the hole only acts as a mask, and it´s the overlay rect that has the red fill with alpha. I am in vacation, without my pc, so i can't send you any code that i have tested until next week... Regards Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 23:08 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Option 1 is something I thought about. Doable, but complex math. It's what triggered me to find help for a different approach though. Option 2 is the road I'm at now. I have the hole. The challenge is, that I would like the parts outside the "shape layer" to be red instead of alpha. So masking (not sure) is not something that'll work. That's how I got to the blendmodes. E.g. making the layer on top (with the hole inside) red and blended. The
>>> only
>>> thing I'm still left with, is that that top layer will also colorize everything below the image (the thing I only need to be colorized). Either way what we come up with, It already helpes knowing that my current approach is not entirely crazy, tnx :) Ben On 26 aug. 2013, at 22:03, Maurice Amsellem <ma...@systar.com> wrote: Ok, i think i understood: the part of the dragged image that gets off the square dragging area needs to be colorized. Assuming my understanding is correct, I would do it either of two ways: 1) programmatic While the image is dragged around, determine the area that is off bounds and draw a semi-transparent rectangle ( in updateDisplayList) in. That area 2) mxml Add an overlay rect the size and position of the dragged image, with alpha fill ( put them in the same s:group) Create an area that corresponds to the off-bounds area, ie the background rectangle with a hole corresponding to the square white rectangle, and use it as a mask ( mask property)
>>> to the
>>> overlay rectangle. That way , the overlay rectangle will be drawn only where the mask is ON. However, perfromance may be impacted when using large masks, so i definitely prefer the programmatic way. Hope this helps Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 20:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Sure, I'll try to explain it :) This is what I currently have: - Top layer (blendMode=x) - Draggable object layer (image) - Shape layer (square white rectangle) - Background layer (plain gray) The Top layer is draggable. The goal is to make every part of Draggable layer which is dragged outside of the shape layer below it, colorized (or something visual, while retaining a bit of the visual aspect, which is why I got to overlaying a blended layer.). Most issues have been tackled. Only thing left now is that by applying a blendMode, the gray background get's part of that blend effect (
>>> color)
>>> as well. So I through the trick would be to limit the blendmode to only the Dragable Object Layer. Don't mean to spam the list, if this is not exactly Flex related. Any tips appreciated. Ben On 26 aug. 2013, at 19:29, Maurice Amsellem <ma...@systar.com> wrote: For me, colorTrasform applies to the whole layer, no masking is possible. Maybe if you can describe in more detail what you are trying to do, someeone can help... Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 19:23 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Didn't think of that one, nice. Extra challenge though, is that i can't transform the entire layer. Just the part that the top layer is over (or is that possible with colortransform as well)? Op 26 aug. 2013 om 17:35 heeft Maurice Amsellem <ma...@systar.com> het volgende geschreven: If the purpose of the blending layer is to apply an coloring / lighting eff
>>> ect to
>>> the layer below, they applying a color transform to the layer below instead (colorTransform property) could be what you need. Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 15:58 À : users@flex.apache.org Objet : Limit Blendmode to 1 layer Hi, Anybody know if it is possible to limit the effect of a Blended layer to only the layer below it (e.g.). My app has a dark background, the top layer which is blending is now blending over all layers, including the background. I am trying to let it blend over 1 specific layer below it without affecting anything else. Tnx, Ben
>>>
>>>
>>>
>>> Links:
>>> ------
>>> [1] http://ns.adobe.com/mxml/2009
>>
>
Re: Limit Blendmode to 1 layer
Posted by Harbs <ha...@gmail.com>.
The drawing is not very difficult. You'd do something like this:
//given four points for your inside rectangle and assuming that your outside one is the full width and height of the object
g.clear();
g.beginFill(0x6600066,0.5);// make it whatever color you want...
g.moveTo(p1.x,p1.y)
g.lineTo(p2.x,p2.y);
g.lineTo(p3.x,p3.y);
g.lineTo(p4.x,p4.y);
g.lineTo(p1.x,p1.y);
// draw your outside rect
g.drawRect(0,0,width,height);
g.endFill();
On Sep 1, 2013, at 2:34 PM, Harbs wrote:
> Do you mean something like the image cropping mechanism here?
> https://printui.com/web-to-print-demo-step-1.php
>
> It works with a rectangle mask with a hole punched out of it. It's redrawn every time updateDisplayList is called. As you can see, performance is fine…
>
> Harbs
>
> On Sep 1, 2013, at 1:20 AM, Ben Smeets wrote:
>
>>
>>
>> I know Maurice, I think the principle you showed me is indeed the only
>> way to go. Will try and apply some updateDisplayList in combination with
>> some Rectangle calculations (join/union/intersect/etc.) to see if I can
>> get it working while keeping it performant. Maybe it's less hard then I
>> think.
>>
>> The custom shaders were a no-go like you said. Did a quick test but the
>> performance was way off. Too bad.
>>
>> Cheers, Ben
>>
>> Maurice Amsellem schreef op 2013-08-31 22:43:
>>
>>> Ben, the code I sent you was simplified on purpose to help understanding.
>>> Of course you could create a "MaskableBitmap" component that would embed the masking rect.
>>>
>>> Moreover, masking is actually also a blending technique, using binary AND operator on two sources.
>>>
>>> Also, if you say that the colorizing could apply to a potentially huge number of images, I would suggest not to use custom shaders, as they will never be as fast as native FlashPlayer (blendmode or masking)
>>>
>>> Maybe there is some kind of magical combination of blendmodes that could do the same, but I can't help you on that. Let me know if you find something.
>>>
>>> Regards,
>>>
>>> Maurice
>>>
>>> -----Message d'origine-----
>>> De : Ben Smeets [mailto:ben@okapion.com]
>>> Envoyé : samedi 31 août 2013 22:11
>>> À : users@flex.apache.org
>>> Objet : Re: Limit Blendmode to 1 layer
>>>
>>> Thanks a lot Maurice, appreciate the help. I see what you mean, and although it could work all right, it would mean a lot of manual calculations. Doable, but I was hoping for something using blendmodes. The extra challenge I may not have mentioned before, is that it's not just 1 image that is placed, but theoretically unlimited. So that would mean creating the rects for each image separately. Doable though, so I'm keeping it in mind. Thanks!
>>>
>>> Ben
>>>
>>> On 31 aug. 2013, at 17:52, Maurice Amsellem <ma...@systar.com> wrote:
>>> Hi Ben, Back from vacation, I couldn't resist trying "for real" the tips I sent you. So here is a sample tested app that does what you need, in pure mxml: The file "Koala.jpg" is a sample 200x200 jpeg. The image is not draggable of course, but it's correctly masked (0.3 red colorized) outside of the central white area. Try it and let me know. <?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009 [1]" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray" > <s:Rect id="areaRect" left="100" top="100" right="100" bottom="100"> <s:fill> <s:SolidColor color="white" alpha="1"/> </s:fill> </s:Rect> <s:Group id="offMaskGrp" left="0" top="0" bottom="0" right="0"> <s:Rect id="leftStrip" left="0" top="0" bottom="0" width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="topStrip" left="100" top="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="rightStrip" top="0" bottom="0" right=
>> "0"
>> width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="bottomStrip" left="100" bottom="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <s:Group id="draggable" left="50" top="50"> <s:BitmapImage source="@Embed('/embedded/Koala.jpg')" /> <s:Rect id="offRect" left="0" top="0" right="0" bottom="0" mask="{offMaskGrp}"> <s:fill> <s:SolidColor color="red" alpha="0.3"/> </s:fill> </s:Rect> </s:Group> </s:Application> Regards, Maurice -----Message d'origine----- De : Ben Smeets [mailto:ben@okapion.com] Envoyé : mardi 27 août 2013 09:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Will try to come up with something working using your tips. If I do, I'll let you know. @Alex: I tried the Pbj shader as well, but it completely kills performance :( (as in, macbook lifting off into space with it's fan). Ben On 27 aug. 2013, at 09:15, Maurice Amsellem <ma...@systar.com> wrote
>> : Option
>> 1) is not such complex math. You can use globalTolLocal and localToGlobal to help for conversions. Option2) you can get both red and alpha, because the hole only acts as a mask, and it´s the overlay rect that has the red fill with alpha. I am in vacation, without my pc, so i can't send you any code that i have tested until next week... Regards Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 23:08 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Option 1 is something I thought about. Doable, but complex math. It's what triggered me to find help for a different approach though. Option 2 is the road I'm at now. I have the hole. The challenge is, that I would like the parts outside the "shape layer" to be red instead of alpha. So masking (not sure) is not something that'll work. That's how I got to the blendmodes. E.g. making the layer on top (with the hole inside) red and blended. The
>> only
>> thing I'm still left with, is that that top layer will also colorize everything below the image (the thing I only need to be colorized). Either way what we come up with, It already helpes knowing that my current approach is not entirely crazy, tnx :) Ben On 26 aug. 2013, at 22:03, Maurice Amsellem <ma...@systar.com> wrote: Ok, i think i understood: the part of the dragged image that gets off the square dragging area needs to be colorized. Assuming my understanding is correct, I would do it either of two ways: 1) programmatic While the image is dragged around, determine the area that is off bounds and draw a semi-transparent rectangle ( in updateDisplayList) in. That area 2) mxml Add an overlay rect the size and position of the dragged image, with alpha fill ( put them in the same s:group) Create an area that corresponds to the off-bounds area, ie the background rectangle with a hole corresponding to the square white rectangle, and use it as a mask ( mask property)
>> to the
>> overlay rectangle. That way , the overlay rectangle will be drawn only where the mask is ON. However, perfromance may be impacted when using large masks, so i definitely prefer the programmatic way. Hope this helps Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 20:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Sure, I'll try to explain it :) This is what I currently have: - Top layer (blendMode=x) - Draggable object layer (image) - Shape layer (square white rectangle) - Background layer (plain gray) The Top layer is draggable. The goal is to make every part of Draggable layer which is dragged outside of the shape layer below it, colorized (or something visual, while retaining a bit of the visual aspect, which is why I got to overlaying a blended layer.). Most issues have been tackled. Only thing left now is that by applying a blendMode, the gray background get's part of that blend effect (
>> color)
>> as well. So I through the trick would be to limit the blendmode to only the Dragable Object Layer. Don't mean to spam the list, if this is not exactly Flex related. Any tips appreciated. Ben On 26 aug. 2013, at 19:29, Maurice Amsellem <ma...@systar.com> wrote: For me, colorTrasform applies to the whole layer, no masking is possible. Maybe if you can describe in more detail what you are trying to do, someeone can help... Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 19:23 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Didn't think of that one, nice. Extra challenge though, is that i can't transform the entire layer. Just the part that the top layer is over (or is that possible with colortransform as well)? Op 26 aug. 2013 om 17:35 heeft Maurice Amsellem <ma...@systar.com> het volgende geschreven: If the purpose of the blending layer is to apply an coloring / lighting eff
>> ect to
>> the layer below, they applying a color transform to the layer below instead (colorTransform property) could be what you need. Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 15:58 À : users@flex.apache.org Objet : Limit Blendmode to 1 layer Hi, Anybody know if it is possible to limit the effect of a Blended layer to only the layer below it (e.g.). My app has a dark background, the top layer which is blending is now blending over all layers, including the background. I am trying to let it blend over 1 specific layer below it without affecting anything else. Tnx, Ben
>>
>>
>>
>> Links:
>> ------
>> [1] http://ns.adobe.com/mxml/2009
>
Re: Limit Blendmode to 1 layer
Posted by Harbs <ha...@gmail.com>.
Do you mean something like the image cropping mechanism here?
https://printui.com/web-to-print-demo-step-1.php
It works with a rectangle mask with a hole punched out of it. It's redrawn every time updateDisplayList is called. As you can see, performance is fine…
Harbs
On Sep 1, 2013, at 1:20 AM, Ben Smeets wrote:
>
>
> I know Maurice, I think the principle you showed me is indeed the only
> way to go. Will try and apply some updateDisplayList in combination with
> some Rectangle calculations (join/union/intersect/etc.) to see if I can
> get it working while keeping it performant. Maybe it's less hard then I
> think.
>
> The custom shaders were a no-go like you said. Did a quick test but the
> performance was way off. Too bad.
>
> Cheers, Ben
>
> Maurice Amsellem schreef op 2013-08-31 22:43:
>
>> Ben, the code I sent you was simplified on purpose to help understanding.
>> Of course you could create a "MaskableBitmap" component that would embed the masking rect.
>>
>> Moreover, masking is actually also a blending technique, using binary AND operator on two sources.
>>
>> Also, if you say that the colorizing could apply to a potentially huge number of images, I would suggest not to use custom shaders, as they will never be as fast as native FlashPlayer (blendmode or masking)
>>
>> Maybe there is some kind of magical combination of blendmodes that could do the same, but I can't help you on that. Let me know if you find something.
>>
>> Regards,
>>
>> Maurice
>>
>> -----Message d'origine-----
>> De : Ben Smeets [mailto:ben@okapion.com]
>> Envoyé : samedi 31 août 2013 22:11
>> À : users@flex.apache.org
>> Objet : Re: Limit Blendmode to 1 layer
>>
>> Thanks a lot Maurice, appreciate the help. I see what you mean, and although it could work all right, it would mean a lot of manual calculations. Doable, but I was hoping for something using blendmodes. The extra challenge I may not have mentioned before, is that it's not just 1 image that is placed, but theoretically unlimited. So that would mean creating the rects for each image separately. Doable though, so I'm keeping it in mind. Thanks!
>>
>> Ben
>>
>> On 31 aug. 2013, at 17:52, Maurice Amsellem <ma...@systar.com> wrote:
>> Hi Ben, Back from vacation, I couldn't resist trying "for real" the tips I sent you. So here is a sample tested app that does what you need, in pure mxml: The file "Koala.jpg" is a sample 200x200 jpeg. The image is not draggable of course, but it's correctly masked (0.3 red colorized) outside of the central white area. Try it and let me know. <?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009 [1]" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray" > <s:Rect id="areaRect" left="100" top="100" right="100" bottom="100"> <s:fill> <s:SolidColor color="white" alpha="1"/> </s:fill> </s:Rect> <s:Group id="offMaskGrp" left="0" top="0" bottom="0" right="0"> <s:Rect id="leftStrip" left="0" top="0" bottom="0" width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="topStrip" left="100" top="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="rightStrip" top="0" bottom="0" right=
> "0"
> width="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> <s:Rect id="bottomStrip" left="100" bottom="0" right="100" height="100"> <s:fill> <s:SolidColor alpha="0"/> </s:fill> </s:Rect> </s:Group> <s:Group id="draggable" left="50" top="50"> <s:BitmapImage source="@Embed('/embedded/Koala.jpg')" /> <s:Rect id="offRect" left="0" top="0" right="0" bottom="0" mask="{offMaskGrp}"> <s:fill> <s:SolidColor color="red" alpha="0.3"/> </s:fill> </s:Rect> </s:Group> </s:Application> Regards, Maurice -----Message d'origine----- De : Ben Smeets [mailto:ben@okapion.com] Envoyé : mardi 27 août 2013 09:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Will try to come up with something working using your tips. If I do, I'll let you know. @Alex: I tried the Pbj shader as well, but it completely kills performance :( (as in, macbook lifting off into space with it's fan). Ben On 27 aug. 2013, at 09:15, Maurice Amsellem <ma...@systar.com> wrote
> : Option
> 1) is not such complex math. You can use globalTolLocal and localToGlobal to help for conversions. Option2) you can get both red and alpha, because the hole only acts as a mask, and it´s the overlay rect that has the red fill with alpha. I am in vacation, without my pc, so i can't send you any code that i have tested until next week... Regards Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 23:08 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Tnx Maurice, Option 1 is something I thought about. Doable, but complex math. It's what triggered me to find help for a different approach though. Option 2 is the road I'm at now. I have the hole. The challenge is, that I would like the parts outside the "shape layer" to be red instead of alpha. So masking (not sure) is not something that'll work. That's how I got to the blendmodes. E.g. making the layer on top (with the hole inside) red and blended. The
> only
> thing I'm still left with, is that that top layer will also colorize everything below the image (the thing I only need to be colorized). Either way what we come up with, It already helpes knowing that my current approach is not entirely crazy, tnx :) Ben On 26 aug. 2013, at 22:03, Maurice Amsellem <ma...@systar.com> wrote: Ok, i think i understood: the part of the dragged image that gets off the square dragging area needs to be colorized. Assuming my understanding is correct, I would do it either of two ways: 1) programmatic While the image is dragged around, determine the area that is off bounds and draw a semi-transparent rectangle ( in updateDisplayList) in. That area 2) mxml Add an overlay rect the size and position of the dragged image, with alpha fill ( put them in the same s:group) Create an area that corresponds to the off-bounds area, ie the background rectangle with a hole corresponding to the square white rectangle, and use it as a mask ( mask property)
> to the
> overlay rectangle. That way , the overlay rectangle will be drawn only where the mask is ON. However, perfromance may be impacted when using large masks, so i definitely prefer the programmatic way. Hope this helps Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 20:30 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Sure, I'll try to explain it :) This is what I currently have: - Top layer (blendMode=x) - Draggable object layer (image) - Shape layer (square white rectangle) - Background layer (plain gray) The Top layer is draggable. The goal is to make every part of Draggable layer which is dragged outside of the shape layer below it, colorized (or something visual, while retaining a bit of the visual aspect, which is why I got to overlaying a blended layer.). Most issues have been tackled. Only thing left now is that by applying a blendMode, the gray background get's part of that blend effect (
> color)
> as well. So I through the trick would be to limit the blendmode to only the Dragable Object Layer. Don't mean to spam the list, if this is not exactly Flex related. Any tips appreciated. Ben On 26 aug. 2013, at 19:29, Maurice Amsellem <ma...@systar.com> wrote: For me, colorTrasform applies to the whole layer, no masking is possible. Maybe if you can describe in more detail what you are trying to do, someeone can help... Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 19:23 À : users@flex.apache.org Objet : Re: Limit Blendmode to 1 layer Didn't think of that one, nice. Extra challenge though, is that i can't transform the entire layer. Just the part that the top layer is over (or is that possible with colortransform as well)? Op 26 aug. 2013 om 17:35 heeft Maurice Amsellem <ma...@systar.com> het volgende geschreven: If the purpose of the blending layer is to apply an coloring / lighting eff
> ect to
> the layer below, they applying a color transform to the layer below instead (colorTransform property) could be what you need. Maurice ________________________________________ De : Ben Smeets [ben@okapion.com] Envoyé : lundi 26 août 2013 15:58 À : users@flex.apache.org Objet : Limit Blendmode to 1 layer Hi, Anybody know if it is possible to limit the effect of a Blended layer to only the layer below it (e.g.). My app has a dark background, the top layer which is blending is now blending over all layers, including the background. I am trying to let it blend over 1 specific layer below it without affecting anything else. Tnx, Ben
>
>
>
> Links:
> ------
> [1] http://ns.adobe.com/mxml/2009