« Amazing 3D engine
PixLib – Understanding the basis of the framework »

ColorMatrix or how to “paint” MovieClip


Today I have to finish an application I'm developing for my company.
This application is downloading external parts of a house (png files) and displaying them on top of the house image. Thus the user can see the different texture he could chose.

The thing is a feature is to be able to "paint" those external materials.
So I've look around a bit for tips / tricks. I've found two classes for flash, both named ColorMatrix, one made by Grant Skinner the other by Quasimondo

The one from Grant doesn't have any painting features, the one from Quasimondo has it but is not working the way I've wanted to.
What I've wanted is replacing "totally" a color by another one but still keeping the shadow, contrast, ...

So I made this class, using bits of the Quaimondo one.

PLAIN TEXT
Actionscript:
  1. /*
  2. * Class written by Xavier MARTIN (xxlm or zeflasher)
  3. * http://dev.webbymx.net
  4. * http://www.webbymx.net
  5. * If you are using this class, I will be glad to receive a postcard of your place :)
  6. * To do so please visit http://dev.webbymx.net and go in the about page to get my details...
  7. */
  8.  
  9. import flash.filters.ColorMatrixFilter;
  10.  
  11. class net.webbymx.geom.ColorMatrix {
  12.  
  13. /* ****************************************************************************
  14. * PRIVATE STATIC VARIABLES
  15. **************************************************************************** */
  16. //  Adobe luminance
  17.     private static var R_LUM : Number = .3;
  18.     private static var G_LUM : Number = .59;
  19.     private static var B_LUM : Number = .11;
  20.    
  21.     private static var IDENTITY_MATRIX : Array = new Array (1,0,0,0,0,
  22.                                                             0,1,0,0,0,
  23.                                                             0,0,1,0,0,
  24.                                                             0,0,0,1,0);
  25.    
  26.    
  27. /* ****************************************************************************
  28. * PUBLIC VAR
  29. **************************************************************************** */ 
  30.     public var matrix : Array;
  31.  
  32. /* ****************************************************************************
  33. * CONSTRUCTOR
  34. **************************************************************************** */ 
  35.     function ColorMatrix( mat : Array) {
  36.         if( mat != undefined ) matrix = mat
  37.         else mat = IDENTITY_MATRIX;
  38.     }
  39.    
  40.    
  41. /* ****************************************************************************
  42. * PRIVATE FUNCTIONS
  43. **************************************************************************** */
  44.  
  45. /* ****************************************************************************
  46. * PUBLIC FUNCTIONS
  47. **************************************************************************** */
  48.     public function ajustLuminance( rgb : Number ) : Void {
  49.         var r:Number = ( ( rgb>> 16 ) & 0xff ) / 255;
  50.         var g:Number = ( ( rgb>> 8  ) & 0xff ) / 255;
  51.         var b:Number = (   rgb         & 0xff ) / 255;
  52.         var l : Number = r * .3 + g * .59 + b * .11;
  53.        
  54.         var mat : Array = new Array (l,l,l,0,0,
  55.                                      l,l,l,0,0,
  56.                                      l,l,l,0,0,
  57.                                      l,l,l,0,0);
  58.                                     
  59.         concat( mat );
  60.     }
  61.  
  62.  
  63.     public function colorize( rgb : Number, percent : Number ) : Void {
  64.         var r:Number = ( ( rgb>> 16 ) & 0xff ) / 255;
  65.         var g:Number = ( ( rgb>> 8  ) & 0xff ) / 255;
  66.         var b:Number = (   rgb         & 0xff ) / 255;
  67.        
  68.         if ( percent == null) percent = 1;
  69.         var inv_percent : Number = 1 - percent;
  70.        
  71.        
  72.         var mat:Array =  new Array ( inv_percent + percent * r * R_LUM, percent * r * G_LUM,  percent * r * B_LUM, 0, 0,
  73.                                      percent * g * R_LUM, inv_percent + percent * g * G_LUM, percent * g * B_LUM, 0, 0,
  74.                                      percent * b * R_LUM,percent * b * G_LUM, inv_percent + percent * b * B_LUM, 0, 0,
  75.                                      0 , 0 , 0 , 1, 0 );
  76.         concat( mat );
  77.     }
  78.  
  79.  
  80. /**
  81. * Multiply the matrix to get the final result
  82. * @param    mat
  83. */
  84.     public function concat( mat : Array) : Void {
  85.        
  86.         var mat_res : Array = new Array ();
  87.         var i:Number = 0;
  88.        
  89.         for ( var r : Number = 0; r <4; ++r ) {
  90.             for ( var c : Number = 0; c <5; ++c ) {
  91.                 mat_res[ i + c ] =  mat[   i   ] * matrix[   c    ] +
  92.                                     mat[ i + 1 ] * matrix[ c + 5  ] +
  93.                                     mat[ i + 2 ] * matrix[ c + 10 ] +
  94.                                     mat[ i + 3 ] * matrix[ c + 15 ] +
  95.                                     ( c == 4 ? mat[ i + 4 ] : 0 );
  96.             }
  97.         //  go to next row
  98.             i += 5;
  99.         }
  100.         matrix = mat_res;
  101.     }
  102.  
  103.    
  104. /**
  105. * Convert the ColorMatrix to Grayscale
  106. * @param    Void
  107. */
  108.     public function convertToGray ( Void ) : Void {
  109.         matrix = [  .33 / R_LUM / 2, .33 / G_LUM / 2, .33 / B_LUM / 2, 0, 0,
  110.                     .33 / R_LUM / 2, .33 / G_LUM / 2, .33 / B_LUM / 2, 0, 0,
  111.                     .33 / R_LUM / 2, .33 / G_LUM / 2, .33 / B_LUM / 2, 0, 0,
  112.                       0,   0,   0, 1, 0  ];
  113.     }
  114.    
  115.  
  116.     public function getFilter( Void ) : ColorMatrixFilter {
  117.         return new ColorMatrixFilter( matrix );
  118.     }
  119.    
  120.    
  121.     public function paint( rgb : Number, percent : Number ) : Void {
  122.         var r : Number = ( ( rgb>> 16 ) & 0xff )> 0 ? ( ( rgb>> 16 ) & 0xff ) / 255 : 33 / 255;
  123.         var g : Number = ( ( rgb>> 8  ) & 0xff )> 0 ? ( ( rgb>> 8 ) & 0xff ) / 255 : 33 / 255;
  124.         var b : Number = (   rgb         & 0xff )> 0 ? ( ( rgb  ) & 0xff ) / 255 : 33 / 255;
  125.         var lu : Number = (r * .3 + g * .59 + b * .11);
  126.    
  127.     //  convert the image to grayscale
  128.         convertToGray();
  129.        
  130.     //  Add the color
  131.         if ( percent == null) percent = 1;
  132.         var inv_percent : Number = 1 - percent;
  133.        
  134.         var rr : Number = inv_percent + ( percent * r * R_LUM );
  135.         var rg : Number = ( percent * r * G_LUM );
  136.         var rb : Number = ( percent * r * B_LUM );
  137.         var ra : Number = 0;
  138.         var ro : Number = lu;
  139.         var gr : Number = ( percent * g * R_LUM );
  140.         var gg : Number = ( inv_percent + percent * g * G_LUM );
  141.         var gb : Number = ( percent * g * B_LUM );
  142.         var ga : Number = 0;
  143.         var go : Number = lu;
  144.         var br : Number = ( percent * b * R_LUM );
  145.         var bg : Number = ( percent * b * G_LUM );
  146.         var bb : Number = ( inv_percent + percent * b * B_LUM );
  147.         var ba : Number = 0;
  148.         var bo : Number = lu;
  149.         var ar : Number = 0;
  150.         var ag : Number = 0;
  151.         var ab : Number = 0;
  152.         var aa : Number = 1;
  153.         var ao : Number = 0;
  154.        
  155.         var mat:Array =  new Array (rr, rg, rb, ra, ro,
  156.                                     gr, gg, gb, ga, go,
  157.                                     br, bg, bb, ba, bo,
  158.                                     ar, ag, ab, aa, ao);
  159.         concat( mat );   
  160.     }
  161.  
  162. }

ColorMatrix Class Download class Unknown

Here is a brief example showing how to use it

PLAIN TEXT
Actionscript:
  1. // Create new colour matrix object
  2.       var cm : ColorMatrix = new ColorMatrix();
  3.      
  4.      // Define matrix via RGB number passed
  5.       cm.paint( 0xFF0000, 1);
  6.      
  7.      // Apply the filter to the bitmapdata section to paint it
  8.       myBitmapData.applyFilter(myBitmapData, myBitmapData.rectangle,new Point(0,0), new flash.filters.ColorMatrixFilter( cm.matrix ) );

I hope it will help some of you...

No related posts.

, ,

This entry was posted on August 25, 2006, 11:05 am and is filed under AS 2.0 Classes, Ressources. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

  1. #1 by SunShine on January 19, 2007 - 1:34 am

    Hi,

    First, thanks for share this class !

    I've a little proble, when I use the the class on a movieclip with a colour gradation, the color graton disapear. At last, I'v only my movieclip with the specified color but I lost the other propertie like color gradtion.

    It's normal ?

    Thank you

    Quote

  2. #2 by SunShine on January 19, 2007 - 1:44 am

    A part of my code :

    var matRGB : net.webbymx.geom.ColorMatrix = new net.webbymx.geom.ColorMatrix();
    matRGB.paint( color, percent);

    _mcBase.filters = [new ColorMatrixFilter(matRGB.matrix)];

    I think is ok, it is ?

    Thanks

    Quote
(will not be published)