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.
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>