CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.11k stars 1.97k forks source link

CreateJS adding image to timeline with addTween doesn't work all the time #1052

Closed dominicosavio closed 3 years ago

dominicosavio commented 3 years ago

I have experienced some buggy behavior with timeline.addTween. Sometimes it works, sometime it doesn't I have an image, Multi_background, that I load into many movieclips, and I later render those movieclips onto canvas with my own code. Here is what the js code looks like (generated by Adobe Animate).

(lib.Multi_background = function() { this.initialize(img.Multi_background); }).prototype = p = new cjs.Bitmap(); p.nominalBounds = new cjs.Rectangle(0,0,800,600);

and later the Multi_background is added to another instance like this

(lib.Slide_34 = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{});

  // Title
  this.titleTxt = new cjs.Text("Slide 34", "bold 30px 'Arial'", "#FFFFFF");
  this.titleTxt.name = "titleTxt";
  this.titleTxt.lineHeight = 36;
  this.titleTxt.lineWidth = 767;
  this.titleTxt.parent = this;
  this.titleTxt.setTransform(15,18.05);

  this.timeline.addTween(cjs.Tween.get(this.titleTxt).wait(489));

  // Content
  this.instance = new lib.Slide34_shape();
  this.instance.setTransform(0,80);
  this.timeline.addTween(cjs.Tween.get(this.instance).wait(489));

  // background
  this.instance_1 = new lib.Multi_background();
  this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(489));
  this._renderFirstFrame();

 }).prototype = p = new cjs.MovieClip();
 p.nominalBounds = new cjs.Rectangle(0,0,800,600);

Usually it will show the first time I visit, if I reload the page, it won't show the background but show all the shape and text. is there anyway we can tell for sure that timeline.addTween has successfully loaded that image?

Thanks

danzen commented 3 years ago

Hi @dominicosavio I would like to see if I can debug this on the CreateJS side... have you got a test FLA that you could send us or post a link to a zip file? My e-mail is door@danzen.com if you want.

danzen commented 3 years ago

Thanks @dominicosavio I got your test pages and see the issue. I will dig around a little and see we can find a fix.

danzen commented 3 years ago

Hi @dominicosavio - according to your e-mail to me you have found a work-around but adding window.images.Multi_background instead of img.Multi_background. I am glad that worked for you. I am a little puzzled about how it worked.

I did a two frame image test here https://zimjs.com/animate/imageTest.html and I can't get the image not to load. Also, if I adjust my img.EJ9cic8WkAA0lFF to window.images.EJ9cic8WkAA0lFF then it can't find windows.images. So did you assign a global variable images = img somewhere in your code by chance?

There was definitely a loading problem when I tried your example. Just not able to recreate it here (as we do not have all the files - you are welcome to send me a complete ZIM with the FLA and I can test further). Maybe some caching issue with the server? I think if there were a general loading issue with images we would have had more reports here. We can monitor the situation.

danzen commented 3 years ago

Closing for now... unless more reports.