Tuesday, September 13, 2005

Applying Erase blend mode in Flash Professional 8

One of the most compelling designer oriented features in Flash Professional 8 is the ability to add graphic filters (drop shadow, glow, bevel, etc...), and blend modes (Darken, Multiply, Overlay, Invert, erase, etc.). These features lift the graphics capabilities of Flash to a new level. With previous versions of Flash, designers had to depend on graphics editing software like Photoshop or Fireworks to apply these effects to bitmaps, and then used to import them into Flash. This work flow had a major impact on the file size of the resulting swf.

Enter Flash Professional 8 – The filter and blend mode graphic effects are rendered at the client end, by the new Flash Player 8! And the result, the generated SWF just has instructions to tell the player to apply filters and blend modes, and they are rendered on the particular graphic, at runtime – freeing the SWF of the additional file size – and what’s more? These effects can be changed dynamically, using actionscript code!

What do they mean by blend modes?

“You can achieve a variety of compositing effects by using blend modes to change the way the image of one object on the Stage is combined with the images of any objects beneath it.
Read more about blend modes on Macromedia LiveDocs here

There are various blend modes available with Flash Professional 8 (for more details click here). Adding blend modes is a simple task with Flash Professional 8. Just select the symbol (movieclip / button) on top, and select the appropriate blend mode, in the blend modes dropdown list. You'll be done – Erase blend mode is an exception. And this post is just about that.

Erase blend mode is used to erase (reduce alpha to 0) the portion of the background graphic, based on the shape and position of the symbol above it. To do this, the normal tendency is to create a symbol above the background graphic, and select the erase blend mode. As a user you may expect this to work. But you would see that the symbol to which the blend mode was applied disappears, rather than erasing the background graphic. To make this work, do the following:

  1. Select erase blend mode to the symbol on top of the background graphic.
  2. Select the symbol and the background graphics, and combine them into a movieclip.
  3. On this parent movieclip, apply “Layer” blend mode.


9 / 14/ 2005 - I just checked Tinic Uro's blog, and he has given a great explanation about blend modes in Flash.(If you didnt know, he is the developer who implemented blend modes in Flash Player). You can read his post here.


Anonymous said...

Thank you for the post, I was always using Photoshop to free some space on flash by editing its images and then import them. Helped allot.

Anonymous said...

Arul Prasad, thanks for your clear and concise "how to" on the erase mode. I was pulling my hair out on why "erase" doesn't work when all the other blending modes work fine. Not the most intuitive way to implement a blending mode. (Dear Adobe, if you ever read this, please fix the way "erase" works and possibly hire some good UI designers in the process.)

Jean Delefrati said...

Thank you very much! Now it works!

Anonymous said...

Thank you very much for sharing knowledgeable post. i liked it.