Support for Illustrator blend modes in Flex 4

One of the little known features that we added to Flex 4 was the ability to use more blend modes in your mxml graphics. Flex supported blend modes in previous versions, however, the only ones supported were those that were natively supported by the Flash Player. This list of blend modes included: add, alpha, darken, difference, erase, hardlight, invert, layer, lighten, multiply, normal, overlay, screen and subtract.  A good description of these blend modes can be found in this article on InsideRIA.  Adobe Illustrator supports many other blend modes that Flex 4 added support for including colorburn, colordodge, softlight, exclusion, hue, saturation, color and luminosity. Since these blend modes are not supported by Flash Player APIs, the Flex SDK is using wrapper classes for pixel bender filters to recreate the blend modes.  If you are curious and want to look at the code for these pixel bender filters, you can find them in <flex_sdk>/frameworks/projects/framework/src/mx/graphics/shaderClasses/ wherever your SDK is installed.

To specify one of these blend modes in Flex 4, you would do something like:

<s:Group x=”580″ y=”400″ blendMode=”normal”>
<s:BitmapImage source=”@Embed(‘ks95553_s.jpg’)” x=”0.5″ y=”0.5″ blendMode=”colorburn” width=”90″ height=”124″ />
</s:Group>

Here is a view of what various blend modes in Flex will do.

Blendmode sample: BlendModes.swf

Download source: BlendModes.zip

One response

  1. […] Flex 4 adds a few additional blend modes to the mix. Which is great because we just can’t have enough blend modes. 🙂 Actually, I think difference is the only blend mode I’ve ever used in an application. But as my grand pappy always said, “It’s better to have a butt-load of blend modes and not need one than to need one and not have any.” So with that here’s a quick explorer where you can see all the modes in action. You can read more about Flex 4 blend modes from ButterFliesAndBugs. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: