Layering Graphics with Blend Modes

Flash 8 is the first version of Flash to include blend modes. If you use Photoshop or other image editing applications, you may be familiar with using blend modes, although for many people this remains a somewhat mysterious tool. Blends are rendering tools that analyze the pixel values of overlapping images (the blend image and the underlying base images) to create a rendered image that is a mix of the two. The type of blend applied will determine the formula used to generate the pixel values in the combined image. Blend modes can be applied to Movie Clip and Button symbol instances in the authoring environment using the Blend mode menu in the Properties panel (shown in Figure 12-15). The blend image will interact with any underlying images that it overlaps — even if they are not on the same layer.

Figure 12-15: The Blend mode menu is available in the Property inspector when you select a Movie Clip or Button instance in Flash 8 Professional.

Tip 

The dotted line breaks that separate the blend modes in the Blend menu may seem arbitrary, but they actually differentiate the blend modes into groups based on the type of effect they will have on images. Keep this in mind while you read the descriptions of each blend mode in the next section — you will start to notice similarities in the modes that are grouped.

Understanding Blend Modes

Predicting the exact outcome of various blend modes is tricky because blends use different formulas on a pixel-by-pixel basis to mix the blended image with underlying images, and the result depends on the pixel values of both the underlying images (or base color) and the overlapping image (or blend color). The most common advice for working with blends is to experiment until you get a result that you like — we encourage you to do exactly that! However, it is helpful to have some idea of how each blend works and what visual problems they can solve. Compare Figure 12-16, which shows two source bitmaps (left and center), overlapped with blend mode set to Layer or Normal (right), to Figure 12-17, which shows how the images appear with Flash blend modes applied to mix the images in various ways.

Figure 12-16: A base image (left) and a blend image (center) overlapped with blend mode set to Normal or Layer create a standard layered graphic with no mixing of pixel values (right).

Figure 12-17: The twelve different effects that can be created by applying Flash 8 Blend modes to layered images — the results will vary depending on the images that are combined, but the formula used for each blend type is consistent. Unlike other blend modes, the Alpha and Erase blend modes require a nested structure with a Layer blend applied to the parent symbol instance.

Note 

You'll notice that we didn't include an image in Figure 12-17 to illustrate the Layer blend mode applied by itself. That is because the Layer blend mode has no effect, unless it is combined with a nested Erase or Alpha blend mode.

The Blend modes available in Flash 8 Professional include the following:

• Normal: The default blend mode for new symbol instances. No interpolation is applied and pixel values are left unchanged.

• Layer: Creates no visual effect on its own, but is required for Alpha and Erase blend modes to work.

• Darken: Compares the brightness of the pixels in the base image with the pixels in the blend image. Pixels in the base image that are lighter than the blend image are replaced with pixels from the blend image. Pixels in the base image that are darker than the blend image are left unchanged.

• Multiply: Multiplies the RGB values of the pixels in the base image with the pixels in the blend image. The resulting pixels are a darkened combination of both the base image and the blend image. Multiplying any color with black results in solid black; multiplying any color with white leaves the pixels unchanged.

• Lighten: Compares the brightness of the pixels in the base image with the pixels in the blend image. Pixels in the base image that are darker than the blend image are replaced with pixels from the blend image. Pixels in the base image that are lighter than the blend image are left unchanged. The blend image always disappears when it's layered over white.

• Screen: Analyzes the color values and multiples the inverse of the blend and base colors. The resulting pixels are a lightened combination of both the base image and the blend image. Screening with black leaves the base image unchanged. Screening with white produces solid white. The blend image always disappears when it's layered over white.

• Overlay: Pixels are screened or multiplied depending on the pixel values in the base image. If the base color is lighter than mid-gray, the image is lightened (screened), and if the base color is darker than mid-gray, the image is darkened (multiplied). The blend image overlays the base image while preserving the highlights and shadows of the base image. The resulting image is an even blend of the base image and the blend image, usually with increased contrast in both images. Overlaying black results in a shaded version of the base image. Overlaying white results in a bleached version of the base image. The blend image disappears when it's layered over any pure color (black, white, pure red, pure green, etc.).

• Hard light: Pixels are screened or multiplied, depending on the pixel values in the blend image. If the blend color is lighter than mid-gray, the image is lightened (screened). If the blend color is darker than mid-gray, the image is darkened (multiplied). The base image is mixed with the blend while preserving the highlights and shadows of the blend image. Overlaying pure black or pure white results in solid black or solid white, respectively.

• Add: Adds the color values of the blend image to the color values of the base image. The result is a bleached-out combination of the two images. Adding pure white results in a solid white image; adding pure black has no effect on the base image.

• Subtract: Subtracts the blend color value from the base color value. The result is a darkened combination of the two images. Subtracting pure white from any color results in a solid black image. Subtracting pure black has no effect on the base image.

• Difference: Analyzes the color values in the base and the blend and subtracts the brighter values from the darker values. The result is a reversal of color values. Black blended with any color has no effect. White blended with any color inverts the color. The resulting image looks like a film negative of the combined images.

• Invert: Inverts the base image in any areas overlapped by the blend image. The contents of the blend image have no bearing on the transformation of the base color values — the blend image acts merely as an "active area" for the inversion effect.

• Alpha: Alpha blend mode can be used to apply the contents of a nested Movie Clip with alpha areas as a mask for an image in a parent Movie Clip with Layer blend mode applied.

• Erase: Erase blend mode can be used to apply the contents of a nested Movie Clip as an eraser to cut out an area of an image in a parent Movie Clip with Layer blend mode applied.

Tip 

Using a solid fill with Alpha set to 0% in an Alpha blend will have the same effect as using a solid fill in an Erase blend.

Applying Basic Blends

That's a lot of visual calculation to try and imagine without actually using blends. The steps for applying the "basic blends" (all but Alpha and Erase) are straightforward:

1. Select a Movie Clip or Button symbol instance that you want to use as a blend image to layer with underlying base images.

   Tip 

   Images on layers above the layer with the blend symbol instance will not be transformed by the blend mode. Don't forget that you can use the Modify ⇨ Arrange commands if you need to modify the stacking order of images on the same layer.

2. Click the Properties tab in the Property inspector and from the Blend menu, select a blend type.

That's it! You can see how the blend image interacts with different base images by dragging it to overlap other images in your Flash authoring environment. The Color menu and Filters can be used in combination with blend modes to get different effects. All of these effect tools will interact to transform graphics rendered in the authoring environment, but they will remain editable and each can be adjusted independently on an instance level. You can apply multiple blend modes on the same layer, but only one blend mode to any single symbol instance. The only compound blend modes are Alpha and Erase, which must be applied on a symbol timeline and combined with a Layer blend mode on the parent symbol instance, as we describe in the next section.

Caution 

The background color of your Flash movie will interact with blend modes too. This is helpful to remember if the blend image is larger than the base image and you start getting unexpected results in the overhang areas. Applying a Layer mask to the blend image so that it is trimmed to match the base image will remove any unwanted overhang areas that are mixing with the background color.

Applying Compound Blend Modes: Alpha and Erase

Alpha and Erase blends are a great complement to Flash's standard masking tools — which can be counterintuitive at times. If you want to create a cutout in a shape using a traditional mask, you actually have to create a shape on a mask layer that covers all the areas except the area you wish to cut out. If you have been working in Flash for a while, this workflow is probably second nature, but when it comes to more subtle mask effects, like gradients or irregular shapes, it can be a headache to have to reverse-engineer a mask graphic. With Alpha blends, what you see is what you get — or rather, what you don't see is what you won't get! The steps for creating a compound blend are as follows:

1. Create a Movie Clip with content that will function as the base image (or convert an existing graphic that you want to mask into a Movie Clip).

2. Open the Movie Clip in Edit mode to access the Movie Clip timeline: Double-click an instance on the Stage or the symbol name in the Library list.

3. Create a new layer on the Movie Clip timeline above the existing content that will be the base image for the Alpha or Erase blend. To protect the base image(s), you may want to lock all layers but the new layer.

   Note 

   The base image or color can be any graphic type — primitive shape, Drawing Object, bitmap, or symbol instance — as long as it nested inside of a Movie Clip or Button symbol. The blend image has to be a Movie Clip or Button symbol instance.

4. In the new layer, create a graphic that will act as a mask — blend masks are the opposite of normal Flash layer masks in that the content in the Alpha or Erase blend symbol instance will define an area to make invisible in the base image rather than define an area to make visible.

   Caution 

   Any content in a symbol instance with an Erase blend mode applied will define the area to be punched out of (or erased from) the underlying base image. The content of a symbol instance with an Alpha blend mode applied will have no effect unless it contains areas with transparency — the amount of information erased from the base images will match the level of Alpha transparency in the blend symbol instance. A symbol instance with content set to 0 percent Alpha and applied as an Alpha blend will have the same effect as an Erase blend.

5. Convert the content on the blend layer into a Movie Clip or Button symbol.

6. Select the symbol instance and position it on the Stage (still on the base image Movie Clip timeline) to overlap the base image so that it defines the area you want to Erase or Alpha out, then use the Blend menu in the Properties panel to apply an Alpha or Erase blend mode. The content of the blend image will disappear, but don't panic — continue to the next step to complete the compound blend.

7. Return to the Main Timeline: Double-click an empty area of the Stage or use the Scene button above the Timeline.

8. Select the parent symbol instance (that contains your base image and the currently invisible blend image), and use the Blend menu to apply a Layer blend. (If you opened the base symbol from the Library in Step 2, make sure you have an instance dragged onto the Stage on the Main Timeline so you can apply the Layer blend mode to the instance.)

9. Voila! You should see the content of your blend image punched out (Erase blend) or rubbed out (Alpha blend) of the base image — either the background color of the Flash movie or any underlying images on the Stage will be visible through the empty areas created in the base image.

On the CD-ROM 

Open Erase_blend.fla from the Blends folder in the ch12 folder on the CD-ROM if you want to analyze an example of the nested symbol structure required to render Erase and Alpha blend modes successfully.

In addition to supporting a more intuitive workflow for creating masks and enabling Alphabased masks, compound blends can be used to create animated transition effects. Continue to the next section if you would like to try using an Alpha blend to create an animated color fade effect.

Creating an Animated Alpha Blend

The following example uses an animated Alpha blend to selectively fade out a black and white image to reveal a color image. The trick for this effect is to use two instances of the same color image, with the Adjust Color filter applied to make one instance a grayscale version. There are a lot of steps, but the final file structure is straightforward and the effect is pretty cool, so let's get started:

1. Open a new Flash document.

2. Import a color bitmap and convert it to a Movie Clip (or place an existing Movie Clip instance on the Stage — preferably one with bright colors).

3. Place two instances of the Movie Clip on the Stage so that they are layered and aligned — select both instances and use the Vertical Center and Horizontal Center align commands.

4. Select the topmost Movie Clip instance and use the Adjust Color filter to set the Saturation of the image to -100 — this will drain the color out so that it looks grayscale.

5. With the grayscale Movie Clip instance still selected, use the Blend menu in the Properties panel to apply Layer blend mode. You won't see any visible change yet.

6. Double-click the grayscale Movie Clip instance to access the Movie Clip timeline in Edit mode.

7. Create a new layer at the top of the layer stack in the Movie Clip Timeline. Lock the other layer(s) with the bitmap or graphics you plan to use as a base image.

8. Select the Oval tool (O) in the Tools panel and set the Fill color to use a default radial gradient. Use the Color Mixer panel to apply 0 percent Alpha to the right color anchor. This should create a circular gradient fill that has a transparent center that fades out to black. Set the stroke color to None.

9. Click and drag on the Stage to create a circle that covers only a small area in the center of the original image — in our file, the circle image was 100 x 100 pixels.

10. Select the new circle and convert it into a Movie Clip named alpha circle.

11. Use the Blend menu in the Properties panel to apply Alpha blend mode to the alpha circle Movie Clip instance. The circle Movie Clip will disappear, but don't panic. As you can see by the filled keyframe on the layer, the content is still there and you can select it to see the selection outline for the invisible instance.

12. Double-click the alpha circle instance to access the Movie Clip timeline and insert frames (F5) to extend the span of the circle graphic to frame 20. Convert frame 20 into a keyframe (F6).

13. Select the circle graphic in keyframe 20 and use the Transform panel to increase the size of the circle so that it is larger than the bitmap base image. We scaled the circle up to 400 x 400 pixels.

14. Select keyframe 1 (still in the alpha circle timeline), and apply a Motion tween to animate the small circle scaling up to the size of the larger circle in frame 20.

15. In order to see the Alpha blend applied as a mask, you have to return to the Main Timeline (click the Scene button).

16. The grayscale bitmap image should now have an area in the center that is "erased" in a soft, gradient circle that allows some of the color image to show through.

17. The animated effect will only be visible in the published .swf file or the Test movie environment. Use Ctrl+Return or z+Return to test the file and preview the animation.

On the CD-ROM 

To see the final result of our example file, open anim_Alpha_blend.swf from the Blends folder in the ch12 folder on the CD-ROM. To analyze the file structure, open anim_Alpha_blend.fla from the same location.

You can always go back inside the nested symbols to modify the level of alpha in the blend image or change the style of fill from a radial gradient to a linear gradient or even a solid fill (with alpha set to less than 100 percent). The level of masking will match the level of alpha in the contents of the Alpha blend symbol instance. Alpha blends can be used to mask any type of image — even bitmaps or primitive shapes. The only requirement is that the Alpha blend must be applied to a symbol instance and that symbol instance must be nested inside a Movie Clip with a Layer blend applied. This is just one way of using a blend mode to create an interesting visual effect. There are many other possibilities, and once you understand the workflow for applying basic and compound blends, the rest is just a matter of experimentation!