Director News
Director Web Sites
Mailing Lists
News Groups
Project Examples
Useful Web Sites

Don't miss these
AutoRez Monitor Resolution Switcher
Script Database
Color Cycle-Alphamania
Icon Forge
Irregular MIAW
Audio Xtra
Rollover Toolkit
Xtra Checker



Article A Simple Coloring Book

Added on 12/13/1999


D7 D8 Mac PC Shockwave


Author: MediaMacros (website)

I am working on a children's coloring book program for Shockwave. How can I set this up?

Get the source
There are a number of ways to go about making a coloring book.  The easiest is probably to use the Draw Xtra from Tabuleiro.  If you want the non-Xtra approach there are still a number of options.  The basic idea is to set up each area as a vector shape, shape, or 1-bit bitmap sprite.  Then you change the color of each when the user clicks on it.  

Lets start with our color swatches.  When the use clicks a swatch we want to assign that color as the default for filling the coloring book elements.  For shape sprites and bitmap sprites we can easily get the foreColor property as a palette index number.  It is important to use 1 bit bitmap images and change the colors with lingo, using any higher bit depths can be unpredictable in its results.  If we are using vector shapes for the swatches, we will need to convert the RGB value returned for the fillColor to a palette index.  This can be done with the color lingo in Director 7.  Any color object can be polled to find the closest palette index match using the paletteIndex property of the color object.  For example...

colorObject = color(#rgb, 0,0,255)
put colorObject.paletteIndex
-- 3

To convert back to RGB we can make a paletteIndex color object and poll the Red, Green, and Blue values to derive an RGB object...

colorObject = color(#paletteIndex, 3)
newObject = color(#rgb,,,
put newObject
-- rgb( 0, 0, 255 )

Using this we can swap back and forth to intermix vector shapes with bitmaps and shape objects for our coloring book.  By polling the swatches for their colors and then setting this as a global variable we can then simply apply that color to the coloring book elements.  To add a little flare to it we can also set the cursor to an eye dropper or fill bucket and package all of this into one, easy-to-use behavior.   The code is below.

--Copyright 1999 Chuck Neal
--If you find this code helpful, send me an e-mail and let me know. :-)

property spriteNum, whichPart, whatType, setColor

global gColoringBookColor

on getPropertyDescriptionList me
  p_list = [:]
  if ([#shape, #vectorShape, #bitMap]).getOne(sprite(the currentSpriteNum).member.type) <> 0 then
    p_list.addProp(#whichPart, [#format : #symbol, #comment : "Which Part", #default : #Swatch, #range : [#Swatch, #ColorArea]])
    if sprite(the currentSpriteNum).member.type = #vectorShape then
      whatColor = sprite(the currentSpriteNum).member.fillColor.paletteIndex
      whatColor = sprite(the currentSpriteNum).forecolor
    end if
    p_list.addProp(#setColor, [#format : #integer, #comment : "What color", #default : whatColor])
    if the currentSpriteNum > 0 then
      alert "This behavior is only for shapes, bitmaps, and vector shapes."
    end if
  end if
  return p_list

on beginSprite me
  whatType = sprite(spriteNum).member.type
  if whatType = #vectorShape then
    theColor = paletteIndex(setColor)
    myFillColor = color(#rgb,,,
    sprite(spriteNum).member.fillColor = myFillColor
    sprite(spriteNum).forecolor = setColor
  end if
  case whichPart of
    #swatch :
      if whatType = #vectorShape then
        if gColoringBookColor = void then
          gColoringBookColor = sprite(spriteNum).member.fillColor.paletteIndex
        end if
      else if whatType = #shape or whatType = #bitmap then
        if gColoringBookColor = void then
          gColoringBookColor = sprite(spriteNum).forecolor
        end if
      end if
      sprite(spriteNum).cursor = 281 --dropper
    #ColorArea :
      sprite(spriteNum).cursor = 259 --bucket
  end case

on mouseUp me
  case whichPart of
    #swatch :
      if whatType = #vectorShape then
        gColoringBookColor = sprite(spriteNum).member.fillColor
      else if whatType = #shape or whatType = #bitmap then
        gColoringBookColor = sprite(spriteNum).foreColor
      end if
    #ColorArea :
      if whatType = #vectorShape then
        theColor = paletteIndex(gColoringBookColor)
        myFillColor = color(#rgb,,,
        sprite(spriteNum).member.fillColor = myFillColor
      else if whatType = #shape or whatType = #bitmap then
        sprite(spriteNum).foreColor = gColoringBookColor
      end if
  end case

on getBehaviorDescription me
  describe = "This behavior works on vector shapes, shapes, and bitmaps to create both color swatches as well as coloring book elements." & return
  describe = describe & "Create 1 bit bitmaps, shapes or vector shapes for swatches and elements for the coloring book and drop this behavior on each. Choose a default color and start the project running for a fully playable coloring book."
  return describe

Want to make it a little fancier?  Try adding a display to show the currently selected color.  What about exporting a list of each sprites values to save the "picture" and then read them back in to reassign those colors to the page.   Give it a try and see what you come up with.



36 South Court Sq
Suite 300
Newnan, GA 30263

Send e-mail