• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Load dynamic external image in animate cc canvas/javascript

New Here ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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.

TOPICS
Code , How to

Views

12.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 29, 2019 Apr 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.

...

Votes

Translate

Translate
LEGEND ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 17, 2021 Sep 17, 2021

Copy link to clipboard

Copied

@kdmemory 

 

there's a typo in:

 

   img = queue.getResult(mani.id);

 

that should be

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

ClayUUID  wrote

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

Displays 2

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2017 Jun 01, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 29, 2017 Jun 29, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 18, 2017 Dec 18, 2017

Copy link to clipboard

Copied

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

Thank you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 25, 2021 Apr 25, 2021

Copy link to clipboard

Copied

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)


 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 28, 2019 Apr 28, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

Thanks! Thi is it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 07, 2022 Sep 07, 2022

Copy link to clipboard

Copied

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?

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 07, 2022 Sep 07, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 07, 2022 Sep 07, 2022

Copy link to clipboard

Copied

LATEST

good to hear!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines