Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

📄 Contents

  1. Blending Process
  2. Working with Blending Modes
  • Print
  • + Share This
Like this article? We recommend

Working with Blending Modes

Blending modes can be applied only to button and movie clip symbols. Although the next series of instructions assumes that you know how to convert an object to a movie clip symbol, I will show you how to set up your blending objects so you can apply each of the blending modes to compare and contrast their similarities and differences. After completing this exercise, you will have no trouble experimenting on your own with each of the Flash Professional 8 blending modes. You will also have a handy reference file containing labeled examples of each of Flash’s blending modes.

  1. The open blendBasics.fla file consists of three layers: a background layer, a layer containing the boarder image, and a layer containing the blend image. Notice that the blend image layer is on top and contains a colored object matching the shape of the boarder’s jacket. We will be applying blending modes to this colored shape to see how it blends with the colors in the jacket underneath.
  2. On Frame 15 of the Timeline, click on the boarder layer and drag down to the background layer so both frames are selected. Press F5 to add frames to Frame 15 of both layers (see Figure 3).
    Figure 03

    Figure 3 Add frames out to Frame 15 of the boarder and background layers.

  3. Click on Frame 1 of the blendImage layer and drag the keyframe to Frame 2 (see Figure 4). This may take several tries to accomplish successfully. If you experience difficulties, undo the action (Ctrl+Z [Windows] or Cmd+Z [Mac]) and try again. This will display just the boarder image in one frame so you can compare the blends you will be adding shortly to the original image. Next you will create a layer to place the labels of each blend.
  4. In the Timeline, click the Insert Layer button to add a new layer to the Timeline. Double-click the new layer and rename it text (see Figure 4).
    Figure 04

    Figure 4 Drag the keyframe in the blendImage layer to frame 2, insert a new layer, and rename it text.

  5. With the text layer still selected, select the Text tool from the Toolbar. Click below and to the right of the boarder to add a text label to that location of the stage. Enter Original Image in the new text field, as shown in Figure 5.
    Figure 05

    Figure 5 Add a text label to identify each blend you have applied.

  6. Select Frame 2 of the text layer and press F6 to add a keyframe. Double-click in the text field to select all the text and change it to read Normal. (Normal is the default blend setting.)

    You now have everything in place: the blend image above the original image and a text layer to hold the label for each blending mode. Next you will add keyframes to the blendImage layer and start applying blending modes.

  7. Select Frame 3 of the blendImage layer and press F6 to add a keyframe. This process places another instance of the blendImage_mc movie clip into Frame 3. Make sure that the blendImage instance is still selected and that the Properties inspector is open (Ctrl+F3 [Windows] or Cmd+F3 [Mac]). In the Properties inspector, choose Alpha from the Color drop-down menu. Leave the Alpha setting at 50%, the default value. Insert another keyframe in Frame 3 of the text layer and change to text to read: Normal 50% Alpha (see Figure 6).
    Figure 06

    Figure 6 Set the alpha setting of a new blendImage keyframe to 50%.

    This example demonstrates that you can still mix colors of artwork on different layers even without Blending Modes. Let’s now mix colors using Flash’s Blending Modes.

  8. Add another set of keyframes (F6) to Frame 4 of the text and blendImage layers. With the blendImage instance selected on the stage, change the Color setting in the Properties inspector from Alpha to None. Click to open the Blend menu and choose Darken from the drop-down list. Double-click in the text file and change the text to read Darken (see figure 7).
    Figure 07

    Figure 7 Apply the Darken blend to a new keyframe.

    The Darken blend replaces pixels that are lighter than the blending color. So in this case the lighter areas of the jacket (the pockets) have been affected more (they are a darker shade of red). You skipped the Layer blend because, in this case, it will appear the same as the Normal blend. Its purpose is to enable you to mix the Alpha blend of movie clips located inside other movie clips.

  9. Select Frame 5 on the Timeline and add another set of keyframes (F6) in the text and blendImage layers. Select the blendImage instance on the Stage with the Selection tool. From the Blend drop-down menu in the Properties inspector, apply a Multiply blend to the blendImage movie clip. Change the text label to read Multiply.
  10. Continue adding keyframes all the way out to Frame 15 in the text and blendImage layers. Set the blend of the blendImage movie clip to the next option in the Blend drop-down menu and change the text label to reflect the blend applied (see Figure 8).
    Figure 08

    Figure 8 Continue adding keyframes to the text and blendImage layers, setting the blend of the blendImage movie clip to the next option in the Blend drop-down menu. Change the text label to reflect the blend applied.

By the time you reach the last blend, Erase, you will have a good idea of the various types of compositing effects you can achieve using Flash’s various blending modes. You will also have a handy file containing labeled examples of all of Flash’s blending modes that you can use for future reference.

  • + Share This
  • 🔖 Save To Your Account