Custom Search

Colouring Book Pictures

Here is a simple colouring book application for you to make.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Setting up the Flash document

  • Open a new flash document - call it 'pictureFill.fla'.
  • Set the size and colour of your canvas (Modify - document)
  • Insert two additional layers (Insert - Timeline - Layer)
  • Name the layers: paints, outline, fills - 'paints' being the top layer.

    We are going to sort the document into sections - this makes it easier to amend it later. Once the outline has been put in that layer the layer can be locked. The paints buttons all have the same coding - as do the fills - therefore we need to keep them together.

    The order of the layers will affect what is visible. Therefore it is important you order them as I have indicated. Read more about layers by clicking here.

Drawing your picture

  • You can draw a simple outline - like the one I have done in this tutorial - or use a more complicated one. There are many 'colouring book pages' available for free use online if your art skills are not good enough - but I would recommend you start with a simple one first! It is a good idea to draw your outline in Fireworks and then to import this to Flash. Making sure you are happy with your picture to colour is the first stage.
  • Put your completed template-picture in the outline layer and lock that layer. You can then use it as a guide when you draw using the pentool or paintbrush without the risk of ruining it.
  • Each section of the picture needs to be a closed loop which is then filled with a colour. You therefore need to draw your picture sections using the Flash paintbrush or the pentool . The fill for each section is then made into an object that can have its colour changed by the user.

Making the 'fill sections'

  • There are two ways of drawing your fill section - just tracing the lines with the paintbrush tool - as shown in this Fireworks tutorial or tracing each section of your picture using the pen tool to do this. There is a tutorial on using the pen tool in the Fireworks section - see here. Choose whichever method your prefer.
  • Once you have the outlines of the sections you need to fill them with a colour.
  • Convert each 'fill section' to a movie symbol.
  • Click a section fill. It will be covered with a series of dots to show you have done this!

    Then (modify - convert symbol) - the 'convert to symbol' box will open. Make sure you tick the 'movie clip' box and name your section. Then click 'okay'. The box will close and your section will have a blue outlined box around it showing it is now a symbol.

    Do this for each fill section.

  • Select each 'fill symbol' you have made in turn and convert it to a button symbol. That button is within the movie!'

    Go to your library (- if it is not visible tick library from the 'window' dropdown menu to make it visible) and select the movie button you have made.

    Double click on it and it will open up on the page.

    Then go to (modify - convert symbol) - the 'convert to symbol' box will open. Make sure you tick the 'button' box this time and name your section slightly differently than you labelled the movie clip (I usually add 'but' on the end of the other name!) Then click 'okay'. The box will close and your section will have a blue outlined box around it showing it is now a symbol.

    You now have to add the code. Open the Actions window - (Windows - Actions). A page will open for you to past the code into. This is easy as you always use the same code! Here is the code you have to apply to it. Just copy it and paste. Simples!

on (press) {
color = new Color(this);
color.setRGB(_root.fillColor);
delete color;
}
When you click on the 'fill section', this code makes the fill change colour to whatever "color _root.fillColor" is currently set to, and then deletes that current state of the variable colour, so that particular instance is not used again.
 

 

Setting up the variables

  • Add this code to the first frame of the top layer:

_root.fillColor = 0xFFFFFF;

This code makes it so that when you click before having selected a colour, the 'fill area' won't turn black (so you can't see which areas need to be filled) - instead it will turn white.

If this piece of code isn't inserted, the "_root.fillColor" variable would be 'undeclared', and would default to "0x000000" which is black.

Colour palette

  • Draw a circle filled with whatever colour you want the paint choice to be.
  • Convert the circle to a button symbol and insert the following code
on (release) {
_root.fillColor = "0x000000"
}

When you press the colour choice button this code changes "_root.fillColor" to the hexcode you specified.

This is then used as a parameter in "color.setRGB" when you click on a fill section of your picture.

The colour hexadecimal code is highlighted in red - replace this with whatever code you like.

  • Do this for each colour you want on your palette.
You then need to export your movie as a 'swf' file. Good luck!

Here are a few more complicated ones - I made these for Halloween. Enjoy!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player