• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

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!

Views

2.6K

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

Community Expert , Nov 10, 2017 Nov 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_Mous

...

Votes

Translate

Translate
Community Expert ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

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

}

Votes

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
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

Hey kglad,

Nop!

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

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

Votes

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
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

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!

Votes

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 Expert ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

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

}

Votes

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
Explorer ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

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

Sharing knowledge is the brightest way to help.

Thank You again.

Votes

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 Expert ,
Nov 10, 2017 Nov 10, 2017

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

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