Blend modes create composite images by blending the color of pixels in overlapping objects. Blending enables you to create unique effects by blending the colors in overlapping movie clips, as well as adding a dimension of control to the opacity of objects and images. You can use blend modes to create highlights or shadows that let details from an underlying image show through, or to colorize a desaturated image.

A blending mode contains these elements:

• Blend color is the color applied to the blend mode
• Opacity is the degree of transparency applied to the blend mode
• Base color is the color of pixels underneath the blend color
• Result color is the result of the blend's effect on the base color

This section describes the process of applying blend modes to instances using the Flash CS4 workspace and ActionScript.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

This article assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

Blend modes in Flash CS4

Because blend modes depend on both the color of the object to which you're applying the blend and the underlying color, you'll need to experiment with different colors to see what the result will be. Try experimenting with the different blend modes to achieve the effect you want.

Flash CS4 provides the following blend modes:

• Normal applies color normally, with no interaction with the base colors.
• Layer blends colors normally but pre-composites the blend object at 100% opacity prior to blending. This prevents subclips of the blend object from bleeding through one another.
• Darken replaces only the areas that are lighter than the blend color. Areas darker than the blend color don't change.
• Multiply multiplies the base color by the blend color, resulting in darker colors.
• Lighten replaces only pixels that are darker than the blend color. Areas lighter than the blend color don't change.
• Screen multiplies the inverse of the blend color by the base color, resulting in a bleaching effect.
• Overlay multiplies or screens the colors, depending on the base colors.
• Hard light multiplies or screens the colors, depending on the blend mode color. The effect is similar to shining a spotlight on the object.
• Difference subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. The effect is similar to a color negative.
• Invert inverts the base color.
• Alpha applies an alpha mask.
• Erase removes all base color pixels, including those in the background image.

Note: The Erase and Alpha blend modes require that a blend mode other than Normal be applied to the parent movie clip.

Blend mode examples

Different blend modes affect the appearance of an image in different ways. Be aware that the resulting effect of a blend mode may be considerably different, depending on the color of the underlying image and type of blend mode you apply (see Figure 6).

Figure 6. Examples of blend modes

(+) View larger

Applying a blend mode

You use the Property inspector to apply blend modes to selected movie clips.

To apply a blend mode to a movie clip:

1. Add a few overlapping movie clip instances on the Stage. Simple shapes composed of different colors will illustrate the effect well.
2. Select the movie clip instance (on the Stage) to which you want to apply a blend mode.
3. Select a blend mode from the Blending pop-up menu under the Display section in the Property inspector. The blend mode is applied to the selected movie clip instance.
4. Verify that the blend mode you've selected is appropriate to the effect you're trying to achieve.

You might need to experiment with both the color and transparency settings of the movie clip and then try applying different blend modes to achieve the effect you want. For information on adjusting the color of a movie clip, see the Applying blend modes section of Using Flash CS4 Professional.

Applying a blend mode using ActionScript

You can also apply blend modes to instances using ActionScript code. For example, you can apply the difference blend mode using the following code.

Type the following ActionScript on Frame 1 of the Timeline:

var pictLdr:Loader = new Loader();
var pictURL:String = "http://www.helpexamples.com/flash/images/image1.jpg";
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); 
addChild(pictLdr);

function imgLoaded(event:Event):void
{
	pictLdr.blendMode = "difference";
}

Note: The code sample above is written in ActionScript 3 and must be used within an ActionScript 3 file (the default Flash CS4 setting).

Then select Control > Test Movie to test the document.

To see how different blend modes are applied to an image, follow along with the next example. The code below loads a dynamic image and allows you to apply different blending modes to the image by selecting a blending mode from a combo box on the Stage.

To apply blend modes to an image using ActionScript:

1. Create a new ActionScript 3 FLA file and save it as blendmodes.fla.
2. Drag a ComboBox component instance onto the Stage and give it an instance name of blendMode_cb. Place the ComboBox instance somewhere along the top edge of the Stage.
3. Add the following ActionScript to Frame 1 of the Timeline:
   

   import fl.data.DataProvider;
   import flash.display.*;
   import flash.net.URLRequest;
   import flash.events.Event;
   
   // Create a list of mode typesvar 
   var blendMode_dp:Array = new Array();
   blendMode_dp.push({data:"add", label:"add"});
   blendMode_dp.push({data:"alpha", label:"alpha"});
   blendMode_dp.push({data:"darken", label:"darken"});   
   blendMode_dp.push({data:"difference", label:"difference"});   
   blendMode_dp.push({data:"erase", label:"erase"});
   blendMode_dp.push({data:"hardlight", label:"hardlight"});
   blendMode_dp.push({data:"invert", label:"invert"});
   blendMode_dp.push({data:"layer", label:"layer"});
   blendMode_dp.push({data:"lighten", label:"lighten"});
   blendMode_dp.push({data:"multiply", label:"multiply"});
   blendMode_dp.push({data:"normal", label:"normal"});
   blendMode_dp.push({data:"overlay", label:"overlay"});
   blendMode_dp.push({data:"screen", label:"screen"});
   blendMode_dp.push({data:"subtract", label:"subtract"});
   
   // Initialize the combobox
   blendMode_cb.dataProvider = new DataProvider(blendMode_dp);
   blendMode_cb.addEventListener(Event.CHANGE,changeHandler);
   
   // Create an event handler for the combobox
   function changeHandler(event:Event):void { 
      pictLdr.blendMode = event.target.selectedItem.data;
   }
   
   // Create a colored rectangle for the overlay
   var rect:Shape = new Shape();
   rect.graphics.beginFill(0xFF0000);
   rect.graphics.moveTo(100,100);
   rect.graphics.lineTo(350,100);
   rect.graphics.lineTo(350,350);
   rect.graphics.lineTo(100,350);
   rect.graphics.lineTo(100,100);
   addChild(rect);
   
   // Load an image to view the modes
   var pictLdr:Loader = new Loader();
   var pictURL:String = "http://www.helpexamples.com/flash/images/image1.jpg";
   var pictURLReq:URLRequest = new URLRequest(pictURL);
   pictLdr.load(pictURLReq);
   pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); 
   addChild(pictLdr);
   
   // Layout the image when it has downloaded
   function imgLoaded(event:Event):void
   {
       pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
       pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
   }

   This ActionScript code populates the combo box with each type of blending mode, so the user can view each effect on the dynamically loaded image. A colored rectangle is drawn behind an image loaded from the server. The two images create a blending effect which displays differently each time a new blending mode is selected in the combo box.

4. Select Control > Test Movie to test the document.

Where to go from here

Flash Player 10 introduces the ability to assign a Pixel Bender shader as a blend mode to produce a new range of visual effect possibilities. Please see Using a shader as a blend mode in the Programming ActionScript 3.0 for Flash online documentation for more information.

About the author