Coloring regions of images

[Flep]

In this tutorial we see how to color the sections of an image using the method floodFill() of the BitmapData class of Actionscript 3.0.

This method works almost like magic wand tool in Photoshop (or other photo editor) with a setting of zero tolerance.

It fills in all contiguous regions of the same pixel color with the specified color.

This method allows us to create such an application of coloring and much more.

The example that I created works with an external black and white GIF image.

The image has been loaded into Flash and with a ColorPicker component, check the color you will use to fill in certain areas of the image.

For example, choose a color and click to image's area.

Actionscript

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.geom.*;
	
	public class Main extends MovieClip
	{
		private var bitmap:Bitmap;
		private var bitmapdata:BitmapData;
		
		private var holder_mc:MovieClip;
		
		private var current_color:uint=0;
		
		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			reset_btn.label="RESET";
			
			loadImage();
		}
		
		private function loadImage():void
		{
			if(holder_mc!=null)
			{
				removeChild(holder_mc);
				bitmapdata.dispose();
				bitmap=null;
				holder_mc=null;
			}
			var request:URLRequest=new URLRequest("jerry.gif");
			var loader:Loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageLoaded);
			loader.load(request);
		}
		
		private function onImageLoaded(evt:Event):void
		{
			bitmap=evt.target.loader.content as Bitmap;
			bitmapdata=bitmap.bitmapData;
			holder_mc=new MovieClip();
			holder_mc.addChild(bitmap);
			addChild(holder_mc);
			
			addListeners();
		}
		
		private function addListeners():void
		{
			color_picker.addEventListener(Event.CHANGE,onColorChange);
			
			holder_mc.mouseChildren=false;
			//holder_mc.buttonMode=true;
			holder_mc.addEventListener(MouseEvent.MOUSE_DOWN, paint);
			
			reset_btn.addEventListener(MouseEvent.MOUSE_DOWN,reset);
		}
		
		private function onColorChange(evt:Event):void
		{
			current_color=evt.target.selectedColor;
		}
		
		private function paint(evt:MouseEvent):void
		{
			var xx:Number=evt.localX;
			var yy:Number=evt.localY;
			bitmapdata.floodFill(xx,yy,current_color);
		}
		
		private function reset(evt:MouseEvent):void
		{
			loadImage();
		}
	}
}

Source files: