Why does repeated calls to someContainer.addChild(myBitmap) duplicate my Bitmap?

Question

This is such a noob question, I'm embarrassed to post it, but here goes.

In my image loader class I'm loading a Bitmap, then cloning its BitmapData into another Bitmap via BitmapData.draw(). The class then stores a reference to the cloned bitmap and the originally loaded bitmap gets presumably garbage collected as it was a variable scoped locally to the creation method.

The client class then grabs the Bitmap from the image loader class and uses container.addChild() to add it to the stage.

The user can then do it all over again, loading a new image (from disk) and displaying it on the stage. It's SUPPOSED to replace the old Bitmap.

I thought Bitmaps were like all other DisplayObjects in that if you addChild() it detaches it from wherever it was on whatever DisplayList it was on, and moves it to the new container. In the case of using addChild() for the same object on he same container, I assumed it would just do nothing, really.

In fact, now that I mention it, I'm not sure why it needs to be added at all - the way I believe the code works, I'm just replacing the Bitmap and so it should automatically update the one that's already on the stage... so somehow I must be making new objects, but I'm not sure how that's happening.

Here's the code.

    // "Client" class. User clicks button, loads an image.
    private var _customImage:Bitmap;

    private function onImageButtonClicked():void {
        _cameraRoll.showImagePicker(addImageButton, onImagePickerComplete); // last arg is callback
    }

    private function onImagePickerComplete():void {
        var customImage:Bitmap = _cameraRoll.currentImage;
        _customImage = customImage;
        showCustomImage();
    }

    private function showCustomImage():void {
        imageContainer.addChild(_customImage);

        // Proof that multiple bitmaps get added!!!
        for (var i = 0; i < imageContainer.numChildren; ++i) {
            trace(imageContainer.getChildAt(i));
        }
    }



    // Image Loader class
    private var _currentImage:Bitmap;

    private function onImageLoaded(event:Event):void {
        var tempBitmap:Bitmap = event.currentTarget.content as Bitmap;
        var tempBMD:BitmapData;
        var rotationMatrix:Matrix = new Matrix();

        tempBMD.draw(tempBitmap, rotationMatrix);
        _currentImage = new Bitmap(tempBMD);

        onImagePickerComplete();
    }

    // Do the callback on the client class
    private function onImagePickerComplete():void {
        if (_imagePickerCompleteCallback is Function) {
            _imagePickerCompleteCallback.call(this, true);
        }
    }

Additional traces bear out that we are dealing with separate instances, and that at no time does _customImage actually have a parent! It's almost as if, by adding it to the DisplayList, it splits it off.

Is that weird, or is it just me? The Bitmap is always stored in _customImage on the client class. And _customImage is the only thing being added to the container clip. So if it gets added again, wouldn't it just move? And why does assigning the Bitmap from the image loader class not automatically update the _customImage that's already added on the stage?

Tom Auger Tom Auger · Accepted Answer · 2015-10-08T11:19:48

The Loader class is creating a brand-new Bitmap from scratch, which is a brand-new DisplayObject (with no parent). That gets passed to _customImage on the client class, clobbering the previous DisplayObject.

_customImage just has a reference to the DisplayObject that's already been parented to the container, it is not the DisplayObject itself, so when it gets replaced, it doesn't replace the instance of that DisplayObject on the stage - it just breaks the connection with it.

A reference to that previous Bitmap that's on the DisplayList remains in memory, associated with the parent container. We can get it back with getChildAt().

You need to removeChild(_customImage) prior to clobbering the reference.

Why does repeated calls to someContainer.addChild(myBitmap) duplicate my Bitmap?

1 Answers