How to change bitmap image in createjs when images are loaded using preloadjs?

Question

I have created a bitmap using an image from the queue. Next, I am trying to change the image by updating the image.src property but it isn't working because it expects a path to the image's location. How can I change the first image to the second one in this scenario. I assume that the transition will be smooth because the images are already loaded.

var queue = new createjs.LoadQueue();
queue.on("complete", loaded);
queue.loadManifest([{
        id: "one",
        src: "image1.png"
    },
    {
        id: "two",
        src: "image2.png"
    }
]);
var stage = new createjs.Stage('canvas'),
    img1 = queue.getResult("one"),
    img2 = queue.getResult("two");

var changingImage = new createjs.Bitmap(img1);
stage.addChild(childImage);
stage.update();

function changeImage() {
    changingImage.image.src = img2;
    stage.update();
}

Upon calling the function changeImage() the image must change in changingImage.

score 1 · Accepted Answer · answered Jul 24 '17 at 17:57

I made small example you can use :)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var stage,queue;
function init() 
{
    stage = new createjs.Stage("canvas");
    createjs.Ticker.setFPS(12);  //set some FPS
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh, so we don't need to use stage.update() frequently

    queue = new createjs.LoadQueue();
    queue.on("complete", loaded);
    queue.loadManifest(
    [
        {
            id: "one",
            src: "image1.png"
        },
        {
            id: "two",
            src: "image2.png"
        }
    ]);
}

function loaded()
{
    var img1 = queue.getResult("one");
    var img2 = queue.getResult("two");

    var someBitmap = new createjs.Bitmap(img1);
    stage.addChild(someBitmap); //first image is visible now

    //let's wait for a second and then call the function
    //img2 is reference to the second image
    setTimeout(function(){changeImage(someBitmap,img2)},1000);
}

function changeImage(bitmap,img)
{
    bitmap.image=img; //so image is changed
}
</script>
</head>
<body onload="init();">
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

How to change bitmap image in createjs when images are loaded using preloadjs?

1 Answers1