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.

Color Average 1

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

Color Average 2

11 Responses to “Taking color average from image”


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

  2. GummyBear Says:

    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.


  3. No problem. You’re welcome!

  4. Ohio Says:

    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


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

  6. Pablo Says:

    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.


  7. Thanks Pablo! That must be it indeed!

  8. gogs Says:

    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??


  9. @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!


  10. [...] Theo – nice flash single image color averaging [...]

  11. Zip Says:

    Thanks! Very cool. Big help.


Leave a Reply