Colouring book effect in Actionscript 3

In this tutorial you will learn how to create a colouring book effect in Actionscript 3. There will be a black and white image where you can add colours to each of the white sections. For this tutorial you will need a black and white image.


Colouring book in Actionscript 3


Step 1

Open a new AS3 file then draw an oval shape on the stage using the Oval tool. My circle is 36x36 pixels with a 0x000000 fill. Convert the shape into a movie clip (F8) and give the name: ‘Colours’ and the select the Export for Actionscript and give the class name: ‘Colours’. Now delete the movie clip from the stage. The movie clip will be added dynamically so will not be needed on the stage.


Step 2

Import an image on the stage by pressing File > Import > Import to Stage. Right click on your image and select Break Apart. This will convert the bitmap image to a vector one. Select all the black outlines by holding the down the shift key and convert it into a movie clip (F8). Then cut the movie clip Ctrl + x and paste the movie clip onto a new layer on the timeline.

Convert all the other white parts of the drawing into movie clips (F8). Then select all the white movie clips and convert it into a movie clip (F8) and give it the instance name: holder. This creates a container to hold all the white movie clips


Step 3

On the timeline insert a new layer call Actions. Then open up the Actions panel and add the following code:

//Array to hold the colours
var colorArray:Array=new Array(0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF);

//A new instance of the colour transform class.
var colorTrans:ColorTransform=new ColorTransform;

var currentColor:int=0;

//This adds the ovals on the stage with the corresponding colour from the array
//and with the mouse click event.
for (var i:int = 0; i < colorArray.length; i++) {
     var c = new Colours();
     c.y=0+i*50;
     c.buttonMode=true;
     addChild(c);

     colorTrans.color=colorArray[i];
     c.transform.colorTransform=colorTrans;
     c.addEventListener(MouseEvent.CLICK, ovalsClick);
     c.arrayIndex=i;
}

//This sets the currentColour value from the dynamic property array index. 
function ovalsClick(e:MouseEvent):void {
     currentColor=e.currentTarget.arrayIndex;
}

//Adds the mouse click event to the holder.
holder.addEventListener(MouseEvent.CLICK, holderHandler);

//This function changes the colour of the movie clip inside 
//holder when it is clicked.
function holderHandler (e:MouseEvent):void {
   for (var i:int = 0; i < holder.numChildren; i++) {
       if (holder.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {
           colorTrans.color=colorArray[currentColor];
           holder.getChildAt(i).transform.colorTransform=colorTrans;
       }
   }
}

Step 4

Test your movie Ctrl + Enter. Try clicking on the colour ovals then on the white parts on the drawing. You can also add a custom cursor to the colour book if you wish.