Sacrosanct Design
A blog about Flash Actionscript and related technologies.

• Home
• About
• Resources
• Contact
• RSS

• Categories

  • Design
  • FLV
  • Fuse Kit
  • Papervision3D

• Archives

  • May 2008
  • July 2007
  • May 2007
  • April 2007

Explanation of the Blend Modes

I’ve always thought it was important to understand how the blendModes operate. So here are text book answers to their function, straight from the Adobe LiveDocs.

1. normal- The button appears in front of the background. Pixel values of the button override those of the background. Where the button is transparent, the background is visible.
2. layer- Forces the creation of a temporary buffer for precomposition for the button. This is done automatically if there is more than one child object in a button and a blendMode setting other than “normal” is selected for the child.
3. multiply- Multiplies the values of the button constituent colors by those of the background color, and then normalizes by dividing by 0xFF, resulting in darker colors. This is commonly used for shadows and depth effects. For example, if a constituent color (such as red) of one pixel in the button and the corresponding color of the pixel in the background both have the value 0×88, the multiplied result is 0×4840. Dividing by 0xFF yields a value of 0×48 for that constituent color, which is a darker shade than that of the button or that of the background.
4. screen- Multiplies the complement (inverse) of the button 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 button.
5. lighten- Selects the lighter of the constituent colors of the button and those of the background (the ones with the larger values). This setting is commonly used for superimposing type. For example, if the button 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 0×33 > 0×00 = 33).
6. darken- Selects the darker of the constituent colors of the button and those of the background (the ones with the smaller values). This setting is commonly used for superimposing type. For example, if the button 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 0×33 > 0×00 = 33).
7. difference- Compares the constituent colors of the button with those of its background, and subtracts the darker of the two constituent colors from the lighter one. This setting is commonly used for more vibrant colors. For example, if the button 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 0×222C33 (because 0xFF - 0xDD = 0×22, 0xF8 - 0xCC = 0×2C, and 0×33 - 0×00 = 0×33)
8. add- Adds the values of the constituent colors of the button to those of its background, and applies a ceiling of 0xFF. This setting is commonly used for animating a lightening dissolve between two objects. For example, if the button 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 + 0×22 = 0xC8, and 0×33 + 0×00 = 0×33).
9. subtract-Subtracts the value of the constituent colors in the button from those of the background, and applies a floor of 0. This setting is commonly used for animating a darkening dissolve between two objects. For example, if the button 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 0×338400 (because 0xDD - 0xAA = 0×33, 0xA6 - 0×22 = 0×84, and 0×00 - 0×33 < 0×00).
10. invert- Inverts the background.
11. alpha- Applies the alpha value of each pixel of the button to the background. This requires the “layer” blendMode to be applied to a parent button. For example, in the illustration, the parent button, which is a white background has blendMode = “layer”.
12. erase- Erases the background based on the alpha value of the button. This requires the layer blendMode setting to be applied to a parent button. For example, in the illustration, the parent button, 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 button 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 button. If the button is lighter than 50% gray, the button and background colors are screened, which results in a lighter color. If the button is darker than 50% gray, the colors are multiplied, which results in a darker color. This setting is commonly used for shading effects.