In the last few months I have been working on a collection of blendmodes for Flash 10 which extend the limited set of blendmodes currently and inconsistently supplied by Adobe applications. This can help to achieve all kinds of motion effects which I won’t go into detail here but if you know a little about After Effects you will know that some of these are rather exciting.
If you are familiar with the Adobe product line there is inconsistency between Photoshop/Illustrator/Flash/Fireworks/InDesign and support for various subsets of blendmodes which is rather annoying especially for us Flash guys. This project overzealously named the ‘Ultimate Blend Mode Collection’ is an attempt to standardize this unofficially on Adobes behalf. So marrying up Photoshop designs and Flash layouts with unsupported blendmodes won’t be nearly as annoying as has been previously. Further to this, these custom blendmodes allow for control to and undo the blendmode effects. What this means is you do not have to double up the blendmode effect by duplicating the DisplayObject instance with the same blendmode you can just multiply the single blendmode effect – simple and quite effecient.
So far I have completed the following custom blend modes :
- Add
- Hard Mix
- Hardlight
- Glow
- Subtract
- Stencil Luma
- Extrapolate
- Difference
- Average
- Lighter Color
- Lighten
- Color Dodge
- Stencil Alpha
- Stamp
- Softlight
- Silhouette Luma
- Silhouette Alpha
- Screen
- PinLight
- Phoenix
- Overlay
- Negation
- Multiply
- Linear Light
- Linear Dodge
- Linear Burn
- Darken
- Desaturate
- Exclusion
- Color Burn
- Alpha
- Darker Color
These are working though have issues of dirty-ness on alpha channels (explained below) for blending layers :
- Reflect
- Freeze
- Heat
- Vivid Light
These custom blend modes are currently in development :
- Color
- Hue
- Luminosity
- Saturation
- Dissolve
How to use custom blend modes
I have only provided a method to use these custom blend modes included with the ‘Ultimate Blendmode Collection’ for Flex and CS4 users. This is because the PBJ files are compiled into a SWC so you will need to be able to reference SWCs from your FLA or SWF compiler to use the custom blend modes I have mentioned. The syntax to apply a custom blend mode can be achieved via any of the following approaches :
-
import flash.display.BlendModeShader;
-
myDisplayObject.blendShader = BlendModeShader.SOFTLIGHT;
or
-
import flash.display.BlendModeShader;
-
import flash.display.shaders.*;
-
myDisplayObject.blendShader = new BlendModeSoftlight;
or you can manipulate the shader
-
import flash.display.BlendModeShader;
-
import flash.display.shaders.*;
-
var customBlendMode: BlendModeSoftlight = new BlendModeSoftlight;
-
customBlendMode.multiply = 2;
-
customBlendMode.alpha = 0.5;
-
myDisplayObject.blendShader = customBlendMode;
Tips for writing your own custom blend modes
Here are some potentially huge gotchas and lovely time savers for those wanna be pixel shader writers (like myself) :
- Un-multiply alpha before carrying out your shader algorithm. You might already know that Flash pre-multiplies the alpha channel onto the rgb channels this means that if you want to know what the actual rgb components are you will need to do the following :
-
void
-
evaluatePixel
-
float2 uv = outCoord;
-
float4 src1Rgba = sampleLinearsrc1, uv;
-
float src1Alpha = src1Rgba.a;
-
ifsrc1Alpha>0.0 src1Rgba.rgb *= 1.0/src1Alpha; //This line un-multiplies the alpha from the rgb channels
-
- When your done manipulating your blending layer against the base layer it’s more than likely you will need to composite your new blending layer and base layers together while preserving the alpha components. The following should be useful for this :
-
void
-
evaluatePixel
-
……
-
interpolateAlpha = src2Rgba.a;
-
inverseAlpha = 1.0-interpolateAlpha;
-
dst.rgb = src2Rgba.rgb+src1Rgba.rgb*inverseAlpha;
-
dst.a = min1.0, src1Alpha+src2Alpha;
-
- Make sure you clamp the components you are altering between 0.0 and 1.0 outside these will give you unusual results between tests made with the Pixel Bender Toolkit and from a published Flash movie. This bit of code ought to fix this :
-
void
-
evaluatePixel
-
float3 minRgb = float30.0, 0.0, 0.0;
-
float3 maxRgb = float31.0, 1.0, 1.0;
-
……
-
dst.rgb = clampdst.rgb, minRgb, maxRgb;
-
- Because Flash premultiplies alpha and I explained earlier about why you may need to un-multiply alpha from the rgb components. It’s important to know from this there is a certain degree of losiness and this article by Mario is a great Actionscript explanation (completely unrelated to shaders) of this and is one among many others crying out for help (like me). You may notice in the example below which demonstrates these custom blend modes (or in your own tests) a certain degree of image dirty-ness and this dirty-ness is due to this. I am still working on a way to reduce or get around this – any ideas are certainly welcome – and I’ve highlighted the shaders above most affected by this.
- When applying a shader the input sources for the blending and base layer are automatically set. This is great but doesn’t allow for setting any further image4 inputs. From my tests if I do try to do this then the Flash Player crashes every time. This is bug and generally bugging me because I can’t complete other custom blendmodes based on random math like the Dissolve blendmode
How to get the custom blend modes
I have placed my PBJ, PBK and SWC files on a code.google project. I have also put together a brief getting started page. If you want to get an idea of what’s possible using these custom blend modes the simple example below should help to demonstrate this. Also make sure you try out a few of the various base and blending layers I have set up to see what does what.
References
If you are interested in writing your own blend modes I used quite a few sources in order to collect the algorithms used in the examples seen above – here are the main sources :
http://www.pegtop.net/delphi/articles/blendmodes/
http://blog.mouaif.org/?p=94
http://www.nathanm.com/photoshop-blending-math/