How to change bitmap without adding another child to the stage

Question

I know exactly what this function is doing, however I don't know how to change it so that the 3 symbols only ever add once and only the bitmaps change. Thank you for your help! It's probably something simple, but I can't seem to figure it out, I am an intermediate as3 programmer but still have some holes in my knowledge.

var randCount:int = 3
        function loadImage():void
        {
            for(var i:int = 0; i<randCount; i++)
            {
                var imgLoader:Loader = new Loader();
                var imgRequest:URLRequest = new URLRequest();
                imgRequest.url = "../img/planet" + int(2*Math.random()) +".png";
                trace(imgRequest.url);
                imgLoader.load(imgRequest);
                imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadedImg);
            }
        }

        function onLoadedImg(e:Event):void
        {
            e.currentTarget.removeEventListener(Event.COMPLETE, onLoadedImg);
            var bmp:Bitmap = e.currentTarget.content;
            bmp.x = 600;
            bmp.y = Math.random() * 520;
            bmp.width = 80;
            bmp.height = 80;
            addChild(bmp);

        }
button.addEventListener(MouseEvent.CLICK, changeBitmap);
        function changeBitmap(event:MouseEvent):void {
            loadImage();
        }

Answer 1

guessing you ask the question that way because you are just adding more bitmap on top of the previous ones and by "change bitmap" you mean adding new ones.

You need to remove the ones you added previously and then you can add new ones. For example a simple change:

    var randCount:int = 3
    var bitmaps:Array = [];
    function loadImage():void
    {
        for(var i:int = 0; i<randCount; i++)
        {
            var imgLoader:Loader = new Loader();
            var imgRequest:URLRequest = new URLRequest();
            imgRequest.url = "../img/planet" + int(2*Math.random()) +".png";
            trace(imgRequest.url);
            imgLoader.load(imgRequest);
            imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadedImg);                
        }
    }

    function onLoadedImg(e:Event):void
    {
        e.currentTarget.removeEventListener(Event.COMPLETE, onLoadedImg);
        var bmp:Bitmap = e.currentTarget.content;
        bitmaps.push(bmp);
        bmp.x = 600;
        bmp.y = Math.random() * 520;
        bmp.width = 80;
        bmp.height = 80;
        addChild(bmp);
        while(bitmaps.length > randCount)
        {
            var oldbitmap:DisplayObject = bitmaps.shift() as DisplayObject;
            removeChild(oldbitmap);
        }
    }

Answer 2

Just create a new BitmapData and assign it to the Bitmap#bitmapData. That is the most economic way to deal with the problem. (One BitmapData for many Bitmaps works as well.)

Answer 3

To do what you are looking for, you can also use a Sprite as a container of your images, and every time you can remove them to add the new ones. Take a look on this example :

var nb_images:int = 3,
    bmp:Bitmap,
    // set 5px as vertical margin between images
    img_margin:int = 5, 
    img_request:URLRequest,
    img_loader:Loader;

var images_container:Sprite = new Sprite();
addChild(images_container);

function remove_all_images(): void 
{
    // remove all images
    for(var i:int = images_container.numChildren - 1; i >= 0; i--)
    {
        images_container.removeChildAt(i);
    }
}

function load_images(): void 
{
    remove_all_images();
    for(var i:int = 0; i < nb_images; i++)
    {
        // to generate randomly values between 0 and n (excluded) we use : int(n * Math.random())
        img_request = new URLRequest('images/' + (int(nb_images * Math.random())) + '.png')
        img_loader = new Loader();            
        img_loader.load(img_request);
        img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_img_loaded);                
    }
}

function on_img_loaded(e:Event): void 
{
    e.currentTarget.removeEventListener(Event.COMPLETE, on_img_loaded);
    bmp = e.currentTarget.content;      
    bmp.smoothing = true;
    bmp.x = 0, bmp.width = bmp.height = 80;
    // set image.y
    // 1st image : y = 0, 2nd image : y = 80 + 5 = 85, 3rd image : y = 2 x 85 = 170
    bmp.y = images_container.numChildren * (bmp.height + img_margin);
    // add the image to images_container
    images_container.addChild(bmp);
}

Hope that can help.