添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
May 31, 2017 May 31, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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.

... May 31, 2017 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.

Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 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.

Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 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

}

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

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

Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Sep 17, 2021 Sep 17, 2021
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 May 31, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 May 31, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 May 31, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more May 31, 2017 May 31, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Jun 01, 2017 Jun 01, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Apr 29, 2019 Apr 29, 2019
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Jun 29, 2017 Jun 29, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Dec 18, 2017 Dec 18, 2017
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Apr 25, 2021 Apr 25, 2021

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)


Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more Apr 28, 2019 Apr 28, 2019
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more 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. 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

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

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?

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