Sunday, July 29, 2007

Applying Blending Modes

The new features in Macromedia Flash 8 Professional continue to extend the Flash authoring tool’s interactivity and functionality; providing designers and developers both with capabilities that before its arrival were the sole realm of programs such as Photoshop. Even importing those files to Flash later too dramatically increase the file size of the project. Now you can create such content directly in Flash 8 with more flexibility, control and smaller file sizes. In this article I’ll introduces you to one of those capabilities and by the time you're finished, you should be able to effectively implement it in your Flash applications with confidence.

If you have used graphics design softwares as Photoshop then you are probably familiar with the image compositing effects called blend modes and filters (image special effects). I’ll cover how to use filters effectively in the next article.

Blend modes let you create composite images; you can use them to achieve a variety of compositing (It is the process of varying the transparency or color interaction of two or more overlapping objects) effects by changing the way the image of one object on the Stage is combined with the images of any objects beneath it.

O.K. let’s workout step by step how to apply blending modes for some interesting effects. Applying blends to your Flash objects is a very straightforward process.

First you’ll have to convert the objects that you want to blend to either a button or movie clip symbol as blending modes do not work with graphic symbols.

Adjust the color and transparency of the movie clip instance using the Color pop-up menu in the Property inspector.

Then you should drag the symbol over another object on the Stage so that there is at least some overlap. The symbol can be on the same layer as the second object or they can be on separate layers.

Position the movie clip with the blend mode over the graphic symbol whose appearance you want to modify. Select the specific blend mode from the Blend pop-up menu in the Property inspector for movie clips. Then apply blend mode to the selected movie clip instance accordingly. Done!

May be you shall get it all with this simple example:-

o I open new Flash Document and import a PSD picture from Webshots on the stage. Select the PSD picture on the Stage. Select Modify > Break Apart. This breaks the instance into its component graphic elements. Use the painting and drawing tools to modify these elements as desired. (This is Just to add a cool look as shown in the picture below).

o Draw another circle nearby having the same Dimensions and convert each of those into a movie clip.

.

o Drag one symbol on another so that it overlaps. You can now see the blend button and all the blending modes in the lower right corner of the Stage in property Inspector.

o Finally I start experimenting with the blend mode from the Blend pop-up menu in the Property inspector to have the desired look as per my likes. In order to achieve the effect you want; you should better experiment with both the color and transparency settings of the movie clip and the different blend modes.

Blending mode basically have these elements:

Blend color

The color applied to the blend mode.

Opacity

The degree of transparency to which blending is applied.

Base color

The color of pixels underneath the blend color.

Result Color

The result of the blending effect on the base color

Blend Modes:

Description

Normal

Applies color normally, without any interaction with the base colors.

Layer

Lets you stack movie clips on top of each other without affecting their color.

Darken

Replaces only the areas that are lighter than the blend color. Areas darker than the blend color don't change.

Multiply

Multiplies the base color by the blend color, resulting in darker colors.

Lighten

Replaces only pixels that are darker than the blend color. Areas lighter than the blend color don't change.

Screen

Multiplies the inverse of the blend color by the base color, resulting in a bleaching effect.

Overlay

Multiplies or screens the colors, depending on the base colors.

Hard light

Multiplies or screens the colors, depending on the blend mode color. The effect is similar to shining a spot light on the object.

Difference

Subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value.

Invert

Inverts the base color.

Alpha

Applies an alpha mask.

Flash provides the following blend modes:

It’s better if you should experiment with all the blending modes available in Flash 8 on the range of overlapping graphic objects to get the lot varying and amazing results. I’m sure now you get familiar with one of the latest feature of Flash 8. You just try changing the order of the layers, change color transparency, use different blends and animate the movie clip to create fascinating desired composite graphical effects that are dynamic and can react to user interactivity.

No comments: