Some word on blend modes in Flash Player 8

Blend modes is one of those features who were long thought impossible to do in the Flash Player. And to be frank, it was indeed the most difficult feature I worked on during this release. Something to understand here is that blend modes are not implemented through the bitmap caching feature like the filters, but it's actually part of the core vector renderer. The two main advantages here are that using blend modes will not use excessive amounts of memory and use the shortest path possible in the rendering pipeline making it acceptable speed wise.

Nevertheless there are some things which need to be understood about this feature. It has limitations performance wise. In fact anytime you use a blend mode, all of the vector content in a particular region of your movie will be handled as it was partially transparent. And as you might know using transparent vectors can be a bit slow if used too gratiously. Experiment and see where they are useful, but do not overuse them. Sometimes precompositing or using bitmap caching might help.

The leads me to the list of modes we currently support. Some of them are better understood than others:

• Multiply


• Screen


• Darken


• Lighten


• Hardlight


• Overlay


• Difference


• Add


• Subtract

We used two sources to implement these blend modes. The main source was the SVG 1.2 draft spec which presents the algorithms working with premultiplied alpha color values which Flash needs. The other one is much easier to understand and is a rather complete list of all known blend modes. This guy did an excellent job of putting this list together. As a side note: I forwarded this link to the FireWorks team a long time ago after I saw that the original plan was to only implement two new modes. Guess what, the new FireWorks 8 blend modes look VERY much like the ones listed on this page now ;-) It was the main source of information for them. Funny how much things have changed since the days were you had to buy expensive books to access this kind of information.

There are two special modes here which are f.ex. not part of Photoshop and that are the 'Add' and 'Subtract' modes. These will do exactly what they say and simply add or subtract color values, alpha, red, green and blue color components separately. I think that the 'Add' blend mode will probably be most used one overall since it's the fastest one (even faster than normal alpha compositing!) and will allow great lighting effects which were essentially only possible in OpenGL or Direct3D. In PhotoShop most users use 'Screen' as a replacement which is very similar.

Some of you who have used Director in a past life and maybe now might think that these are simply 'ink' effects. Well, not really. Flash rather followed the path of SVG, Photoshop and other more modern graphics applications. Directors 'ink' effects are IMO rather binary transfer modes that remind me of the QuickDraw era. Sticking to these blend modes is also more in line with what can be easily implemented in graphics hardware.

For those computer scientist out there you might wonder why we did not include a full Porter-Duff compositing model into the Flash Player. Frankly I think this model is pretty much irrelevant for most designers and I had no desire to add a very complex feature which does not bring anything useful to the table. In addition we would have had to implement a JIT for compositing functions just to make it fast enough and that was frankly out of the scope for this release.

There are some 'special' blend modes I should talk about:

• Layer


• Invert


• Alpha


• Erase

The layer blend mode is probably the most interesting here. What does it do? Well, have you ever tried to place several stacked bitmap images into a movie clip and apply a alpha color transform on it? If you used Flash in the past, the alpha color transform would be applied separately to each image instead of being applied to the whole stack of images taken together. This means that images in the back would show through opaque images stacked on top. Now if you set a movie clip to use the layer blend mode, the images inside it will first be composed together and then the alpha color transform is applied on top of it. Once you get a hang of this you'll see that this makes Flash more compatible with applications like FireWorks or PhotoShop which work this way all the time.

The invert blend mode is a special version of the difference blend mode. I added this since a lot of times you simply want to invert an area (for selection f.ex.) without having to fiddle with the color of the top movie clip to get the same effect. It's also a tad faster than the difference mode.

That leaves alpha and erase. If you apply an alpha blend mode on a movie clip it will extract the alpha of that movie clip and try to apply it to the background. The erase mode will invert the alpha before applying it to the background. Now, and that probably the hardest part to understand, you can not change the alpha of the root stage. It's always opaque. In that sense this is very different from FireWorks and Photoshop which will show you a pattern where the transparent areas show through. This means applying an alpha blend mode on a movie clip on the root timeline will have NO effect. Instead you need a movie clip with the layer blend mode set (or any other blend mode) and move your movie clips which should be alpha blended inside it. A movie clip with the layer blend mode set is allowed to have a transparent background as it will be recomposited on the background later. I hope this makes it clear somehow. Our documentation guys certainly had a hard time understanding this, I am still looking for better ways of explaining it...