Category Archives: MXML Graphics

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