Copy link to clipboard
Copied
I created animations using Animate CC HTML 5 Canvas. Published with a preloader. The preloader works fine when viewing the created html document directly. My problem occurs when I load the html doc in an iframe. Sometimes it loads fine but most of the time the preloader loads, seems to be working but never actually switches to the animation once it’s loaded. If I close the modal and reopen, the animation plays. Problem is the viewer will not know to do this. Do I need to alter the preloader code since I am using modal-body and iframe?
View the issue here. http://www.devotiondesign.com/InteractiveMedia.html
Any help would be appreciated!
These sizes will make worthwile to try PreloadJS. Good luck with that.
I had another look at your page and discovered that something is terribly wrong. Even without calling the modals and iframes with canvasses, there are errors which turn up in the console of both Chrome and Firefox. They are related to createjs-2015.11.26.min.js and here in particular to a handler called handleComplete().
It must be related to the init(0 function in the published HTML page (out of Animate), This section:
...var canv
Copy link to clipboard
Copied
Hi Devoted
How large is your file? I mean all of it, the html, javascript, images - the whole package?
The thing is, that the preloader in Animate isn't actually a preloader. Animate generally preloads everything by default, no matter if Include preloader is checked or not. All that what include preloader does is to loop an animation while the default preloading is in progress. Hence if your file package isn't very large then maybe in your case with modal etc. you might consider not to check this option.
Otherwise if your package is large (which it looks a bit like) then you might want to look into PreloadJS and LoadQueue(). With those you can create your own preload routine and listen to complete and fileload events and play and make disappear a loader animation which might work better in your Modal - iFrame situation.
Klaus
Copy link to clipboard
Copied
They are 20MB, 10MB and 60MB. The problem seems completely random, sometimes they load perfectly other times they hang. I will look into the suggested alternate method. Thank you.
Copy link to clipboard
Copied
These sizes will make worthwile to try PreloadJS. Good luck with that.
I had another look at your page and discovered that something is terribly wrong. Even without calling the modals and iframes with canvasses, there are errors which turn up in the console of both Chrome and Firefox. They are related to createjs-2015.11.26.min.js and here in particular to a handler called handleComplete().
It must be related to the init(0 function in the published HTML page (out of Animate), This section:
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("F6C6FBEA064539469E0855582BCA859A");
var lib=comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
In line 10 is the handleComplete(evt,comp thing, whereby the evt is the completion of loader.loadManifest(lib.properties.manifest); and comp is AdobeAn.getComposition("F6C6FBEA064539469E0855582BCA859A"); . The loadManifest thingie is the manifest close to the end of the published javvascript file (out of Animate. Here in your case a few PNGs are listed. Not many actually. I can't put my finger on it what's wrong, but something is.
Maybe somebody else here in the forum knows.
I attach a screenshot from the console in Chrome from this afternoon.
Klaus
Copy link to clipboard
Copied
The code that is wrong is what Adobe Animate CC created on publish. Why would animate CC create such wrong code?
Thank you
Copy link to clipboard
Copied
The page works fine without any errors in chrome when I open it not in the iframe. I am going to download https://code.createjs.com/createjs-2015.11.26.min.js and link to the file directly at the root. See what happens.
Thank you
Copy link to clipboard
Copied
Hi
Don't get this the wrong way, please. It's not Animate and the code it's publishing. As you say yourself, it's fine outside the iframe. I even predict, it's fine too in an iframe. I produce a lot of HTML5/Canvas projects which run in iframe setups without a hickup. I suspect it has more to do with the modal window in which the iframe is running. And I know not enough about the framework in which the modal window is originated.
Klaus
Copy link to clipboard
Copied
Yeah no problem, I agree. I honestly expected to have some issues with this. I was actually surprised it worked at all. I know I can present these in a more basic fashion I simply like the current style.
Thank you very much for your help on this.