Skip to main content
April 29, 2008
Answered

Change color image to black and white

  • April 29, 2008
  • 7 replies
  • 1323 views
I have an image gallery with colored thumbnails. The thumbnails are loaded dynamically in the loader component. is there a way to make the thumbnails display as black and white on rollover without loading a fresh image for the b/w part? I was wondering if it could be done through alpha or mask?
Please help- you good folks out there. I'm unable to find an answer on my own.
This topic has been closed for replies.
Correct answer kglad
:

7 replies

kglad
Community Expert
Community Expert
April 30, 2008
(you're welcome.)
Inspiring
April 29, 2008
Thanks very much!
kglad
Community Expert
Community Expert
April 29, 2008
you're welcome.

each pixel in your movieclip will have its color adjusted by the colormatrixfilter. how that color is adjusted depends on the values in the matrix filter.

the first 5 entries (ie, the first line in my sequence of 4 concats) determine the amount of red in the transformed movieclip. the next 5 entries (2nd line) determines the amount of green in the transformed movieclip. the next line the amount of blue and the final line the alpha.

because each of the first 3 lines are the same, the pixels in the transformed movieclip are going to have equal parts R, G and B. ie, they are all going to be gray. the shade of gray of each pixel depends on the amount of R,G,B of the untransformed pixel's movieclip. i used an average (~1/3) of the R,G,B of the untransformed movieclip pixels to determine the shade of gray. other choices will also work and may yield more accurate results, if anyone cares.

you should be able to see if an untransformed pixel is white (full R and full G and full B), the transformed will also be white. if the untransformed pixel is black (0 R, 0G, 0B), the transformed will also be black. and if an untransformed movieclip pixel is solid R or G or B, the transformed pixel will be gray with light-dark about 1/3 from black, 2/3 from white.
Inspiring
April 29, 2008
Kglad, could you explain the choice of .33 please.
Inspiring
April 29, 2008
I think that's a little too cryptic for us mortals kglad!
kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
April 29, 2008
:

April 29, 2008
IT WORKED!!!!
THANKS A LOT.
You rock kglad
Damon Edwards
Inspiring
April 29, 2008
You can use a nice little tween engine called TweenLite (google for it), there are as2 and as3 versions. It makes it simple to tween the saturation to 0.
Inspiring
April 29, 2008
I'm pretty sure you can do this using the ColorMatrixFilter class if you can get your head round it! Take a look at the example in the language reference which varies the colour saturation. Let us know if you succeed; I'm going to have a try - I'll let you know.
April 29, 2008
The problem is: I could not get my head around the ColorMatrixFilter. Went straight over my head!!!
Anyone can help with coding it?
kglad
Community Expert
Community Expert
April 29, 2008
: