If you ever used the floodFill() method that is provided in the AS3 BitmapData class, you know that it doesn’t always act like it’s supposed to. For those of you unfamiliar with it, the The floodFill() method is similar to the paint bucket tool in various paint programs. The signature of the method looks like this:
public function floodFill(x:int, y:int, color:uint):void
You provide the method with an X and Y coordinate (the pixel at this location will define the color of the area that will be flooded with a color of your choice). Then you provide the method with an unsigned integer (ARGB value) , ranging from 0 (0×00000000) to 4294967295 (0xffffffff).
What is important to realize here, is that only neighboring pixels with the exact same color value will be flooded. So the floodFill() method does his job flawlessly, only sometimes we would like to flood pixels that are slightly similar as well.
For example, when we take a closer look at most rounded shapes on a pixel level, we will see that there is some anti-aliasing going on to give the picture a more smooth look. The anti-aliasing will create a range of colors between the fill color and the border color. These colors will be skipped by the floodFill() method, since they do not have the exact same ARGB value as the color that has to be flooded. You can try this out for yourself in the flash movie below.
To bypass this ‘shortcoming’ of the floodFill() method, we will be adding a filter on top of the floodFill. And what better filter to add some subtle extra color to edges than the GradientGlowFilter ? So, what we will actually be doing is this:
- take a snapshot of the original image
- take another snapshot of the original image and apply the floodFill
- compare the two snapshots using the BitmapData.compare() method and save this shot. (only the fill will be left in this 3rd shot)
- add a GradientGlowFilter to shot #3 and save it.
- copy the BitmapData of this third shot (with only the fill in it) to a new Bitmap.
- add this Bitmap to the original image !
here are some code snippets used in this example:
[1] var snapshot1:BitmapData = new BitmapData(target_mc.width, target_mc.height, false, 0xFFFFFFFF); snapshot1.draw(target_mc); var snapshot2:BitmapData = BitmapData(snapshot1.clone()); [2] snapshot1.floodFill(point.x, point.y, color); [3] var compareResult:Object = snapshot1.compare(snapshot2);
if (compareResult) { var comp:BitmapData = BitmapData(compareResult); var alphaValue:uint = color >> 24 & 0x000000FF; // we would like to use the same Alpha as in our original image [4] comp.applyFilter(comp, comp.rect, new Point(0, 0), new GradientGlowFilter(0, 90, [color, color], [0, alphaValue], [0, 255], 2, 2, 5, BitmapFilterQuality.HIGH, BitmapFilterType.FULL, true)); var bmp:BitmapData = new BitmapData(target_mc.width, target_mc.height); [5] bmp.copyPixels(comp, comp.rect, new Point(0, 0)); [6] target_mc.addChild(b); }
Like this post ? Follow me and multimediacollege on Twitter !
Just for your information. This line needs addressed:
var alphaValue:uint = color >> 24 & 0x000000FF;
It’s been converted to html
A disadvantage of this method is when you fill an already colored area with an other color, the black lines will become smaller
Hi intermediate flash developer here…
This is exactly what I’m looking for but I am struggling to get it to work in my application. Is there any where to download or have a look at the source file for the above example?
Help would be amazing.
Cheers
Jay
Hi there Jay,
Here is the link to the source file of the flash movie:
http://www.multimediacollege.be/go/blog/floodFill/source.zip
I hope you can find your way through the code, if not you always send me an email. Hope it helps!
Brilliant… Thank you!
I’ve managed to get it all working with my code and existing bitmapData.
Though I’m a little surprised there isn’t already something built into the AS3 .graphics class to achieve this. When creating an ellipse with .graphics.drawEllipse, all you need to do is give a few X,Ys and all the complicated math is done for you. Surely they could have given floodFill some sort of tolerance setting?! But that’s probably the designer in me talking not the programmer!
I will have my application finished soon, I’ll be sure to post a link for you to take a look, you really helped me out.
Cheers
Jay
Australia
As I said here is a link to the project I was working on. Still in progress with updates to come but its live. http://www.rocketbubble.com
Cheers
Awesome! glad I was able to help you out
Superb. Many thanks for sharing this. I am working on a photo editor for upcoming 3d project and it really saved my life. Thanks
Thanks so much for sharing this!!! You are awesome!!!
excellent work. <3
I also found a fast floodFill implementation on this page:
http://englishblog.flepstudio.org/tutorials/flash-cs3/drawing-with-actionscript-3/coloring-regions-of-images-using-floodfill-method-of-actionscript-3/