This tutorial will teach you how to make a coloring book-style flash application, in which you can select colors, and click on certain sections of an image and change its color, or color it in, in other words.

This tutorial will contain enough information on how to create an image, split it into pieces, apply code to change its color, and create a cursor that will display what color is currently being used.

A nice pretty example of the effect you're trying to accomplish is shown below applied to an unintentionally strange looking dude.

[ weird looking color-able dude ]

How To Accomplish This

First you should go and download the source file for this tutorial. The ZIP contains the finished file as an FLA and an SWF, and the start file as a FLA.

1. Open the source file that you downloaded above.

2. Create a new layer by clicking the "Insert Layer" button, or from Insert/Timeline/Layer.

3. Select the fill that makes up the hair, and Convert it to a Symbol, using F8, Modify>Convert to Symbol, or by right-click/control-clicking on it, and selecting Convert to Symbol.

   

   [ Call it whatever you want, as long as it's a button ]

4. Continue step iii until you've converted all four fills into buttons.

5. Select the button that makes up the hair, and Convert it to a Symbol, using F8, Modify > Convert to Symbol, or by right-click/control-clicking on it, and selecting Convert to Symbol.

   

   [ Call it whatever you want, as long as it's a movie clip ]

6. Continue step v until you've converted all four fills into movie clips.

7. Select all the outlines, copy them with Edit > Copy, or Ctrl + C, select the top layer, and Paste in Place with Edit > Paste in Place or Ctrl + Shift + V.
    

	Optional Step
You can group the outlines together if you want, with Ctrl+G, or Modify > Group.

The next section will talk about adding the first pieces of code to make it work, and will explain it as well. In this section you should have separated the outline and fills to separate layers, and converted each fill to a movie clip containing a button. If you missed something in this section, you should double back and read everything over again.

---

---

In the previous section, you separated the outlines and the fills, and converted the fills into movie clips containing buttons. In this section you'll add code to them in order to change their color.

The Code

We're going to add the code now. Add this code to the first frame of the top layer:

_root.fillColor = 0xFFFFFF;

Add this code to the BUTTON inside each movie clip:

on (press) {
  color = new Color(this);
  color.setRGB(_root.fillColor);
  delete color;
}

	Optional Step
You can group the outlines together if you want, with Ctrl+G, or Modify > Group.

Now it's on to...

More Code
I'm going to show you the code now. The code that we put in the first frame of the top layer is:

_root.fillColor = 0xFFFFFF;

And all that does is make it so that when you click before having selected a color, the piece doesn't turn black. If that piece of code wasn't there, the _root.fillColor variable would be undeclared, and would default to 0x000000, or black.

The code that you added to each of the fill buttons was:

on (release) {
  color = new Color(this);
  color.setRGB(_root.fillColor);
  delete color;
}

That makes it so that when you click on the fill, it fills with whatever color _root.fillColor is currently holding, and then deletes that current state of the variable color, so that particular instance is not used again.

This section showed you the first part of the code, and the next section will deal with making buttons, and changing the color contained in _root.fillColor.

	Note
You can change the variables "color", not to be confused with "Color", to anything you like, as long as all the references match.

The next section will cover more of the code that makes this color-book style of an animation work.

---

---

In the previous section, you added code to the fill pieces, and set the _root.fillColor variable as "0xFFFFFF". In this section you will make some buttons to change the _root.fillColor variable, so that you can use some different colors.

The Buttons

We're going to make the buttons now.

1. Draw a circle with an outline of one of the gray shades, and fill it with white.

2. Convert it to a Symbol, with F8, Modify>Convert to Symbol, or by right-click/control-clicking on it and selecting Convert to Symbol.

3. Drag as many of these to the stage as you want.

Set each one to have a Tint, of about 70-75%, of the color you want it to use

The Code

I'm going to show you the code now. The code for the buttons is:

on (release) {
  _root.fillColor = /*someHexCode here, e.g. 0x000000 for black*/
}

And what that does is make it so that if you click on a color button, it changes _root.fillColor to the hexcode of your specification, which is then used as a parameter in color.setRGB when you click on a piece.

The code that you added to each of the fill buttons was:

on (release) {
  color = new Color(this);
  color.setRGB(_root.fillColor);
  delete color;
}

That makes it so that when you click on the fill, it fills with whatever color _root.fillColor is currently holding, and then deletes that current state of the variable color, so that particular instance is not used again.

This section showed you the first part of the code, and the next section will deal with making buttons, and changing the color contained in _root.fillColor.

---

The Cursor

This section is not mandatory for the functioning of the program, so if you don't want to do this section, you don't have to. This is simply to make a cursor that will display what color is being used at the moment.

Making the Cursor

This section will show you how to set up and code your cursor.

1. You can do this type of thing in many ways. My way is making a cursor with a large filled area, with a frame for each color that I'm going to use in my movie. Then, I add a piece of code to each color button that makes it go to the frame that matches the color. You can do that or you can use setRGB(); command to change its color. We're going to do the earlier of the two.

2. Draw your cursor with a large filled area, that is easily noticeable at 100%, and a frame for each color used in your movie.

3. Make an empty movie clip and drag an instance into the gray area off of the stage. Name it something like "cursor".

4. Add this code to it:
    

   onClipEvent (enterFrame) {
     _root.//instance name of your cursor._x = _root._xmouse;
     _root.//instance name of your cursor._y = _root._ymouse;
   }

   
    

5. Now, add this code to each color button, inside the on (release) handler:
    

   _root.fillColor = /*hexcode of the color on this button*/

    

I certainly hope that you learned something from this tutorial, ad I hope you can use what you learned elsewhere. I hope you had fun making the stuff in this tutorial, because I had a lot of fun making it. This is my first tutorial, hope you had fun.

If you have any questions, feel free to post on the forums.

Peace Be With You...

Zelwyn

---

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇