Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198725#M169236
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/12388594#M347564
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198716#M169227
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198717#M169228
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198718#M169229
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198719#M169230
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198720#M169231
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198726#M169237
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198721#M169232
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198722#M169233
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/11994109#M343334
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198723#M169234
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198724#M169235
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/9198727#M169238
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/13184058#M356676
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/13184345#M356681
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
/t5/animate-discussions/load-dynamic-external-image-in-animate-cc-canvas-javascript/m-p/13184758#M356685
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