Graphic Effects Learning Guide for Flash: Blend modes
Requirements
Prerequisite knowledge
This guide 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.
User level
Beginning
Required products
- Flash Professional (Download trial)
Sample files
Blend modes in Adobe Flash Professional CS5 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
Special effects using blend modes
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 Professional 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 percent 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.
Working with the Properties panel
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 1).
Use the Properties panel to apply blend modes to selected movie clips.
To apply a blend mode to a movie clip:
- Add a few overlapping movie clip instances on the Stage. Simple shapes composed of different colors will illustrate the effect well.
- Select the movie clip instance (on the Stage) to which you want to apply a blend mode.
- Select a blend mode from the Blending pop-up menu in the Display section of the Properties panel. The blend mode is applied to the selected movie clip instance.
- 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 the Flash Professional online help as well as the blend mode section of the Flash glossary.
Applying a blend mode using ActionScript
You can apply blend modes to instances using ActionScript code. For example, you can apply the Difference blend mode using the following code:
- Create a new ActionScript 3 FLA file and save it as blend-mode.fla.
- Rename Layer 1 to actions.
- Select Frame 1 of the actions layer and add the following ActionScript:
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
// Load an external image
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);
// Setup the image when loaded
function imgLoaded(event:Event):void
{
// Adjust the image's blend mode
pictLdr.blendMode = "difference";
pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
}
- Select Control > Test Movie to test the document.
- Save the file.
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:
- Create a new ActionScript 3 FLA file and save it as blend-modes.fla.
- Rename Layer 1 to assets.
- Drag a ComboBox component instance onto the Stage and assign it an instance name of blendMode_cb. Place the ComboBox instance somewhere along the top edge of the Stage.
- Create a new layer above the assets layer and name it actions.
- Select Frame 1 of the actions layer and add the following ActionScript:
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(0,0);
rect.graphics.lineTo(250,0);
rect.graphics.lineTo(250,250);
rect.graphics.lineTo(0,250);
rect.graphics.lineTo(0,0);
rect.graphics.endFill();
rect.x = (stage.stageWidth - rect.width) / 2;
rect.y = (stage.stageHeight - rect.height) / 2;
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 appears differently each time a new blending mode is selected in the combo box.
- Select Control > Test Movie to test the document.
- Save the file.
Where to go from here
Flash Player 10 introduced the ability to assign an Adobe 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 ActionScript 3 Developer's Guide for more information.
Also check out the Pixel Bender section of the Graphic Effects Learning Guide to learn more about manipulating bitmaps and filters programmatically.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Graphic Effects Learning Guide for Flash: Inverse kinematics
- Graphic Effects Learning Guide for Flash: Transformations
- Graphic Effects Learning Guide for Flash: Overview
- Graphic Effects Learning Guide for Flash: Filters
- Graphic Effects Learning Guide for Flash: Vectors
- Graphic Effects Learning Guide for Flash: Text
- Graphic Effects Learning Guide for Flash: Color
- Graphic Effects Learning Guide for Flash: Bitmaps
- Graphic Effects Learning Guide for Flash: Tiles and patterns
- Graphic Effects Learning Guide for Flash: Masks
