[RESOLVED] [CS4/AS3] Coloring Pages with Internal Bitmaps

Simple AS3 code for making coloring pages using internal bitmaps.

Code:

---

// In the library are buttons for new and clear,
// (the buttons have been placed on the stage, with instance names, 'newBtn' and 'clearBtn').
// In the library, a bitmap of the color pallette - export linkage 'colors'.
// In the library, a bitmap for the cursor paintbrush - export linkage 'pbrush'.
// The coloring bitmaps (b&w pngs) - export linkage ids and 'images' array entries must be the same.
// For all the bitmaps will be base class 'flash.display.BitmapData'.
// For all the bitmaps compression lossless/ smoothing unchecked.
//
// The paint brush is a transparent png with the brush and handle outlined in black and filled with white.
// The handle starts in the upper left corner and the tip of the brush is in the lower right corner.
// 3 pixels in from the right and 3 pixels up from the bottom is inside the white fill of the brush.
//
stop();
// array of library linkage export class names of the coloring bitmaps
var images:Array=["pic1","pic2","pic3"];
// 4294967295 is white
var paintColor:Number=4294967295;
var imageBmp:Bitmap;
// used in computing the cursor position and finding the fill point in cursor pbrush bitmap
var pbOff:int = 3;

// ------------------------------------- set up pallette
var pallette:Sprite = new Sprite();
// position where ever desired
pallette.x=256;
pallette.y=150;
addChild(pallette);
// 'colors' is export linkage (class name) for the pallette
pallette.addChild(new Bitmap(new colors(0,0)));

pallette.addEventListener(MouseEvent.CLICK, getColour, false, 0, true);

function getColour(e:MouseEvent):void {
        var colorBmp:Bitmap=e.currentTarget.getChildAt(0);
        var colorData:BitmapData=colorBmp.bitmapData;
        paintColor=colorData.getPixel32(colorBmp.mouseX,colorBmp.mouseY);
        var curBmp:Bitmap=Bitmap(cursor.getChildAt(0));
        curBmp.bitmapData.floodFill(cursor.width-pbOff,cursor.height-pbOff,paintColor);
}

// ------------------------------------- set up pictures to color
var imageHolder:Sprite = new Sprite();
// position where ever desired
imageHolder.x=2;
imageHolder.y=0;
addChild(imageHolder);

imageHolder.addEventListener(MouseEvent.CLICK, changeColour, false, 0, true);

function changeColour(e:MouseEvent):void {
        // currentTarget is'imageHolder', it's child at 0, will be the current coloring bitmap
        var bm:Bitmap=e.currentTarget.getChildAt(0);
        var bmd:BitmapData=bm.bitmapData;
        // 4278190080 is black, to avoid coloring the lines
        if (bmd.getPixel32(bm.mouseX,bm.mouseY)!=4278190080) {
                bmd.floodFill(bm.mouseX, bm.mouseY, paintColor);
        }
}

// ------------------------------------- set up cursor
var cursor:Sprite = new Sprite();
cursor.mouseEnabled = false;
addChild(cursor);
// 'pbrush' is export linkage (class name) for the cursor paintbrush
cursor.addChild(new Bitmap(new pbrush(0,0)));

function cursorHide(e:Event):void {
        cursor.visible=false;
        Mouse.show();
}

function cursorFollow(e:MouseEvent):void {
        Mouse.hide();
        cursor.visible=true;
        // set the cursor paintbrush,
        cursor.x=stage.mouseX-cursor.width+pbOff;
        cursor.y=stage.mouseY-cursor.height+pbOff;
        e.updateAfterEvent();
}

stage.addEventListener(Event.MOUSE_LEAVE, cursorHide);

stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow);

// ------------------------------------- set up new and clear buttons
// if changing newBtn instance name, also change it in getNewImage function

newBtn.addEventListener(MouseEvent.CLICK, getNewImage, false, 0, true);

clearBtn.addEventListener(MouseEvent.CLICK, getNewImage, false, 0, true);

function getNewImage(e:Event):void {
        // if 'newBtn' triggered the event,
        // take the first item in the images array and move it to rear, otherwise do nothing
        (e.currentTarget == newBtn) ? images.push(images.shift()) : null;
        // if already a coloring picture on stage, remove it, otherwise do nothing
        (imageHolder.numChildren>0) ? imageHolder.removeChild(imageBmp) : null;
        // get the first item in the images array
        var classRef:Class=getDefinitionByName(images[0]) as Class;
        var imageData:BitmapData=new classRef(0,0);
        imageBmp=new Bitmap(imageData);
        // add library bitmap to display
        imageHolder.addChild(imageBmp);
}
// display first image
getNewImage(new Event(Event.ADDED_TO_STAGE));

---

This is meant to be a starting point for building your own file for a coloring book. Tips for making this example better are always welcome.

Enjoy!