Load dynamic external image in animate cc canvas/javascript

[kelyk79419191]

How do I Load a external image in animate cc with javascript?

I'm developing a point and click game with multiple levels. When one level ends I need to change the images.

Can't really use library because will be a lot of images.

[Colin Holgate]

Your worry about using the library may be because you think you'll end up with a large file. But, with HTML5 Canvas all images are published as external files. It would be very much simpler to do it using the library.

You probably shouldn't use spritesheets when you publish. If there are a lot of big background images it would take a long time to make the spritesheets.

[ClayUUID]

It's still a reasonable concern, because Animate will preload everything in the library. Loading on demand could very easily be preferable if we're talking dozens of large images.

Anyway, this is fairly simple. Say you have a movieclip on the stage named myImage, that contains nothing but a bitmap. To replace it, just do this:

this.myImage.children[0].image.src = "myNewImage.jpg";

Note that this is an asynchronous operation. If you want to get fancy, with your code waiting until the new image has actually loaded, it gets more complicated.

[kelyk79419191]

Ok ClayUUID,

That's exactly what I need! For each level will have 120 images.

I tested but gave error:

this.bt1.addEventListener("click", fl_Click1.bind(this));

function fl_Click1() {

  this.myImage.x = 25;

  this.myImage.y = 65;

  //MOVE IMAGE OK!

}

this.bt2.addEventListener("click", fl_Click2.bind(this));

function fl_Click2() {

  this.myImage.children[0].image.src = "images/star.jpg";

  //TypeError: this.myImage.children[0].image is undefined

}

[kdmemory]

Hi Kelyk

kelyk79419191  wrote

That's exactly what I need! For each level will have 120 images.

With so many images to load how about to try it with PreloadJS (part of CreateJS) and here in particular read about the LoadQueue Class. Here you have means to load a lot of images and you get events like fileload and complete.

here is a working application and code with comments from one of my projects:

var here = this;
// outer movieclip containers
var cArr = ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9"];
// corresponding inner empty movieclip containers where the images shall go on complete
var cpArr = ["cp1", "cp2", "cp3", "cp4", "cp5", "cp6", "cp7", "cp8", "cp9"];
/* preloadJS Part */
var imgPath = "_preload/"; // the subfolder within my project folder with the images to load
// setting up a manifest with all images to load
var mani = [{
    src: "poh01.jpg",
    id: "p1"
}, {
    src: "poh02.jpg",
    id: "p2"
}, {
    src: "poh03.jpg",
    id: "p3"
}, {
    src: "poh04.jpg",
    id: "p4"
}, {
    src: "poh05.jpg",
    id: "p5"
}, {
    src: "poh06.jpg",
    id: "p6"
}, {
    src: "poh07.jpg",
    id: "p7"
}, {
    src: "poh08.jpg",
    id: "p8"
}, {
    src: "poh09.jpg",
    id: "p9"
}];
// Instantiating a loadQueue 
// LoadQueue is a load manager, which can preload either a single file, or queue of files.
var queue = new createjs.LoadQueue(false, imgPath);
// LoadQueue event listeners
queue.on("fileload", handleFileLoad, this); // A single file has completed loading
queue.on("complete", handleCompleteLoad, this); // fired when a queue completes loading all files
queue.loadManifest(mani); // Load an array of files. To load a single file, use the loadFile method.
function handleFileLoad(e) {
    // do something
}
// on complete I distribute the images to the corresponding empty movieclip containers
function handleCompleteLoad(e) {
    var img, bmp, cpScale, obj;
    cpScale = here.c1.scaleX;
    for (var i = 0; i < mani.length; i++) {
        img = queue.getResult(mani.id);
        bmp = new createjs.Bitmap(img);
        here[cArr][cpArr].addChild(bmp);
    }
    stage.update();
}

Maybe this helps

Klaus

[kglad]

@kdmemory 

there's a typo in:

   img = queue.getResult(mani.id);

that should be

   img = queue.getResult(mani[i].id);

[ClayUUID]

ClayUUID  wrote

Say you have a movieclip on the stage named myImage, that contains nothing but a bitmap.

[kelyk79419191]

Thank your for your reply. I understood what you said but not why it didn't work.

I think I'm missing  something simple about it, or getting lost in translation (english is not my language)

Could you please clarify it?

[ClayUUID]

Inside your fl_Click2 function, put only alert(this.myImage.numChildren);

If it displays 0, myImage does not contain anything.

If it displays 1, myImage contains something, but it's not a bitmap.

If it displays more than 1, myImage does not contain nothing but a bitmap.

[kelyk79419191]

Displays 2

[ClayUUID]

Well... now figure out what's in there that isn't a bitmap and delete it.

[kdmemory]

The link to the LoadQueue Class

https://www.createjs.com/docs/preloadjs/classes/LoadQueue.html

[Bozz-a]

This works great. Thanks. Now I'm looking for a way to tell that the image has loaded.

[Captivating_Canvas157F]

Hey Bozz-a can you post your final code so that I can learn how you fixed it.

Thank you

[Long Con]

I am unable to get this loading an image.  I made a bare-bones Animate file, imported an image, and put it in a movieclip called "testclip".  The bitmap is the only thing in the movieclip.

The .fla file is in the same folder as the testimage.png.

var p = new createjs.Bitmap("testimage.png");

this.testclip.image.src=p;

When I run it, I get the following errors:

Uncaught TypeError: Cannot set property 'src' of undefined
at lib.imgtest.frame_0 (imgtest.js?1619399319593:98)
at a.d._runActionsRange (createjs.min.js:19)
at a.b._runActions (createjs.min.js:19)
at a.b._runActionsRange (createjs.min.js:19)
at a.b._runActions (createjs.min.js:19)
at a.b.setPosition (createjs.min.js:19)
at lib.imgtest.c._updateTimeline (createjs.min.js:14)
at lib.imgtest.c.advance (createjs.min.js:14)
at lib.imgtest.c._tick (createjs.min.js:14)
at lib.Stage.b._tick (createjs.min.js:13)

[krtraw]

A try this code:

this.btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

this.myImage.x=250;

this.myImage.y=300;

this.myImage.children[0].image.src = "images/ff.png";

}

and doesn't work.

Please help.

[avid_body16B8 · Accepted solution]

There are 2 ways for loading images in ANCC Canvas:

These are in the click even to load one image after another.

1- create an image and load it into a movie clip.replace an existing image in a movie clip.

root.images.children[0].image.src = 'images/img' + f + ".jpg";

2- create an image and load it into a movie clip.

        root.images.removeAllChildren(); // unload the previous image
        var p = new createjs.Bitmap('images/pimg' + i + ".png");
        root.images.addChild(p);

I personally use # 2. Note that you need to delete the previous file if you want to load other files but that's OK.

Here are 2 examples I made to try this out as well as a menu I used in another fla that was a lot more complicated. One is using jquery each() and you need jquery, the other is using forEach.

You can replace the image code in the forEach example with the jquery image loading example. They will work the same.

loadingimages-example2.zip - Box

[krtraw]

Thanks! Thi is it.

[NefJack]

I am using #2 for my project.

I am able to add an image into the movieclip. But the first part of the code that removes all children is not working. When I test the project, the original existing image is still there. The new image is added. However, I am not getting any errors either.

This is my code:

this.mc.removeAllChildren(); // unload the previous image

var p = new createjs.Bitmap("image2.jpg");

this.mc.addChild(p);

I can confirm that the mc only contains a bitmap and nothing else.

Via alert(), I confirmed that mc has 1 child before the addChild part of the script is executed.

Can anyone tell me why the initial child image of mc is not being removed?

[NefJack]

Nevermind. I figured it out.

removeAllChildren() only removes any child images that is loaded dynamically. It doesn't remove any existing images that are in the movieclip when it is created.

[kglad]

good to hear!