Skip to main content
P
popolino17
Known Participant
November 10, 2017
Answered

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

  • November 10, 2017
  • 1 reply
  • 2912 views

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!

This topic has been closed for replies.
Correct answer kglad

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();

}

1 reply

kglad
kglad
Community Expert
November 10, 2017
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();

}

P
popolino17Author
Known Participant
November 10, 2017

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
kgladCorrect answer
Community Expert
November 10, 2017

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();

}

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices