The new ColorMatrixFilter in Flash 8 provides enhanced color manipulation capabilities to developers. If you've played around with it, you've noticed that the ColorMatrixFilter accepts a 5x4 matrix (20 element Array in Flash) and uses specific indices in that array as multiplication values for Red, Green, Blue and Alpha, as well as offset values (we are currently writing an article explaining different types of matrices in depth, including the ColorMatrix, which you should see at Macromedia's Developer Center in the near future). The ColorMatrix class was born a while back out of the need to have a more "friendly" programmatic interface to manipulating these color values.
ColorMatrix provides a way to adjust Brightness, Contrast, Saturation and Hue based on a range of numeric values as well as multiply matrices. The ColorMatrix can then be passed into ColorMatrixFilter to apply color adjustments. The added bonus of ColorMatrix is that it uses the same calculations to generate matrix values as the Flash 8 IDE (with the exception of contrast adjustment which uses linear interpolation to provide a bit more granularity).
Here is an example which uses ColorMatrix to adjust colors together with the MultiTween class to tween ColorMatrix values using 2 different types of tweens.
You can download the source here.
In writing this entry, I also noticed that the ever wise Quasimondo has written his own ColorMatrix class. Cheers :)
Comments (18)
Oh not again ;-)!! Didn't we have that with the windows classes already? - Maybe we should combine our methods into one class then?
Cheers
Posted by: Mario Klingemann at September 16, 2005 09:27 AMMario (ever wise)
URL: http://www.quasimondo.com
Hey Grant,
Do you know when your matrix article is going to be released at the dev center?
-David
Posted by: Dbot at November 14, 2005 02:48 PMURL:
http://labs.blitzagency.com/?p=84
I posted this demo using Grant's color matrix a while back. Runtime conversion of an FLV to black/white - color matrix ROCKS \m/
Thanks G!
JG
Posted by: John Grden at March 31, 2006 11:35 AMURL: http://www.osflash.org/red5
Just was I was looking for!!
Cheers from Uruguay, really nice ac
Posted by: Emiliano at May 11, 2006 07:15 AMURL:
Thanks Grant - very nice
Posted by: Pete at June 21, 2006 04:25 AMURL:
Hello grant...
Coming from ur tut on adobe website.
http://www.adobe.com/devnet/flash/articles/matrix_transformations_print.html
I have a question for you...
I want to be able to "paint" on movie clip.
I'm developing an application loading png of parts of a house. Then the user can chose a color with a color picker and apply it to the part.
What I've done for this is converting firts the image in grayscale, then dividind by the luminance then by 2 (to get the grayscale in the average luminance). Then I'm applying the color adding, in the offset of each color, the luminance of the new color...
I'm quite new in color manipulation and I was wondering if you find a better way to do it. (or if this one is correct)
Actually for now I have to trick it, cause if it's black 0x000000, then I'm losing the shadow and light on my parts (which is normal cause *0...) So if it's black 0x000000 the value will be 0x333333.
You can see it working here:
http://dev.webbymx.net/_dev/hardie
Sorry for this long post but I've check around for some tips about this and didn't fnid any...
Cheers
Posted by: zeflasher at July 31, 2006 11:37 PMXavier aka zeflasher or xxlm
URL: http://dev.webbymx.net
I regularly tint movieclips in the IDE and want to be able to tween their color using the ColorMatrixFilter. However when I apply the matrices using your class nothing appers. Only when I remove the tint in the IDE or before the matrix operation starts can i get the matrix filter to appear.
Does anybody have a solution for transforming using matrices from a movieclips current tint to another?
Thanks
Posted by: Pintje at August 24, 2006 06:33 PMURL:
Grant,
Awesome work! I've used this on two projects now, and it's worked very well. One thing, though, is that you're putting a hard ceiling on the value for brightness @ 100, when it appears that the value set via the IDE varies between 0 and 255. 255 allows it to go all the way to white, which happens to be what I'm doing at the moment :).
Thanks again!
Posted by: Matt White at January 16, 2007 04:32 PMURL: http://blog.thermalcreative.com
Hi,
Here's what I am trying to do:
I have a bunch of faces, all in shades of red, with major part of them being perfectly Red(0xFF0000).
Now I am trying to hue-shift the color to give them specific skin colors, a light shade of brown(0xF2BC85) for example.
Looking at photoshop I realized that Red has HSB values (0, 100%, 100%), while this shade of Brown has HSB values of (30, 45%, 95%)
So I took a perfectly Red movieclip, added it to the stage in your demo. I made the start HSB values (0,100,100) and the end HSB values (30,45,95). After I applied the transformation, I took a screenshot and checked the transformed color's values in Photoshop. They turn out to be HSB values (19,100, 100) which is the color 0xFF5200 and *not* the color I expected(0xF2BC85).
The contrast is 0 in all the cases.
Am I missing something here? What should I be doing in order to match the colors precisely?
Posted by: gogsrox at June 17, 2007 10:32 AMURL: http://www.studiogaurav.com
plz can u give me idea how to integrate
Posted by: suyog at July 10, 2007 12:22 AMflash with asp.net class libarary?
URL:
Hi there,
I'd like to use this from ActionScript 3.0, but your license says I'm not allowed to modify it. Is there an AS43 version of this I could make? Or would you give me permission to convert it to AS3?
Thanks.
Posted by: Dobes at July 30, 2007 07:55 PMURL: http://dobesland.wordpress.com
As always, great work Grant (and team).
Folks might also want to check out www.TweenFilterLite.com where you can find something similar based on the TweenLite tweening engine. TweenFilterLite is available in AS2 and AS3 and can tween contrast, saturation, hue, colorization, brightness, threshold, etc. as well as other filters like Blurs, Glows, etc. It's free too of course.
Posted by: Jack at August 14, 2007 11:30 AMURL: http://blog.greensock.com
If you look closely at the math, the color matrix "hue" translation is not the same as the HSB hue translation. The math is quite a bit different. The results look similar but if you take pixel samples and compare them to true hue translations in PS you'll notice a definite difference.
Posted by: Brian at September 12, 2007 10:59 AMURL: http://www.picnik.com/
Good morning
Posted by: Brad Stamper at November 23, 2007 09:57 AMURL:
nice job! it works perfectly !!!
tks a lot
Posted by: Kranf at April 2, 2008 03:29 AMURL: http://www.lapinblanc.org
Hi. Just came across this entry. I am already using Quasimondo's ColorMatrix class and it working properly for me. I am using it inside a bit blitting application in an enterFrame event, so performance is important to me. Do you have any information on whether your code is faster than Quasimondo's class or vice versa? Any input on that is appreciated.
Posted by: RichSad at November 5, 2008 12:37 PMURL: http://www.playhardsports.com
有实例源码下载 吗/
Posted by: jialong at November 15, 2008 01:01 AM您提供的类我不会用啊
谢谢
URL:
Hi! Great app! How would I apply a certain hue/sat/bri to a certain photo without the appi, just with code? Thanks and merry Christmas!
Posted by: Brian at December 24, 2009 10:02 AMURL: