Wednesday, 2 February 2011

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.

22 comments:

sivareddy madireddy 29 May 2012 at 19:07  

I am unable to execute the steps as descried and getting the error as holder is undefined. what is the holder? is it a class or any other object. I would appreciate you details explanation of the example.

iliketo 29 May 2012 at 23:01  

@Sivareddy

Make sure you have read Step 2.

sivareddy madireddy 30 May 2012 at 06:49  

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.
****
I am unable to get select the outlines after this step to create movie clips.

So I did as below.

Modify -> Image -> Trace Image

which also create the vector I believe and able to create movie clips as you explained.
***
Select all the black outlines by holding the down the shift key and convert it into a movie clip (F8).

Do I have to give some name to the movie clip? and also do I have to select the check box in properties Export for Action Script? or not?

*****
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).

******
Do I have to give a name to each movie clip?
****

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

****

What are the properties for the holder ? is it Export for Action Script or not?

****

I would appreciate your help.

Thanks

iliketo 4 June 2012 at 03:03  

@Sivareddy

Please read Step 2 carefully? I haven’t given the movie clips names or export for Actionscript! If you look at the code in the holderHandler function I have used the getChildAt() method to get all the children of the holder movie clip.

sivareddy madireddy 26 June 2012 at 15:16  

Thanks for the reply. I would like to know, If I have the the .AI, . SVG and .EPS image files, how I can use in this coloring application.

Thanks,
Siva

sivareddy madireddy 26 June 2012 at 15:19  

I have one more question regarding image. What should be the best size of the image ( Dimensions) for coloring program.

iliketo 27 June 2012 at 12:35  

@Sivareddy

Please read Step 2, you need to import a supported file format (.AI). As for the dimensions, you can have any size you wish.

sivareddy madireddy 5 July 2012 at 19:59  

I would like to save the movie clips/ symbol into external folder( not into library) called assets in my project folder structure (C:/MyProject/Assets). Is it possible? So that I can use the same action script for the multiple images in coloring application. Please suggest.

iliketo 6 July 2012 at 11:46  

@Sivareddy

Why are you asking such an odd questions? Have you even used Flash before?

If you want to reuse Actionscript code for different images, write an Actionscript Class.

sivareddy madireddy 6 July 2012 at 11:52  

Since I am just beginner in ActionScript, (coming from C++ world) and trying to learn the Flash. Some of my question may be so odd. I hope you understand it.

sivareddy madireddy 13 September 2012 at 07:49  

I would like to use the vector image itself, rather than importing the bitmap image. Please advise me how should I use it in this coloring book application.

Another question I have related to white spaces, when we are coloring next to the boundary lines in the image, who should we avoid this white spaces and color fully.

I appreciate your help.

Thanks,
Siva

iliketo 13 September 2012 at 12:03  

@Sivareddy

The vector image will work the same as the bitmap image. Look at the second part of step 2.

Please clarify the second question.

sivareddy madireddy 13 September 2012 at 12:07  

In between the black color Outline and the Holder collection movie clips, when we apply color, we can see the white color spots across the Outline. I would like to avoid the same.

Thanks

iliketo 16 September 2012 at 23:13  

@Sivareddy

Try increasing the thickness of the line.

c 16 November 2012 at 00:43  

error:
Scene 1, Layer 'Layer 1', Frame 1, Line 10 1180: Call to a possibly undefined method Colours.

iliketo 16 November 2012 at 13:18  

@C

Please read step 1. You are calling an undefined class.

Katrina Hodson 1 March 2013 at 16:58  

Hi (I'm a noob at Flash).
I have followed your tutorial and managed to get it working so thanks for that!
I would like to add some more colours for the user to choose from. How would I go about doing this? I tried to add more hexcodes to the array to hold the colours, but obviously that didn't work.

Thanks in advance,

Kat

iliketo 3 March 2013 at 12:14  

@Kat,

I have only displayed 6 colours which is the exact number of coloured ovals to fit on the stage area. Assuming you are following this tutorial directly, you will need to increase the height of the stage for an addition oval to be seen.

Phill Shakesby 6 March 2013 at 04:17  

Hi sorry to bother you I am trying to implement this code in side a movie clip, but it wont work. I think it maybe a pathway issue but struggling to find the right pathway to change can you help

iliketo 6 March 2013 at 13:33  

@Phill

Obviously if you have put the code inside a movie clip without making any changes it will not work! My code is not a magic potion, you can not copy and paste code and hope it for it work.

HoldFastTheScripture 8 May 2013 at 23:30  

I have done all steps and read them many times
but doesnt't work
it gives me the same massege
Scene 1, Layer 'Layer 1', Frame 1, Line 10 1180: Call to a possibly undefined method Colours.

where is the problem can I send you the fla file?
thank you and sorry for disturbing

iliketo 10 May 2013 at 14:38  

@HoldFastTheScripture,

You clearly have not read it many times! Look back at Step 1 for the solution.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP