Home >
Here's the second installment of my mini-series on Flex graphics tricks. The first one was about using masks with Flex objects to create interesting effects. There are lots of cool things that you can do with masks, but this time I am going to focus on graphics blend modes.
Every visible component in Flex can have a blend mode applied to it, which will change how that object is rendered on screen. The blend mode changes how the graphics of the object blend with anything that sits behind that object on the display list. Using blend modes, you can make components or images appear only partially, or appear as color variants of other objects, or you can blend the contents of two different images dynamically at runtime.
There's a great explanation of what blend modes do in the Flex documentation, and here's an excerpt from that which will help you understand exactly what is happening when a blend mode is applied.
Flash Player applies the blendMode property on each pixel of the display object. Each pixel is composed of three constituent colors (red, green, and blue), and each constituent color has a value between 0x00 and 0xFF. Flash Player compares each constituent color of one pixel in the movie clip with the corresponding color of the pixel in the background. For example, if blendMode is set to BlendMode.LIGHTEN, Flash Player compares the red value of the display object with the red value of the background, and uses the lighter of the two as the value for the red component of the displayed color.
The available blend modes are:
NORMAL, ADD, ALPHA, DARKEN, DIFFERENCE, ERASE, HARDLIGHT, INVERT, LAYER, LIGHTEN, MULTIPLY, OVERLAY, SCREEN, SUBTRACT
There is more detail on what exactly each mode does, with an example in the Flex documentation.
Now, lets take a look at what we can do with these blend modes. All of my examples will use the same images that I used in the first part of this series. I started with these source Images:
The sample application that I put together lets you experiment with the different kinds of blend modes. Here are just a few examples. Notice that only the non-transparent parts of the top image affect how the bottom image are displayed. The blend mode only applies to non-transparent areas, including semi-transparent areas. If things change in your components, that blended area also changes. You can see in my sample application, that the blend mode changes with the component in the "Animated Image Blend Modes" tab.
BlendMode.DIFFERENCE
BlendMode.INVERT
BlendMode.SUBTRACT
Now things can really get interesting when you take Flex components and apply blend modes to them. This technique can change the way that controls or charts are displayed, and can add a higher level of sophistication to your interface. However, they can also be abused and make things difficult to read or just plain ugly.
Here are a few examples showing what happens when you change the blend mode of a standard flex chart component:
BlendMode.HARDLIGHT
BlendMode.MULTIPLY
BlendMode.SUBTRACT
Now, we can take concepts from my first post, and combine graphics masks with blend modes to change how objects are rendered on top of each other. In this example, I am using a chart as a mask on an image of the sunrise, which is overlaying the image of Chicago. you can see that the components blend differently, based on the specified blend mode.
BlendMode.NORMAL
BlendMode.DARKEN
BlendMode.HARDLIGHT
BlendMode.OVERLAY
You can play with all of my blend mode examples here:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/blendmodes/BlendModes.html
All of the source for this application is publicly available at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/blendmodes/srcview/index.html
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Hi,
nice tutorial, but I have one question regarding blendMode settings in AS3. In my current project (a coverflow component, see URL) I have objects with semi-transparent bitmap reflections. I would like overlapping portions of the reflections to erase the portions of those reflections which are in the background (behind the top-level object's reflections. If you understand what I mean, is it possible to achieve this using certain BlendMode settings? I have already tried different BlendMode settings for the reflections (especially BlendMode.ERASE which I thought to be able to do the job), but none did what it was supposed to. BlendMode.ERASE just makes the whole reflection dissaper :(
I have also applied BlendMode.LAYER to the objects of which the Reflections are generated. Now I am a bit confused about the whole thing...
Thanks for any hints! Best,
Manuel Fittko
I too want the same thing..
Anybody having any idea how to achieve this??
Thanks for posting. I wanted to set the blend mode on a component, and with your help I ended up with blendMode="{BlendMode.ADD}"
You didn't explain about ALPHA & ERASE modes, which are very particular on their effects. In your example, both modes make thing above disappeared.
I think the blendmode is not easy to differeniate & handle, especially these particular modes.
Furthermore, when the no. of participating assets increase, the resulting effect tends to be more unpredictable.
To Manuel & Priyank:
I've done lasso tools in box & freehand versions previously & it includes a work that you're requesting . I can't post source for some reason but I can tell you the idea behind it:
* I memorized the path of lassoed area.
* I implement my own filling area functions.
* New a bitmap & draw the lasso area with pure black-color interior.
* Use this bitmap as mask for the source lassoed area.
* Do masking as introduced in Andrew's part 1 articles taught.
* My program only needs to print out the lassoed-area, so up to this point I already achieve my goal.
* If you want to do pasting, then invert the previous mask bitmap (DIY or use BlendMode.INVERT)
* do masking to the target pasting area
* repeat previous masking with this new masking result to combine both bitmap to form the resuling pasting bitmap
* copy the resulting bitmap back to the target object.
I once wish there's quick method provided by built-in functions but I can't find one.
For Manuel's question, you need to manipulate the alpha property of those participating assets, the lowerest alpha-value assets will be erased the most. An object with alpha value 0 will be erased completely. However, to achieve what you wants, you still need to make a mask as my previously post mentioned cause it's 'Blend'-mode, not 'Transfer'-mode.