Adobe Flash CS3 and CS4 comes bundled with a “blendMode” class which one can use in his everyday coding to achieve the general “overlay”, “multiply” or “lighten” effects on images as part of an image gallery or just messing around.  What I present here is a simple custom class that gives the developer a level of control that he/she might not be able to get by using the native blendMode class.

 

[ LayerBlend Class ] -> download class and sample application here. (zip)
The class is really simple to use and takes 2 parameters which should both be bitmapData objects and outputs to either a bitmap or bitmapdata object. here’s a simple useage of the class below:

Step 1 :: Download and import the class
import LayerBlend;

Step 2 :: Either load in dynamically or reference two images from your library (here I’ll just reference 2 images that I imported directly into the flash library).  Give the images in your library linkage ids and create two instances of the bitmapdata objects in flash. Below here I have two images 150px by 150px and I gave them ids of face1 and face2.
var bmd:BitmapData = new face1(150, 150);
var bmd2:BitmapData = new face2(150, 150);

Step 3 :: Declare an instance of the class and create a bitmap object to contains the resulting bitmap object.
var blend:LayerBlend = new LayerBlend( bmd, bmd2 );
var finalImg:Bitmap = blend.blendBitmap(“overlay”, 1);

Step 4 :: add the child to the display list
addChild(finalImg);

Here’s the entire code:
import LayerBlend;

var bmd:BitmapData = new face1(150, 150);
var bmd:BitmapData = new face2(150, 150);
var blend:LayerBlend = new LayerBlend( bmd, bmd2 );
var finalImg:Bitmap = blend.blendBitmap(
“overlay”, 1);

addChild(finalImg);

Class description:

public class LayerBlend( bitmapData, bitmapData)
The LayerBlend class constructor takes two bitmapdata objects are the parameters. The first bitmapData should be the source and the second should be the overlay.  You can also use the same bitmapdata for both to achieve a layer blend effect on one single image such as lightning or darkening a picture.

public function blendBitmap( layerMode:String, pChange:Number ): Bitmap
blendBitmap function takes two parameters, the blend mode and the percentage change of the mode

[Parameters]

  • layerMode:String – This parameter can be any one of the following values:
    • colorDodge
    • darken
    • difference
    • exclusion
    • exclusionR
    • lighten
    • multiply
    • overlay
    • add
    • subtract
    • hardBlend1
    • hardBlend2
    • hardBlend3
    • custom1
  • pChange:Number – This value can range for -1.0 to 1.0

public function blend( layerMode:String, pChange:Number ): BitmapData
This function acts exactly like the blendBitmap method but returns a bitmapData object instead so it could be used on other applications or be reworked again.