by Lanny McNie

ColorMatrix Class in AS3

Something I’ve been meaning to do for a while now is port our ColorMatrix class to AS3. It’s a fairly simple conversion, but is still a handy utility to have on hand.

If you haven’t used the ColorMatrix class before, here is the description from when we first released it in 2005:

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).

Download the updated source here

Here is a quick sample of it in use. This demo is included in the download package.

Lanny McNie

As the dev mgr, Lanny oversees the technical day-to-day details of production and makes sure things get out the door.

@astrostyle

If you enjoyed this, you might like these articles…

Flash 8 Source – ColorMatrix, Source Code: MultiTween Class, AS3 Kaleidoscope Class, Passing arguments to super class’s constructor

39 Comments

  1. Dark Vyper December 12, 2007 at 3:33pm

    This class is absolutely brilliant – I’ve been needing a class like this for a long time. Good work!

  2. Valters Boze December 13, 2007 at 1:13am

    Sliders would be better for demo purposes 😉

    Thanks for sharing!

  3. Maksus December 13, 2007 at 2:07am

    Good work! This class is perfect. I’ve been needing a class like this.

  4. Ferris December 13, 2007 at 7:19am

    Great work!

    Has anyone ever attempted to translate Flash color matrices to other languages?

    Specifically I’ve got a project where we’re allowing a User to modify an image within Flash but would like to accurately translate the final effect to ImageMagick for export.

  5. brad December 14, 2007 at 8:46am

    This is Brad from the CN talk you gave in Atlanta. Matrix manipulation confounds me so this is really helpful. Thanks for posting it.

  6. Grant Skinner December 17, 2007 at 10:14am

    Ferris,

    It should be fairly easy to translate Flash Color matrices to other languages. The only issue is that Flash uses 4×5 matrices whereas most languages use 5×5 matrices. You’ll note that the ColorMatrix class actually has to “pad” the matrix to 5×5 in order to carry out matrix multiplication.

  7. Mielno December 28, 2007 at 3:54pm

    Great – this class is perfect. Thanks – I’ll be back soon, bye !

  8. Josh January 18, 2008 at 10:12pm

    Using the adjustColor class is removing any filters I had set with AS (but not the ones set on the stage) and vice versa if I re-apply the filter it strips off the color effects…any suggestions for getting around this?

  9. Josh January 18, 2008 at 10:19pm

    Oops, disregard the part about it not affecting some filters…those were unaffected becuase they were on a nested object…but any time they are applied to the same object the new effect removes the previous one.

  10. Cyril February 25, 2008 at 1:30pm

    Super travail, merci !!!!

  11. ladon June 4, 2008 at 10:00pm

    line 80 x = 127+p_val/100*127

    expected ; at end of line

  12. S.Ali July 6, 2008 at 3:00pm

    very nice and thanks for sharing.

  13. Anna July 28, 2008 at 9:10am

    Simple and useful. Thanks.

  14. Aaron August 22, 2008 at 11:35am

    Is there some magic implementation of the ColorMatrix that would handle colorization?

    Like: Every paint programs hue/saturation filter panel has that ‘colorize’ check box that seems to inject a specific hue into grey scale values.

    Being able to turn a white icon blue while maintaining gradients/antialiasing would be a handy tool to have in your back pocket.

    Aaron

  15. Kevin September 9, 2008 at 4:23pm

    Re: “Ferris,

    It should be fairly easy to translate Flash Color matrices to other languages. The only issue is that Flash uses 4×5 matrices whereas most languages use 5×5 matrices. You’ll note that the ColorMatrix class actually has to “pad” the matrix to 5×5 in order to carry out matrix multiplication.”

    — Later versions of ImageMagick (6.3+ I think) have a -recolor option which in theory can take the same 5×5 matrix (with the bottom row being padded with the identity row (0 0 0 0 1)). It does not seem to be able to handle a 5×5 matrix correctly though, but it will recognize a 3×3 matrix which is a subset of the 5×5:

    eg: For 5×5 matrix:

    [RR RG RB RA RO

    GR GG GB GA GO

    BR BB BB BA BO

    AR AB AB AA AO]

    You can input

    [RR RG RB

    GR GG GB

    BR BG BB]

    into the ImageMagick command line convert utility will yield the same color translation:

    Eg: convert original.jpg -recolor ‘.3 .59 .11 .3 .59 .11 .3 .59 .11’ greyscale.jpg

    Note: All of the values in the 3×3 matrix must be positive numbers. For an inversion like ‘-.3 -.59 -.11 -.3 -.59 -.11 -.3 -.59 -.11’ just use ‘.3 .59 .11 .3 .59 .11 .3 .59 .11’ as the matrix but add the -negate flag to the command:

    convert original.jpg -recolor ‘.3 .59 .11 .3 .59 .11 .3 .59 .11’ -negate xray.jpg

    Note: If anyone can figure out how to get the ImageMagick convert program to take the 5th column and/or 4th row values I would appreciate if you post the solution here.

    Thanks,

    Kevin

  16. Bryce September 13, 2008 at 12:42pm

    Works like a charm! Thanks you saved me alot of time. 🙂

  18. Gabor November 4, 2008 at 1:51pm

    sweet, thanks a lot for this!

  19. Jared Christensen November 6, 2008 at 1:28pm

    I was wondering if it is possible to change the color of an image. What I want to be able to do is send a function RGB colors and then have it color the image. Tint sort of does that but changes the background and everything inside of the image. I want it to function like Hue but be able to send an RGB rather then a Hue percentage.

  20. jialong November 15, 2008 at 12:46am

    I can ColorMatrix Class in AS3 example of the source code it?

    Thanks!

  21. Rich December 11, 2008 at 4:06am

    Good work! Cheers 🙂

  22. aminusia January 21, 2009 at 12:39am

    Very simple and helping.

    Thanks!

  23. Nick Polet January 23, 2009 at 5:49am

    Hi,

    superb class, really needed something exactly like this. Very nice work.

    Thanks

  24. Justin Reid March 31, 2009 at 9:39am

    Hmm… I found a BAD bug..

    Zoom in several times. your color transform will break and go back to regular colors.

  25. Tania May 5, 2009 at 3:03am

    Hi, I’m a newbie to Flash but I really like this! I was wondering if anyone could help me understanding if I can add a .mid file or otherwise how can I make it work…Should I take from the zip file some .as file and work on that?What should I do to reseize the equalizer and add a mp3?I know it’s basic, but please, help with that, I’d appreciate it!

  26. Bill October 23, 2009 at 9:50am

    Totaly awesome class! Thanks a bunch!

  27. Adrian Parr January 28, 2010 at 3:18am

    Hi Grant,

    Thanks for writing and sharing the ColorMatrix class, it is very useful. I have used it in a Flash based image editor.

    My client has now asked me if they can have Levels (like there is in PhotoShop). Have you ever seen this done? Any thoughts on how I should go about it?

    Cheers,

    Adrian

  28. Britta Gainey March 8, 2010 at 1:36pm

    Awesome! Exactly what I needed.

    Thanks a lot,

    Britta

  29. Bernardo June 21, 2010 at 12:11pm

    Brilliant. Thank you very much.

  30. Benj July 16, 2010 at 2:35pm

    I’m not worthy!

    I’m not worthy!

    Thanks! Just made my day!

  31. Wyeth Stiles July 22, 2010 at 11:20am

    Hi Grant,

    Is it possible to print out an image that has had a colorMatrixFilter applied to it? I’m just getting the source image color every time. Any help would be greatly appreciated.

  32. angel August 21, 2010 at 7:09pm

    Wow, thanks. This is an awesome little class.

  33. boim September 28, 2010 at 11:32pm

    Thaks for the tutorial and the class. I like this..

  34. Nicolas Siatras October 1, 2010 at 9:33am

    I have tried this class and seems pretty good, although the results are a lot different than those in photoshop, fireworks etc. For example I have a red box, and try to make it yellow. That should normally be 60 hue, but all you get is a brownish yellow. Same goes for teal with 180 or -180 hue. Anyone knows why or how to fix that?

  35. Eduard October 18, 2010 at 12:48pm

    Good Job!!!!, very useful.

  36. Lode Schoors January 14, 2011 at 4:08am

    great class, saved my day thx gSkinner team!

  37. smithfox January 22, 2011 at 12:53am

    It is really a great class, it help us easily operate color’s matrix.

    But I found a issue about the class: adjustXX(value) functions expect a delta value, but not a absolute value, as you know, Flex Animate framework just pass the absolute value to the Filters.

    Recently, I try to write a AdjustColorFilter instead of ColorMarixFilter. I use (lastSaveAbsolutHueValue – currentlyAbsoluteHueValue) to simulate the delta value, but after setting the filter’s repeat property, the deviation became more and more big.

    At last I used fl.motion.AdjustColor resolve the issue.
    If you are intersted in the AdjustColorFilter, you can refer http://www.smithfox.com/?e=64

  38. ravi March 23, 2011 at 6:30am

    Excellent one. Is there a way to work with sharpness adjustment.

  39. Tox February 11, 2013 at 8:01am

    Nice one, works perfectly. Thanks for sharing. 🙂

Comments are closed.