Taking color average from image
July 1, 2006
I wrote an small Flash tool that might be of use to you. In flash I placed a MovieClip with an jpeg image on the stage and named it “image”. Beside that I placed an rectangle MovieClip named “color”. The ActionScript I wrote takes the average color from the image and colors the rectangle with that.
![]()
import flash.display.BitmapData;
var image:MovieClip = this["image"];
image._x = 100;
image._y = 100;
image._visible = true;
var bitmap:BitmapData = new BitmapData(image._width,image._height,false);
bitmap.draw(image);
var sumColorR:Number = 0;
var sumColorG:Number = 0;
var sumColorB:Number = 0;
var count:Number = 0;
for(var h:Number = 0; h < image._height; h++)
{
for(var w:Number = 0; w < image._width; w++)
{
var col:Number = bitmap.getPixel(w, h);
sumColorR += (col & 0xFF0000) >>> 16;
sumColorG += (col & 0×00FF00) >>> 8;
sumColorB += (col & 0×0000FF);
count++;
}
}
var backgroundcolor = new Color(”_root.color”);
var colorR:Number = Math.round(sumColorR / count) << 16;
var colorG:Number = Math.round(sumColorG / count) << 8;
var colorB:Number =Math.round(sumColorB / count);
var color:Number = colorR | colorG | colorB;
trace(color);
backgroundcolor.setRGB(color);
![]()


July 1, 2006 at 10:17 pm
BTW on this tutorial something similar is done. But here colors are applied to a figure with almost transparant regions. Nice effect.
http://www.kirupa.com/developer/actionscript/color.htm
September 21, 2006 at 2:40 pm
Theo, you’re a star … this is just what I was looking for and it works a treat! Dropping the sampling grid from every pixel to every 8th pixel speeds things up for larger images and is still accurate enough for what I want. Cheers.
September 21, 2006 at 3:10 pm
No problem. You’re welcome!
May 2, 2007 at 2:32 am
First of all THANK YOU for posting this code. It’s exactly what I am looking for. I am having trouble replicating it. I set up my flash document but I am getting the following error. Does it not work in Flash 8?
Any help would be a life saver… cheers
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 26: ‘)’ expected
sumColorG += (col & 0×00FF00) >>> 8;
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 27: ‘)’ expected
sumColorB += (col & 0×0000FF);
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 30: Unexpected ‘}’ encountered
}
Total ActionScript Errors: 3 Reported Errors: 3
May 2, 2007 at 7:38 am
Yes it should work in Flash 8 (ActionScript 2) because that’s the environment in which I made it. The errors are all related to syntax. So since the lines that are printed as errors are correct, I would make sure you have’nt missed an ‘)‘ or an ‘;‘ somewhere in the lines directly above
sumColorG += (col & 0×00FF00) >>> 8;
I hope that helps. I’m totally sure the code works, I have it running right now in a website of my own.
May 20, 2007 at 11:46 pm
Hi!
That error is caused because of the character “x” in the Hex numbers.
Just re-write that hex numbers by yourself and everything will work fine.
May 21, 2007 at 7:16 am
Thanks Pablo! That must be it indeed!
June 22, 2007 at 5:30 pm
I wanna do the same thing but instead of getting average color of an image, i want the program to get me the average color of the whole movieclip with alpha information…
any clues??
June 22, 2007 at 5:44 pm
@gogs:
Yes I know how to do that!
My tutorial was written when we all used ActionScript 2.0 in Flash 8. I hope you got Flash 9 with ActionScript 3.0.
I’ve seen an awesome tutorial about the BitmapData class in ActionScript 3.0;
Re-Painting Pixels with Actionscript 3
It made me interested to see what’s in the BitmapData class in ActionScript 3.0. There’s a function that returns an ARGB color value that contains alpha channel data and RGB data. It was new for me I do not remember it being available in ActionScript 2.0 but I might be wrong.
The tutorial is not yet using the alpha information but you can. See the BitmapData.getPixel32() function.
Good Luck with it!
September 7, 2007 at 9:38 pm
[...] Theo – nice flash single image color averaging [...]
December 19, 2007 at 3:13 pm
Thanks! Very cool. Big help.