Creating a Coloring Book

February 21, 2002
by Will Turnage

Handyman,

Does imaging Lingo provide a simpler way of making coloring books than to separate portions of the picture into cast members and sprites?

Zoran

Dear Zoran,

In the past, creating a coloring book type project in Director has required a lot of production work up front. Aside from the line art, you would have to create separate cast members for each element to be colored and then write code to create a coloring effect on each sprite.

Luckily, in Director 8.5 there is some undocumented imaging Lingo that can help you out with your coloring book. The command is called floodFill, and when you pass it a location and a color, it will fill the image with that color (very similar to using the bucket tool in the Paint window). The syntax for the handler looks like this:

imageObj.floodFill (x, y, colorObj)

imageObj.floodFill (point (x,y), colorObj)

The first parameter is the location in your image object that you want to act as the starting point for the filling effect. The second parameter is a color object representing the color that you want to fill the image with.

To create a coloring book, you should start with some simple black line art. If you don't have some already, then just open up the paint window and make your own. Next, you will need to create a separate cast member for each color that you want to use for coloring. First, you'll write the code for the color chips:

on beginSprite me
sprite (me.spriteNum).cursor = 281
  tempImage = sprite (me.spriteNum).member.image
  tempImage.floodFill (point (1,1), pColor)
  tempImage.draw (tempImage.rect, [#shapeType: #rect, #lineSize: 1, #color: color (#rgb, 0, 0, 0)] )
end

on mouseUp me
sendAllSprites (#setNewColor, pColor)
end

When the sprite begins, it sets the cursor of this member to 281, the eye dropper. Next you create a variable called tempImage which stores a reference to the image of the current member. Use the floodFill command to fill this image with your selected color, then draw a black border around the entire square so that the color chip has a defined shape. Finally, in the mouseUp handler, you send the chip's particular color to every sprite.

In the coloring book behavior itself, you will have a setNewColor handler which will receive the color sent by each of your color chips.

on setNewColor me, whichColor
pColor = whichColor
end

For the rest of the behavior, you'll first need to initialize a few things.

On beginSprite me
  pColor = 0
  sprite (me.spriteNum)Cursor = 259
  pMemRef = sprite (me.spriteNum).member
  pMemRef.image = member ("coloringBook").image.duplicate ()
  pMemRef.regpoint = point (0,0)
end

You begin by setting the pColor variable to 0, indicating that no color has been selected. Next, you set the cursor of the coloring book sprite to 259, the paint bucket. Create a reference to the member of the sprite and store that in a variable named pMemRef, then set the image of your member to a duplicate of the image in member "coloringBook (this is the member containing your black line art). Finally, set the regPoint of the member to point (0,0) to simplify calculations later on.

When the user clicks on the coloring book image, here is the code that fills in the image.

On mouseUp me
  if pColor <> 0 then
    offsetLoc = the clickLoc - sprite (me.spriteNum).loc
    pixelColor = pMemRef.image.getPixel (offsetLoc, #integer)
    if pixelColor > 0 then
      pMemRef.image.floodFill (offsetLoc, pColor)
    end if
  end if
end

This code starts by making sure that pColor is not 0, meaning that the user must have selected a color to paint with. Next, you take the location of where the user clicked on the screen and subtract the location of the sprite. This gives you the location of where the user clicked within the image. Next, you get the color of the pixel that the user clicked on and you store that color as an integer. If the color isn't black, meaning that the user didn't click on the black lines, then you use the floodFill command to fill in the image with that particular color.

And that's all there is to it. The end result can look a little something like this:

A sample Director 8.5 movie is available for download in ZIP or SIT archive format.

All colorized Lingo code samples have been processed by Dave Mennenoh's brilliant HTMLingo Xtra, available from his site at http://www.crackconspiracy.com/~davem/

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.