Hello,
I was able to translate 15 years old .swf files to Animate CC HTML5 Canvas, but no luck recreating a percent preloader.
I found some clues but no complete and simple solution.
Can you help?
Hello,
I was able to translate 15 years old .swf files to Animate CC HTML5 Canvas, but no luck recreating a percent preloader.
I found some clues but no complete and simple solution.
Can you help?
This is was I found… I think it’s the solution except I have no idea how to implement it… ie where to put the code…
First, add a progress listener to the asset preload block:
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.addEventListener("progress", handleProgress); // <-- ADD THIS CODE HERE
loader.loadManifest(lib.properties.manifest);
Second, paste the function to handle it after the handleComplete() function:
function handleProgress(evt) {
document.getElementById("preloadFill").style.width = Math.round(evt.progress * 100) + "%";
}
Third, paste in some kind of progress indicator. The above function is written to work with the following very simple example, consisting of some CSS (inserted anywhere in the head), and a couple of DIV layers, inserted inside the body immediately before the tag.
<style>
#preload {
position: absolute;
background-color: #EEE;
top: 10px;
left: 10px;
width: 400px;
height: 5px;
border: 0;
padding: 0;
}
#preloadFill {
position: absolute;
background-color: #AAA;
height: 5px;
width: 0;
}
</style>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<div id="preload"><div id="preloadFill"></div></div> <-- ADD THESE TAGS HERE
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>
</body>
…and
document.getElementById(“preload”).style.visibility = “hidden”;
This hides the progress bar when the page is done loading.
:: Copyright KIRUPA 2024 //--