View comments | RSS feed

Flash 8 Documentation 
ActionScript 2.0 Language Reference > ActionScript classes > MovieClip > blendMode (MovieClip.blendMode property)

blendMode (MovieClip.blendMode property)

public blendMode : Object

The blend mode for this movie clip. The blend mode affects the appearance of the movie clip when it is in a layer above another object onscreen.

Flash Player applies the blendMode property on each pixel of the movie clip. Each pixel is composed of three constituent colors (red, green, and blue), and each constituent color has a value between 0x00 and 0xFF. Flash Player compares each constituent color of one pixel in the movie clip with the corresponding color of the pixel in the background. For example, if blendMode is set to "lighten", Flash Player compares the red value of the movie clip with the red value of the background, and uses the lighter of the two as the value for the red component of the displayed color.

The following table describes the blendMode settings. To set the blendMode property, you can use either an integer from 1 to 14 or a string. The illustrations in the table show blendMode values applied to a circular movie clip (2) superimposed on another onscreen object (1).





Integer value

String value

Illustration

Description

1

"normal"



The movie clip appears in front of the background. Pixel values of the movie clip override those of the background. Where the movie clip is transparent, the background is visible.

2

"layer"



Forces the creation of a temporary buffer for precomposition for the movie clip. This is done automatically if there is more than one child object in a movie clip and a blendMode setting other than "normal" is selected for the child.

3

"multiply"



Multiplies the values of the movie clip constituent colors by those of the background color, and then normalizes by dividing by 0xFF, resulting in darker colors. This setting is commonly used for shadows and depth effects.

For example, if a constituent color (such as red) of one pixel in the movie clip and the corresponding color of the pixel in the background both have the value 0x88, the multiplied result is 0x4840. Dividing by 0xFF yields a value of 0x48 for that constituent color, which is a darker shade than that of the movie clip or that of the background.

4

"screen"



Multiplies the complement (inverse) of the movie clip color by the complement of the background color, resulting in a bleaching effect. This setting is commonly used for highlights or to remove black areas of the movie clip.

5

"lighten"



Selects the lighter of the constituent colors of the movie clip and those of the background (the ones with the larger values). This setting is commonly used for superimposing type.

For example, if the movie clip has a pixel with an RGB value of 0xFFCC33, and the background pixel has an RGB value of 0xDDF800, then the resulting RGB value for the displayed pixel is 0xFFF833 (because 0xFF > 0xDD, 0xCC < 0xF8, and 0x33 > 0x00 = 33).

6

"darken"



Selects the darker of the constituent colors of the movie clip and those of the background (the ones with the smaller values). This setting is commonly used for superimposing type.

For example, if the movie clip has a pixel with an RGB value of 0xFFCC33, and the background pixel has an RGB value of 0xDDF800, the resulting RGB value for the displayed pixel is 0xDDCC00 (because 0xFF > 0xDD, 0xCC < 0xF8, and 0x33 > 0x00 = 33).

7

"difference"



Compares the constituent colors of the movie clip with those of its background, and subtracts the darker of the values of the two constituent colors from the lighter one. This setting is commonly used for more vibrant colors.

For example, if the movie clip has a pixel with a RGB value of 0xFFCC33, and the background pixel has an RGB value of 0xDDF800, the resulting RGB value for the displayed pixel is 0x222C33 (because 0xFF - 0xDD = 0x22, 0xF8 - 0xCC = 0x2C, and 0x33 - 0x00 = 0x33).

8

"add"



Adds the values of the constituent colors of the movie clip to those of its background, applying a ceiling of 0xFF. This setting is commonly used for animating a lightening dissolve between two objects.

For example, if the movie clip has a pixel with an RGB value of 0xAAA633, and the background pixel has an RGB value of 0xDD2200, the resulting RGB value for the displayed pixel is 0xFFC833 (because 0xAA + 0xDD > 0xFF, 0xA6 + 0x22 = 0xC8, and 0x33 + 0x00 = 0x33).

9

"subtract"



Subtracts the values of the constituent colors in the movie clip from those of the background, applying a floor of 0. This setting is commonly used for animating a darkening dissolve between two objects.

For example, if the movie clip has a pixel with an RGB value of 0xAA2233, and the background pixel has an RGB value of 0xDDA600, the resulting RGB value for the displayed pixel is 0x338400 (because 0xDD - 0xAA = 0x33, 0xA6 - 0x22 = 0x84, and 0x00 - 0x33 < 0x00).

10

"invert"



Inverts the background.

11

"alpha"



Applies the alpha value of each pixel of the movie clip to the background. This requires the "layer" blendMode setting to be applied to a parent movie clip. For example, in the illustration, the parent movie clip, which is a white background, has blendMode = "layer".

12

"erase"



Erases the background based on the alpha value of the movie clip. This requires the "layer" blendMode to be applied to a parent movie clip. For example, in the illustration, the parent movie clip, which is a white background, has blendMode = "layer".

13

"overlay"



Adjusts the color of each bitmap based on the darkness of the background. If the background is lighter than 50% gray, the movie clip and background colors are screened, which results in a lighter color. If the background is darker than 50% gray, the colors are multiplied, which results in a darker color. This setting is commonly used for shading effects.

14

"hardlight"



Adjusts the color of each bitmap based on the darkness of the movie clip. If the movie clip is lighter than 50% gray, the movie clip and background colors are screened, which results in a lighter color. If the movie clip is darker than 50% gray, the colors are multiplied, which results in a darker color. This setting is commonly used for shading effects.

If you attempt to set the blendMode property to any other value, Flash Player sets it to "normal".

However, if you set the property to an integer, Flash Player converts the value to the corresponding string version:

this.createEmptyMovieClip("mclip", this.getNextHighestDepth());
mclip.blendMode = 8;
trace (mclip.blendMode) // add

Availability: ActionScript 1.0; Flash Player 8

Example

The following example sets up two movie clips with gradient fills, and changes the blend mode of the one in the foreground every second. In order to have the "alpha" blend mode show up with an effect, the gradient for the mc2 movie clip includes a range of alpha ratios, and the "layer" blend mode is applied to the parent movie clip (this.blendMode="layer"). 

    this.createEmptyMovieClip("mc1", this.getNextHighestDepth());
    this.createEmptyMovieClip("mc2", this.getNextHighestDepth());
    this.blendMode="layer";
    this.createTextField("blendLabel", this.getNextHighestDepth(), 50, 150, 100, 100)
    
    fillClip(mc1, 0x00AA00, 0x22FFFF, 100, 100)
    fillClip(mc2, 0xFF0000, 0x2211FF, 100, 50)
    mc2._x = 33;
    mc2._y = 33;
    
    var blendModeIndex = 0;
    
    setInterval(changeBlendMode, 1000);
    function changeBlendMode() 
    {
        mc2.blendMode = blendModeIndex % 14 + 1 ;
            // values 1 - 14
    blendLabel.text = (blendModeIndex% 14 + 1) + ": " + mc2.blendMode;
        blendModeIndex++;
    }
    
    function fillClip(mc:MovieClip, color1:Number, color2:Number,
                alpha1:Number, alpha2: Number) 
{
        matrix = {a:100, b:0, c:0, d:0, e:100, f:0, g:50, h:20, i:1};
        mc.beginGradientFill("linear", [color1, color2], [alpha1, alpha2], [0, 0xFF], matrix);
        mc.lineStyle(8,0x888888,100)
        mc.moveTo(0, 0);
        mc.lineTo(0, 100);
        mc.lineTo(100, 100);
        mc.lineTo(100, 0);
        mc.lineTo(0, 0);
        mc.endFill();
    }

If your SWF file includes a version 2 component, use the version 2 components DepthManager class instead of the MovieClip.getNextHighestDepth() method, which is used in the previous example.

Version 8

Comments


Fumio Nonaka said on Sep 16, 2005 at 6:37 PM :
You can set the property by an integer value as well as a string value.
However, the integer value is converted to a string and the property itself
stores a string value. Therefore, if you test the property, a string value
should be compared with it.

// Frame Action
var _mc:MovieClip = this.createEmptyMovieClip("my_mc", 1);
trace(_mc.blendMode); // [Output]: normal
trace(_mc.blendMode == "normal"); // [Output]: true
trace(_mc.blendMode == 1); // [Output]: false
_mc.blendMode = 1;
trace(_mc.blendMode); // [Output]: normal
trace(_mc.blendMode == "normal"); // [Output]: true
trace(_mc.blendMode == 1); // [Output]: false

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/8/main/00002444.html