HTML5 Canvas - import images at runtime

[BiteMyShinyMetal]

Hi, I have a list of images in a folder which I want to put into a carousel type feature. I am referring to this as an example:

http://www.createjs.com/demos/easeljs/filters

specifically:

function Carousel()//this part seems to work fine
{
//wait for the image to load
     this.img = new Image();
     this.img.onload = handleImageLoad;
     this.img.src = "someimage.png";
}
Carousel.prototype.handleImageLoad = function()
{
//find canvas and load images, wait for last image to load
     var canvas = document.getElementById("canvas");//what do I replace this with???
 // create a new stage and point it at our canvas:
     stage = new createjs.Stage(canvas);//looks like it needs changing as well???
     var bmp = new createjs.Bitmap(img).set({scaleX: 0.5, scaleY: 0.5});
     stage.addChild(bmp);
// draw to the canvas:
     stage.update();
}
var carousel = new Carousel();

This code doesn't create any errors, but the image doesn't appear.

What do I need to change to get an image into the html5 canvas?stage?exportRoot? a movieclip? a container???

Where can I find info about the "stage" and the "canvas", and whether or not they exist in Animate, how to use them if they do, etc.

[kglad]

'this' is undefined, remove that prototype stuff and img is undefined in your onload handler.

[BiteMyShinyMetal]

Thanks kglad. That missing "this"  is just a typo, most of my debugging of script conversions from actionscript to html5/CreateJS consist of working out where I missed putting a "this" in front of some variable!

i've used this as a guide for the coding:

Part 3: Building a HTML5 Flappy Bird Game Clone with Adobe Animate CC | Creative Cloud blog by Adobe

From what I gather, the "this" keyword defines and accesses variables and accesses behaviours tied to a specific instance of a class (or the js equivalent) from within that instance, and the "prototype" keyword defines behaviours of classes - that kind of OO programming stuff.

so line 5 is actually "this.img.onload = this.handleImageLoad;"//typo underlined

and line 17 is "var bmp = new createjs.Bitmap(this.img).set({scaleX: 0.5, scaleY: 0.5});"//typo underlined

I know none of this stuff needs to inside an object, but it's the way i'm used to programming, and it can be reused later, for multiple instances of objects.

What I really don't get is what do i do instead of assigning the Image() to a canvas object, on line 12, and

do I need line 15? Is the "stage" a thing in Animate?

[kglad]

copy and paste the code i suggested.

once you see that work you can check the differences between your code and mine and determine why your's fails and mine works.

[BiteMyShinyMetal]

Thanks again guys for the help!

@ Colin, the images in the library was going to be my backup plan if this didn't work.

@kglad, sorry, I misunderstood what you meant, it was pretty late when I read/replied. Your code works, so thanks for that!

I have found out what elements are and aren't necessary as well so here's the code for others:

function ExternalImageLoader()
{
  tl.img = new Image();
  tl.img.onload = handleImageLoad;
  tl.img.src = "ImageDirectoryPath/imageName.png";
}
handleImageLoad = function() 
{
  var bmp = new createjs.Bitmap(tl.img);
  stage.addChild(bmp);
}
var tl = this;
var externalImageLoader = new ExternalImageLoader();

so it appears finding the canvas and using it to create a new stage isn't needed, nor is updating the stage (unless the image changes during runtime I presume).

Maybe the problem was making the handleImageLoad function a method of the Carousel "class" which scoped the stage variable to the carousel instance?

[Colin Holgate]

Something to know about the CreateJS team is that they don't use Flash Pro or Animate, and all of their examples are standalone that can be created with just a text editor. If you were to go back to what your need is there may be easier ways to do it using Animate features.

Their code examples include many things that you don't really need to do, Animate will do those when you do a test or publish.

[BiteMyShinyMetal]

Thanks Colin, yeah I kind of know that CreateJS works without Animate, it's just a problem working out what is needed and what isn't when using Animate to make html5 docs.

What I want to do is pull in a bunch of images from a sub-folder and have them appear in an image carousel.

I can do this with Actionscript, I can copy the code from CreateJS and do it in a text editor. I'd just like to know what the code is for doing it in Animate CC for html5 canvas. Which elements are needed and which aren't, or what needs to be replaced. I've done some pretty complicated stuff using Animate and html5 canvas, it's just this little thing is eluding me.

[Colin Holgate]

When you publish HTML5 Canvas all of the images become external anyway. You can imagine an approach where the images are in the library, and you make the carousel with a set of new Bitmap(), addChild() approach, that can work with CreateJS too.

If you want to try that approach, put your images into the library, and in the library panel's Linkage column, double-click in the column for the first bitmap. Type in a sensible linkage name. Now you can say:

var bm = new lib.BitmapLinkageName();

this.addChild(bm);

When it is published the bitmaps will be in the images folder. If you have some reason for them to then be in a subfolder you may need to edit the published JavaScript file.

If the images are going to be different at runtime, then you may need to get into the CreateJS code, but only the parts that creates a new bitmap. You would most likely be doing a this.addChild() and not a stage.addChild() like in the demo code. The setting up of the canvas and stage is done by Animate when it publishes. By the time you're adding images you're dealing with the main timeline.

[kglad · Accepted solution]

why don't you just do what i suggested?

1. function Carousel()//this part seems to work fine 
2. { 
3. //wait for the image to load 
4.      tl.img = new Image(); 
5.      tl.img.onload = handleImageLoad; 
6.      this.img.src = "someimage.png"; 
7. } 
8.  
9. handleImageLoad = function() 
10. { 
11. //find canvas and load images, wait for last image to load 
12.      var canvas = document.getElementById("canvas");//what do I replace this with??? 
13.  
14.  
15.      var bmp = new createjs.Bitmap(tl.img).set({scaleX: 0.5, scaleY: 0.5}); 
16.  
17.      stage.addChild(bmp); 
18.  
19. // draw to the canvas: 
20.      stage.update(); 
21. } 
22.  
23. var tl=this
24. var carousel = new Carousel();