Learn Flash: Coloring In	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Coloring In Book

Free Flash Tutorial

You may wish to do the following tutorials first: Changing the colour of a movie clip   Changing the cursor

The aim of the tutorial is to learn how to create a colouring-in book in flash. Included below is all the actionscript you need to create your own paint set.

Example: Download the Flash file  Int 160a

Step One: Frame One

The two lines of script are attached to frame one of the Timeline: The top line of actionScript hides the mouse cursor and the second line retrieves the colour of the paintbrush head and stores it as new information called: myColor

Mouse.hide();
myColor = new Color(_root.brush.head);

Step Two: Object to be Painted

The object that you wish to paint must be a button. Each instance must have a unique instance name. In this example the name is nose.

on (release) {
    var paint = new Color("_root.nose");
    paint.setRGB(_root.myColor.getRGB());
}

Note: The object acquires the new colour from the variable previously set in frame 1 of the timeline: myColor

Step Three: Paint Buttons

The coloured paint buttons set the colour of the paintbrush head and set the input box to display the word brown (line 4).

on (rollOver) {
    paint = new Color(_root.brush.head);
    paint.setRGB(0xff9966);
    text = "brown";
}

Note: Each paintbrush button has its own RGB colour, and the word to be displayed in the output box (brown) is also different. Otherwise the script for each button is identical.

Step Four: Input box

The input box has a variable name of: text

Step Five: Cursor (paintbrush)

On the stage there is an Movie Clip with an instance name of: brush

This is attached to the cursor with the following actionscript:

onClipEvent (enterFrame) {
    startDrag("", true);
}

Step Six: Paint Head

Inside the instance of the brush (the cursor) is a movie clip called with an instance name of: head
There is no script attached to this paint head.

The path to this is:

_root.brush.head

This changes colour when you rollover the paint colour buttons and is referred to by the paint buttons (in step three above):

paint = new Color(_root.brush.head); // see step three above

If the brush head was not nested inside the brush handle the entire brush would change colour instead of the head only.

To see another example of this same technique, used as an educational tool, click here