js:drawImage in Animator CC flashes image briefly

[repusman]

The following code works fine if I just place it directly into an HTML page but using this code within frame1 in Animator CC and then Test, the image flashes very briefly on the page then disappears. I have added this.stop(); in various places to no avail. My canvas .fla document has no content with only 1 frame just for testing.

var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image();

    img.onload = function() {

        ctx.drawImage(img,0,0);

    }

    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

[albertd9194959 · Accepted solution]

Hi,

Animate uses a library system, if you were using html5/JavaScript directly it would work as you have it. (Using drawImage)

So, using Animate you first need to create a "bitmap object" to house your image, once that is done you can then draw this object on the stage.

You also do not need to create a stage variable, as its declared by default as "stage".

Bellow is the code:

var img = new Image();

img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

img.onload = function(event)

{

var stageImage = new createjs.Bitmap(event.currentTarget);

stage.addChild(stageImage);

}

[repusman]

Thanks so much for your answer.  It worked.  I have a couple more questions for you.

1) Is there some reference that would show me the differences between straight up javascript and programming within AnimateCC?

2) I was thinking that instead i might want to attach my image to an empty MovieClip that I will have on the stage.  I tried several variants using the Instance name of the movieclip but it didnt work. EDIT: Yes I definitely need to do this because my image is loading over top of all my animations.  I want the image behind all my animations.

[albertd9194959]

Hi,

1) Animate uses the CreateJS library CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

Using that as reference i haven't had many issues. For example

EaselJS v1.0.0 API Documentation : EaselJS

2) This is done in a similar way to the above code, but now you can call the MovieClip directly from the library.

(The only caveat is that you cant publish using the combine into spritesheets option)

Put the MovieClip on the stage and call it "myImage", within the MovieClip add a Bitmap. ( it has to be a bitmap, nothing else, like a placeholder image. )

I usually put the code on the second frame, ive had issues from time to time where it cant reference the MovieClip as the code gets loaded first.

root = this;

ChangeLogo();

function ChangeLogo()

{ 

var myImage = new lib.myImage();

root.myImage.children[0].image.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg"; //This is the default logo File

}

OR Just

var myImage = new lib.myImage();

this.myImage.children[0].image.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg"; //This is the default logo File