tag:www.insideria.com,2009://34/tag:www.insideria.com,2008://34.22823- 2009-11-16T15:56:01Z Comments for Flex Graphics Tricks Part 2: Blend Modes (http://www.insideria.com/2008/02/flex-graphics-tricks-part-2-bl.html) Movable Type 4.21-en tag:www.insideria.com,2008://34.22823 2008-02-03T20:26:08Z 2008-02-04T14:12:30Z Flex Graphics Tricks Part 2: Blend Modes 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 thingsthat you can do with masks, but this time I am going to focus on graphics blend modes. Andrew Trice 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:

sourceImages.jpg

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
difference.jpg

BlendMode.INVERT
invert.jpg

BlendMode.SUBTRACT
subtract.jpg

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
chart_hardlight.jpg

BlendMode.MULTIPLY
chart_multiply.jpg

BlendMode.SUBTRACT
chart_subtract.jpg

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
chart_mask_normal.jpg

BlendMode.DARKEN
chart_mask_darken.jpg

BlendMode.HARDLIGHT
chart_mask_hardlight.jpg

BlendMode.OVERLAY
chart_mask_overlay.jpg

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:www.insideria.com,2008://34.22823-comment:2069432 Comment from Manuel Fittko on 2009-07-29 Manuel Fittko http://usability-online.com 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

]]> 2009-07-29T15:02:05Z tag:www.insideria.com,2008://34.22823-comment:2098687 Comment from Priyank on 2009-09-15 Priyank I too want the same thing..
Anybody having any idea how to achieve this??

]]> 2009-09-15T09:30:25Z tag:www.insideria.com,2008://34.22823-comment:2172575 Comment from Tyler Arehart on 2009-11-04 Tyler Arehart Thanks for posting. I wanted to set the blend mode on a component, and with your help I ended up with blendMode="{BlendMode.ADD}"

]]> 2009-11-05T02:39:38Z