Home > Development > blogs

Flex Graphics Tricks Part 2: Blend Modes

Andrew Trice
February 3, 2008 | Permalink | Comments (0)

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