Usage of CreateJS in Adobe Animate CC for adding external image on HTML5 Canvas

[popolino17]

I would like to ask community how to implement addChild function in HTML5 Canvas type in Animate CC. The purpose is to load external image in the MovieClip container (imageContainer).

Here is a very simple scenario:

On the Canvas there are a MovieClip container (by name “imageContainer”) and button (by name “getContent_btn”). The code listed below doesn’t work?

Here is defined functions for image loading using CreateJS

function loadImage() {

  var preload = new createjs.LoadQueue();

  preload.addEventListener("fileload", handleFileComplete);

  preload.loadFile("someimage.png");

}

function handleFileComplete(event) {

this.imageContainer.addChild(event.result);

}

And here is button function and listener

this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

   loadImage();

}

Thanks in advance!

[kglad]

hi,

use:


var this_var = this;

function loadImage() {

  var preload = new createjs.LoadQueue();

  preload.addEventListener("fileload", handleFileComplete);

  preload.loadFile("someimage.png");

}

function handleFileComplete(event) {

this_var.imageContainer.addChild(event.result);

}

And here is button function and listener

this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

   loadImage();

}

[popolino17]

Hey kglad,

Nop!

It doesn't work. Here are screen recorded video.

http://eklas.org/test/animate/test.mp4

[popolino17]

Hey kglad,

Nop! It's not work your propose. I recorded screen activity but because of  moderator video is not availave for now.

Basically what happened is when i press the button to get the content this button disappear (actually it is a movieClip)  and nothing else on the screen!

[kglad · Accepted solution]

you have more errors.  use:

var this_var = this;

var preload = new createjs.LoadQueue();

function loadImage() {

    preload.addEventListener("fileload", handleFileComplete);

    preload.loadFile({

        src: "someimage",

        id: 'someid'

    });

}

function handleFileComplete(event) {

    var someid = preload.getResult("someid");

    var bmp = new createjs.Bitmap(someid);

    this_var.container.addChild(bmp);

}

this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler() {

    loadImage();

}

[popolino17]

Well kglad, I'm smiling already and I would like to thank You.

Sharing knowledge is the brightest way to help.

Thank You again.

[kglad]

you're welcome.