How do I change a color to another in a bitmapData image?

[DaveGallant]

Let's say you have an image of a cartoon human that is wearing a blue jacket with white sleeves, blue shoes, and grey pants. Brown hair and biege skin tone.

(My project actually has 1300 of these images - 325 are blue cloths, 325 are red cloths, 325 are green cloths, and 325 are purple cloths)

I am having a major problem with file size and memory usage due to all the images, so I have been asked to see if there was a way I could programmatically change the clothing color... this way we can use any color we want, and only have 325 base images.

I have been trying to play with color matrix filter and color transform, but I can't seem to get the hang of it

Is there a way I can extract only the "blue" colors from the image and do a hue shift on it to the color that I want it to be without effecting the non-blue colors?

My idea was something along the lines of:

Copy the "blue" color channel, hue shift it, then merge it back into frame....

[ReshapeMedia]

Interesting project.

I am assuming:

• Because you said 'cartoon' then all the clothing graphics are a single pixel color and not multi-toned (gradient)
• You have equal sets of colors eg. 325 red, blue, green, etc
• You are only changing ONE color on each clothing (one color makes it faster)

If this is correct then you have a quick and dirty solution (I have not seen any of the clothing graphics so I am assuming they are similar to each):

What you can do is load an image of the clothing as a Bitmap.  This will be used as your mask.  Draw a bitmap under the mask with the desired color - simple.

• Load the clothing image (or cache or embed)
• Take a bitmap of the image and use it as a mask
• Draw a bitmap under the mask of the desired color
• Remove or clear the graphics of the bitmap and draw again for a new color

If your clothing graphics are very different from each: then email me some of the 'clothes' and I can give you a better solution.  Add the post title as the subject.

info@reshapemedia.com

[DaveGallant]

Here is one of the frames:

  --  hue shift to --->

There are 13 different characters, but they are all "colored" in the same fashion, and each character has 100 frames of various animations. All the images are png with alpha transparencies.
All the cloths are baked into the images... I already suggested that we create 2 sets of files - one of the customers and one of the cloths, but I was asked to try to do it all in code via the base source images first.

[ReshapeMedia]

Oh boy... this seems to be an issue with your manager wanting it done 'NOW' rather than 'CORRECTLY'.

For my original statement to work, the clothing would have to be seperated from the people - as per your suggestion to them - which would make your lives a whole lot easier.  The problem with hue shifting the entire image is --> it will hue shift the entier image = all colors, and that may not be the best solution in your situation.

I would suggest replacing the pixel color (eg. getPixel32 and setPixel32 for the size of the image) but it seems that the shoulders and shoes have a darker color tone than the rest of the body.

Secondary solution:

• Import one of the image into Flash and do a bitmap trace of the image. 
• Seperate the clothes and people there. 
• Add the clothes as a new movie clip and change the color on a few frames 5 or so different colors (so its not too much work)
• Show them an example of how 'easy' it is to change the colors CORRECTLY when the images are seperate (even in the same file)

The secondary will give them the 'all in one file' they requested... and also give you solid grounds for convincing them to change the graphics.

Hope this helps.  Other wise... its a long not so nice solution which will go over budget because they did not plan for this before they made the graphics.