Coloring Book - The Code II
       by Zelwyn : 17 August
2004

In the previous page, 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

 


page 3 of 3

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.