by

Flash 8 Source – ColorMatrix

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 🙂

If you enjoyed this, you might like these articles…

ColorMatrix Class in AS3, Source Code: MultiTween Class, Flash 8: Jungle-g Experiment, Source Code Licenses and Flash/Flex

20 Comments

  1. Mario Klingemann September 16, 2005 at 9:27am

    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)

  2. Tweenpix September 20, 2005 at 5:27pm

    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

  3. Dbot November 14, 2005 at 2:48pm

    Hey Grant,

    Do you know when your matrix article is going to be released at the dev center?

    -David

  4. John Grden March 31, 2006 at 11:35am

    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

  5. Emiliano May 11, 2006 at 7:15am

    Just was I was looking for!!

    Cheers from Uruguay, really nice ac

  6. Pete June 21, 2006 at 4:25am

    Thanks Grant – very nice

  7. zeflasher July 31, 2006 at 11:37pm

    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

  8. Pintje August 24, 2006 at 6:33pm

    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

  9. Matt White January 16, 2007 at 4:32pm

    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!

  10. gogsrox June 17, 2007 at 10:32am

    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?

  11. suyog July 10, 2007 at 12:22am

    plz can u give me idea how to integrate

    flash with asp.net class libarary?

  12. Dobes July 30, 2007 at 7:55pm

    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.

  13. Jack August 14, 2007 at 11:30am

    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.

  14. Brian September 12, 2007 at 10:59am

    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.

  15. Brad Stamper November 23, 2007 at 9:57am

    Good morning

  16. Kranf April 2, 2008 at 3:29am

    nice job! it works perfectly !!!

    tks a lot

  17. RichSad November 5, 2008 at 12:37pm

    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.

  18. jialong November 15, 2008 at 1:01am

    有实例源码下载 吗/

    您提供的类我不会用啊

    谢谢

  19. Brian December 24, 2009 at 10:02am

    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!

  20. 中国人民 August 7, 2012 at 9:00pm

    中国人民发来贺电

Comments are closed.