Participant

Answered

Load dynamic external image in animate cc canvas/javascript

20 replies
13740 views
Translate

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.

This topic is closed to new replies. Start a new post to keep the conversation going.

avid_body16B8Correct answer

Legend

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

K

krtraw

Participant

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.

Translate

avid_body16B8Correct answer

Legend

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

Translate

K

krtraw

Participant

Thanks! Thi is it.

Translate

Colin Holgate

Inspiring

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.

Translate

C

ClayUUID

Legend

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.

Translate

K

kelyk79419191Author

Participant

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

}

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.