Layer Blend Mode

Layer Blend Mode

Flash CS4 ActionScript 3.0 Tutorial


How to Create Compositing Effects with Layered Symbols Using Flash ActionScript



Blend Modes are commonly used in programs that contain layers of imagery. A Blend Mode is applied to the upper object. With the Blend Mode set, the upper and lower object interact with each other.

The Layer Blend Mode it is different than the other Blend Modes. It is used with Symbols that contain several overlapping elements. By applying the Layer Blend Mode to the symbol, any alpha tweening is applied to the entire symbol. Without the Layer Blend Mode, all of the Symbol's objects change opacity independently, leading to unpredictable results.

There are several Blend Mode options. For more information see Blend Mode topics, Add Blend Mode, Darken Blend Mode, Difference Blend Mode, Hard Light Blend Mode, Invert Blend Mode, Lighten Blend Mode, Multiply Blend Mode, Overlay Blend Mode, Screen Blend Mode, and Subtract Blend Mode. In this example we will demonstrate the Layer Blend Mode.

Tutorial Elements

Movie Symbol that contains several overlapping elements with instance name blendObj_mc


Step One

Add a Movie Symbol to the stage that contains several overlapping elements. Select the symbol with the Selection tool (v key). For information on creating a Movie Symbol, see topic, Movie Symbol Basics.

Step Two

Open the Properties panel (Cmd/F3 (PC-Ctrl/F3)) and type in the name blendObj_mc for the Instance Name.

Step Three

Add a new layer called Actions to the top of the stack.

Step Four

Option double-click (PC - Alt double-click) the keyframe in the Actions layer to open the ActionScript panel.

Step Five

Copy/Paste the following code to the ActionScript panel.

import fl.transitions.Tween;

import fl.transitions.easing.*;

var adjAlpha:Tween = new Tween(blendObj_mc, "alpha", None.easeIn, 0, 1, 3, true);

blendObj_mc.blendMode = BlendMode.LAYER;

Step Six

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The symbol with multiple objects blends properly in the scene.

Dissecting the Code

The first few lines of the code import the Tween class and the easing transitions that will be used to slowly display our symbol.

The next line introduces a Tween variable named adjAlpha and sets the parameters for it to ease into the scene. Parameters include;

1) Instance name is blendObj_mc

2) Object property to be modified is the alpha setting

3) None.easeIn specifies a linear ease in

4) 0, 1, 3 true mean that the transition will take three seconds.

Try commenting out the final line of the code and notice how the objects appear on the stage.


Royalty-Free Stock Video at Pond5