Introducing Blend Modes in Flash

I'm going to be teaching you how to use each blend mode in Flash. Simply put, blend modes are used to modify color values or transparency in images. Just as the name suggests, blend modes are used for blending images together. Blend modes are commonly used for special effects or compositing in games, movies, and image editors. From explosions, screen transitions, masking, and lighting, blend modes have many applications in flash projects.

Quick Preview

Watch the Screencast…

Blend Modes in Flash - Part 1

…or Read the Tut

Blend modes make a composite image and create interesting effects by blending pixels in overlapping images or movie clips. Blend modes effect pixel color and transparency. You can use blend modes to emphasize highlights or shadows, or to modify colors in an image.

You may notice that some blend modes are a bit similar, but they are not the same. Some blend modes are direct opposites of each other, but you need to know which one to use in any given situation.

How do they work?

Blend modes use a background layer and a blending layer on top to give you a final modified layer. Each pixel from the background is looked at and modified by the blending image on top, giving you the composited image. Colors and transparency are taken into the equation when the pixels are processed. All display objects -- including Sprites, Bitmaps, and MovieClips -- have a blendMode property that you can change to get an effect you're looking for. You can set the blendMode property to the constants defined in the flash.display.BlendMode class, or you can use the actual string values in quotations instead.

Blend modes often change the colors of the layer you're attaching the blend mode to, so you need to experiment with different colors and blend modes to see how the results look. Experimenting with different blend modes can give you an idea about how they work. You should note that different colors often come into play with different blend modes, and you might not get the same results depending on your background images and the blending images used. You should also be aware of the order you apply your blending layers, as different orders will give different results.

Quick Example:

1

displayObject.blendMode = BlendMode.ADD;

or

1

displayObject.blendMode = 'add';

It's up to you! However, for the first option, make sure that you import flash.display.BlendMode.

Many people will just slide through each of the blend modes until they get an effect that looks nice, but I want to explain to you how each blend mode works, and show you some examples or scenarios where blend modes can be useful. As a game developer I will be using examples of blend modes in a gaming context. Generally I'll use blend modes for things like fog, explosions, particles, and lighting, but blend modes have endless uses and functions that you will have to come up with!

I'm going to talk about these blend modes in pairs or groups. Most blend modes come with a similar or directly opposite partner. Today I'll be covering the blend modes listed below.

• NORMAL
• LAYER
• ALPHA
• ERASE
• ADD
• SUBTRACT
• LIGHTEN
• DARKEN

Blend mode: NORMAL

Description and Examples of Usage

NORMAL applies color normally, with no interaction with the base colors.

The first blend mode that I need to talk about is the NORMAL blend mode. It is essentially the default blend mode that doesn't apply any blending to the background image.

When experimenting with different blend modes, you will use the NORMAL blend mode for comparison.
Using the NORMAL blend mode is the same as not using a blend mode at all. Knowing that blend modes require processing and often have an affect on the performance of your Flash project, you should try to limit blend mode usage if you can.

50 objects with NORMAL blending is much faster than 50 objects with OVERLAY or HARDLIGHT blend modes.

Technical Description

The display object is displayed as normal on top of the background. No color values or transaprency is changed.

Example:

1

displayObject.blendMode = BlendMode.NORMAL;

or

1

displayObject.blendMode = 'normal';

Blend mode: LAYER

Description and Examples of Usage

The LAYER blend mode is similar to the NORMAL blend mode, because it doesn't modify colors. However, the LAYER blend mode forces creation of a transparency group or an alpha channel. It essentially sets the layer's opacity to 100%.

NOTE: This is required to composite with the ALPHA or ERASE blend modes, which I will be talking about next.

Technical Description

Rendered similarly to the NORMAL blend mode with 100% opacity. Creation of the alpha channel allows the layer to be modified by other blend modes that affect transparency, like ALPHA or ERASE.

Example:

1

displayObject.blendMode = BlendMode.LAYER;

or

1

displayObject.blendMode = 'layer';

Blend mode: ALPHA

Description and Examples of Usage

The ALPHA blend mode alters the transparency of the background layer, making it see-through if different areas, depending on the blending layer's transparency.

Technical Description

The ALPHA blend mode applies an alpha mask, where the transparent pixels of the blending layer affect the transparency of the background layer. Generally you'll use a second background layer with this blend mode, to be shown through the first background when it is made transparent.

The LAYER blend mode needs to be applied to the parent display object, which acts as the first background to be made transparent.

Example:

1

displayObject.blendMode = BlendMode.ALPHA;

or

1

displayObject.blendMode = 'alpha';

Blend mode: ERASE

Description and Examples of Usage

The ERASE blend mode is the opposite of the ALPHA blend mode, but still alters the transaprency of the background layer, making it see-through if different areas, depending on the blending layer's transparency.

Technical Description

The ERASE blend mode works like the ALPHA blend mode, but applies an inverted alpha mask, where the opaque pixels of the blending layer affect the transparency of the background layer, making those pixels transparent. Generally you'll use a second background layer with this blend mode, to be shown through the first background when it is made transparent.

The LAYER blend mode needs to be applied to the parent display object, which acts as the first background to be made transparent.

Example:

1

displayObject.blendMode = BlendMode.ERASE;

or

1

displayObject.blendMode = 'erase';

Blend mode: ADD

Description and Examples of Usage

The ADD blend mode is used to strengthen whites and lighten overlapping colors. Colors of the blending layer above the middle range lighten the background layer, while darker colors are transparent, leaving the background layer untouched.

Technical Description

The ADD blend mode literally adds the hex color values of the blending layer to the background layer. It cannot go higher than white.

Example:

1

displayObject.blendMode = BlendMode.ADD;

or

1

displayObject.blendMode = 'add';

Blend mode: SUBTRACT

Description and Examples of Usage

The SUBTRACT blend mode darkens the background layer, and can be thought of as the opposite of the ADD blend mode. White areas of the blending layer turn the background layer black, while black areas of the blending image don't affect the background layer.

The SUBTRACT blend mode is used to strengthen blacks and darken overlapping colors. Colors of the blending image above the middle range are darkened, while lighter colors are transparent, leaving the background layer untouched.

Technical Description

The SUBTRACT blend mode subtracts the hex color values of the blending layer to the background layer. It can not go lower than black.

Example:

1

displayObject.blendMode = BlendMode.SUBTRACT;

or

1

displayObject.blendMode = 'subtract';

Blend mode: LIGHTEN

Description and Examples of Usage

LIGHTEN uses the lighter colored pixels from each layer. Similar to the ADD blend mode, it is used to strengthen lighter areas of the overlapping layers. Each pixel from each layer is looked at, and the lighter of the two pixel values is kept.

Technical Description

LIGHTEN replaces background pixels that are darker than the blend layer pixels. Background pixels lighter than the blend layer pixels are not changed.

Example:

1

displayObject.blendMode = BlendMode.LIGHTEN;

or

1

displayObject.blendMode = 'lighten';

Blend mode: DARKEN

Description and Examples of Usage

DARKEN uses the darker colored pixels from each layer. It is the opposite of the LIGHTEN blend mode, and is used to strengthen darker areas of the overlapping layers. Each pixel from each layer is looked at, and the darker of the two pixel values is kept. This can be used to add different texture effects to our background layer.

Technical Description

DARKEN replaces background pixels that are lighter than the blend layer pixels. Background pixels darker than the blend layer pixels are not changed.

Example:

1

displayObject.blendMode = BlendMode.DARKEN;

or

1

displayObject.blendMode = 'darken';

The Next Step

The second part of this tutorial (coming soon) will cover the remaining blend modes:

• MULTIPLY
• DIFFERENCE
• INVERT
• SCREEN
• OVERLAY
• HARDLIGHT

Stay tuned!