Like this article? We recommend
Like this article? We recommend
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.
- 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.
- 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 3 Add frames out to Frame 15 of the boarder and background layers.
- 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.
- 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 4 Drag the keyframe in the blendImage layer to frame 2, insert a new layer, and rename it text.
- 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 5 Add a text label to identify each blend you have applied.
- 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.
- 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 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.
- 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 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.
- 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.
- 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 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.