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

7.7K

Likes

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

Adobe Community Professional , 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. ...

Likes

Translate

Translate
Adobe Community Professional ,
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.

Likes

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
Adobe Community Professional ,
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.

Likes

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

}

Likes

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

Likes

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
Adobe Community Professional ,
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.

Likes

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?

Likes

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
Adobe Community Professional ,
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.

Likes

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

Likes

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
Adobe Community Professional ,
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.

Likes

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

Likes

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.

Likes

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

Likes

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

LATEST

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)


 

Likes

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.

Likes

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
Adobe Community Professional ,
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

Likes

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.

Likes

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