Flash Blend Modes
This tutorial is For Flash 8 and above only.

Select a Blend mode using the pulldown menu on the top-right.

What Are Blend Modes

Blend modes are new to Flash 8. You can apply a Blend mode to an instance of a MovieClip on the timeline. The Blend mode affects how the MovieClip instance will be displayed with respect to the content underneath it. (The term content means anything underneath the movie clip: it could be another movie clip on the layer(s) below it or another movie clip on the same layer but underneath othe Blend-ed movie clip.)

To bring up the Blend mode selection, insert a MovieClip onto the stage (shape and bitmap cannot have this option applied directly, but you can always put them inside a MovieClip). With the movie clip selected, bring up the Properties dialog:

You will see this.

These Blend modes are straightforward to use and their effects are easy to see by simple experiment. For example, if you select Invert, then the area of the image below the movie clip that will be Inverted like negative-film.

You can read what they do in the Flash Help file (search for BlendMode). The less obvious ones are Erase and Alpha, because these two require at least three MovieClip instances to work. You can see their use in this tutorial about masking.

Setting Blend mode Programatically

You can set Blend mode programatically by setting the blendMode property of a MovieClip instance. In Action Script 2, blendMode takes a string or a number which can be one of these below:

  • "normal" (1)
  • "layer" (2)
  • "multiply" (3)
  • "screen" (4)
  • "lighten" (5)
  • "darken" (6)
  • "difference" (7)
  • "add" (8)
  • "subtract" (9)
  • "invert" (10)
  • "alpha" (11)
  • "erase" (12)
  • "overlay" (13)
  • "hardlight" (14)

It is important to enter them with all lower cases (ie: using "Invert" instead of "invert" won't work).

For example, in this movie below, I assign "invert" as the blendMode for the red square on the top, and "darken" to the second red square.

The result is like this:

Download FLA.

In Action Script 3, blendMode can also be set with one of the constants defined in the BlendMode class:

  • BlendMode.ADD
  • BlendMode.ALPHA
  • BlendMode.DARKEN
  • BlendMode.DIFFERENCE
  • BlendMode.ERASE
  • BlendMode.HARDLIGHT
  • BlendMode.INVERT
  • BlendMode.LAYER
  • BlendMode.LIGHTEN
  • BlendMode.MULTIPLY
  • BlendMode.NORMAL
  • BlendMode.OVERLAY
  • BlendMode.SCREEN
  • BlendMode.SUBTRACT

There are many esthetic possibilities with blending two images, below are some examples:

  1. Masking layer.
  2. Special Effects Such As Ripples.