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 5×4 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 🙂
Oh not again ;-)!! Didn’t we have that with the windows classes already? – Maybe we should combine our methods into one class then?
Cheers
Mario (ever wise)
ColorMatrixFilter
Flash8 est sorti, et c’est l’occasion de voir ce qu’il a de nouveau sous le capot.
Commençons donc par la classe ColorMatrixFilter.
Unique prérequis, qui facilitera la compréhension des exemples AS 2.0: Vous vous êtes déjà familiarisés quelque
Hey Grant,
Do you know when your matrix article is going to be released at the dev center?
-David
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
Just was I was looking for!!
Cheers from Uruguay, really nice ac
Thanks Grant – very nice
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
Xavier aka zeflasher or xxlm
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
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!
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?
plz can u give me idea how to integrate
flash with asp.net class libarary?
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.
As always, great work Grant (and team).
Folks might also want to check out http://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.
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.
Good morning
nice job! it works perfectly !!!
tks a lot
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.
æå®ä¾æºç ä¸è½½ å/
æ¨æä¾çç±»æä¸ä¼ç¨å
谢谢
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!
中国人民发来贺电