Question

I am making a tool which obscures an image with squares. What I want to happen is to have a bouncing ball which hits the squares and makes them disappear. However, the removeChild command isn’t working right. I set it up to populate the image with empty movie clips and colorize them. However, when I click the square, I am running into problems with the parent/child. I keep running into this error. “The supplied DisplayObject must be a child of the caller.” I cannot think of a good way to assign the eventListeners to each individual squares. I’m sure it is obvious. Here is my code. Thank you in advance

EDIT:If I get it to work, it deletes all instances of the square, not just the one I clicked.

Here is my code

 var mc:MovieClip = bgIMG;
 var bd:BitmapData = new BitmapData(mc.width,mc.height);
 bd.draw(mc);

 var _img:Bitmap = new Bitmap(bd);
 var _imgNodes:Array = [];
 var _tiledImg:MovieClip = container_tiled_img;

 var pad:int = 0;
 var rows:int = 10;
 var cols:int = 10;
 var zero:Point = new Point();

 createImgNodeGrid(rows, cols, pad);
 pixelateNodes(_imgNodes);



 function removeMC(e:MouseEvent)
 {//removes the movie clip
 trace(e.currentTarget.x);
stage.removeChild(e.currentTarget.parent.parent);
 }


 function pixelateNodes(nodes:Array = null):void
 {
for each (var node:Bitmap in nodes)
{
    node.bitmapData.fillRect(node.bitmapData.rect, avgColor(node.bitmapData));

}
 }

 function avgColor(src:BitmapData):uint
 {
var A:Number = 0;
var R:Number = 0;
var G:Number = 0;
var B:Number = 0;

var idx:Number = 0;
var px:Number;

for (var x:int = 0; x < src.width; x++)
{
    for (var y:int = 0; y < src.height; y++)
    {
        px = src.getPixel32(x,y);

        A +=  px >> 24 & 0xFF;
        R +=  px >> 16 & 0xFF;
        G +=  px >> 8 & 0xFF;
        B +=  px & 0xFF;

        idx++;
    }
}

A /=  idx;
R /=  idx;
G /=  idx;
B /=  idx;

return A << 24 | R << 16 | G << 8 | B;
 }


 function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
 {
var w:Number = _img.width / rows;
var h:Number = _img.height / cols;
var numNodes:int = rows * cols;

_imgNodes = [];

var nodeCount:int = 0;
for (var i:int = 0; i < rows; i++)
{
    for (var j:int = 0; j < cols; j++)
    {
        // get area of current image node
        var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);

        // copy bitmap data of current image node
        var tempBd:BitmapData = new BitmapData(w,h,true);
        tempBd.copyPixels(_img.bitmapData, sourceRect, zero);

        // place image node bitmap data into sprite
        var imgNode:Bitmap = new Bitmap(tempBd);
        imgNode.x = i * (w + pad);
        imgNode.y = j * (h + pad);

        // store each image node
        //_imgNodes.push(imgNode);
        _imgNodes[nodeCount++] = imgNode;

        // add each image node to the stage
        _tiledImg.addChild(imgNode);
        _tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
    }
}
 }

Answer 1

The problem you have is your are adding the event to the parent of the node(_tiledImg).

function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
{
  var w:Number = _img.width / rows;
  var h:Number = _img.height / cols;
  var numNodes:int = rows * cols;

  _imgNodes = [];

  var nodeCount:int = 0;
  for (var i:int = 0; i < rows; i++)
  {
    for (var j:int = 0; j < cols; j++)
    {
        // get area of current image node
        var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);

        // copy bitmap data of current image node
        var tempBd:BitmapData = new BitmapData(w,h,true);
        tempBd.copyPixels(_img.bitmapData, sourceRect, zero);

        // place image node bitmap data into sprite
        var imgNode:Bitmap = new Bitmap(tempBd);
        imgNode.x = i * (w + pad);
        imgNode.y = j * (h + pad);

        // store each image node
        //_imgNodes.push(imgNode);
        _imgNodes[nodeCount++] = imgNode;


        // you need a container since you can not attach event listeners to a BitMap
        var sprite:Sprite = new Sprite()
        sprite.mouseChildren = false;
        sprite.addEventListener(MouseEvent.CLICK,removeMC);
        sprite.addChild(imgNode);


        // add each image node to the stage
        _tiledImg.addChild(sprite);
       // _tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
    }
  }
}

function removeMC(e:MouseEvent)
{
    var target:Sprite = event.currentTarget as Sprite;
    target.parent.removeChild(target)
}