Skip to main content
K
kelyk79419191
Participant
May 31, 2017
Answered

Load dynamic external image in animate cc canvas/javascript

  • May 31, 2017
  • 2 replies
  • 13664 views

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 has been closed for replies.
Correct answer avid_body16B8

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

2 replies

K
krtraw
Participant
April 28, 2019

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
avid_body16B8Correct answer
Legend
April 29, 2019

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
    April 29, 2019

    Thanks! Thi is it.

    Colin Holgate
    Colin Holgate
    Inspiring
    May 31, 2017

    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.

    C
    ClayUUID
    Legend
    May 31, 2017

    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.

      K
      kelyk79419191Author
      Participant
      May 31, 2017

      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

      }

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices