Sunday, 16 October 2011

Colour paint effect in AS3

This colour paint effect in Actionscript 3 is inspired by an application on the ipad where you can alter an image from black and white into colour by using your fingers to paint over the ipad. In this tutorial I will replicate the same effect, but I will be using the mouse to paint over the image. I have used a free stock image for this tutorial.

Colour paint effect in AS3

Step 1 – Setup FLA

Firstly, you will need an image for this tutorial so be sure you have one available. Open a new AS3 file and set the stage dimensions to 400 x 300 pixels and save the file with the name: ColourPaint. The image will need to be saved in the same directory as your FLA file.

Step 2 – Add code

Then open up a new AS3 class file and save it with the name: ColourPaint and add the following import statements and variables.

package  {
import flash.display.Loader;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.filters.ColorMatrixFilter;
import fl.motion.AdjustColor;
public class ColourPaint extends MovieClip {
 private var maskSprite:Sprite;
 private var mouseClicked:Boolean = false;
 private var adjustcolor:AdjustColor;
 public function ColourPaint() {



Inside the constructor add the following code. This creates a new instance of the Loader class and loads an external image with an event complete listener.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
loader.load(new URLRequest("image.jpg"));

This creates a new instance of the AdjustColor class and sets the saturation property to -100. This will give the image an appearance of black and white. Note you cannot have the saturation property on its own, you need the three other AdjustColor properties for this effect to work.

adjustcolor = new AdjustColor();
adjustcolor.hue = 0;
adjustcolor.brightness = 0;
adjustcolor.contrast = 0;
adjustcolor.saturation = -100; 

Then add the following code for the loaded function.

private function loaded(e:Event):void{
//adds bitmap on the stage with the height at 300 pixels and the width
//at 400 pixels. The filters property sets the saturation of the bitmap to -100   
var bp:Bitmap = Bitmap(;
bp.smoothing = true;
bp.height = 300;
bp.width = 400;
bp.filters = [new ColorMatrixFilter(adjustcolor.CalculateFinalFlatArray())];
//This create a copy of the bitmap but without filter property
var bp2:Bitmap = new Bitmap(bp.bitmapData);
bp2.smoothing = true;
bp2.height = 300;
bp2.width = 400;
//adds sprite container
maskSprite = new Sprite();
bp2.mask = maskSprite;
//adds the mouse down, move and up listener to the stage
stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
//remove listener from loader, loaded); 

The downHandler function sets the mouseClicked to true and the upHandler function sets the mouseClicked to false. The mouseClicked function draws an ellipse shape on the stage when the mouseClicked is set to true

private function downHandler(event:MouseEvent):void {
 mouseClicked = true;

private function moveHandler(event:MouseEvent):void {
 var w:uint = 40;
 var h:uint = 30;

 if (mouseClicked == true) {;, mouseY-h/2, w, h);;
private function upHandler(event:MouseEvent):void {
 mouseClicked = false;

Step 3 – Export movie

Select Ctrl + Enter to export movie. Now use your mouse to paint over the image.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP