Skip to main content
A
aavp1020
Known Participant
August 10, 2020
Answered

Need help on creating Html5 canvas script for loading data progress status

  • August 10, 2020
  • 2 replies
  • 1364 views

I have 30mb interactive animate cc published html package as below.

currently file loading took too much time and it was very on different pc's. (I am thinking because of internet downloading speed on different pc's). I want to show loading progress while loading. i had used default preloaded but its not helping me with my need.

below I comeup with an idea how it will look with the help of keyframe animation, but i want to modify with real time loading progress, as current ways showing 0 to 100 progress when refresh, even if data is already downloded.

 

any help will much approciated.

my code.

this.stop();
var a = this;
var dg = a.progressbar;
intial();
function intial(){
if(dg.currentFrame == 99)
{
a.progressbar.stop();
setTimeout(gotonext, 10);
}else{
dg.gotoAndStop(dg.currentFrame+1);
var prop = dg.currentFrame+1;//instead of currentframe I will need real time loading progress.
a.progressbar.txt.text = "Loading 3D object " + Math.round(prop * 1) + "%";
setTimeout(loopprogress, 150);// just wanted to delay the process for 38sec as current html package taking 38sec to complete loading. but regardless the time I want real time loading as data load it will show the percentage.
}
}
function loopprogress(){
setTimeout(intial, 150);
};
function gotonext(){
a.gotoAndStop(1);
}

    This topic has been closed for replies.
    Correct answer ClayUUID

    Attempting to code a preloader inside Animate is useless, because no timeline code executes until after all preloading is already complete.

     

    What Animate calls a "preloader" in the Canvas publish settings is NOT a preloader. It's just an animated graphic (properly called a throbber) to optionally display while the page is preloading, which it always does whether or not you've selected a "preloader". I can only assume Adobe persists in using the wrong terminology here because they like to lie to people.

     

    To make an actual preloader, you have to manually add code to the HTML generated when you publish, or create a new Canvas publish template with the added code in it. In the generated code, there should be a line something like:

    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

     

    After this line, you need to add something like:

    loader.addEventListener("progress", myProgressFunction);

     

    And then you'll need a progress function, something more functional than this:

    function myProgressFunction(e) {
	console.log(e.progress);
}

     

    You can take that progress parameter and use it to display a number, a filling bar, whatever.

     

    2 replies

    C
    ClayUUIDCorrect answer
    Legend
    September 9, 2020

    Attempting to code a preloader inside Animate is useless, because no timeline code executes until after all preloading is already complete.

     

    What Animate calls a "preloader" in the Canvas publish settings is NOT a preloader. It's just an animated graphic (properly called a throbber) to optionally display while the page is preloading, which it always does whether or not you've selected a "preloader". I can only assume Adobe persists in using the wrong terminology here because they like to lie to people.

     

    To make an actual preloader, you have to manually add code to the HTML generated when you publish, or create a new Canvas publish template with the added code in it. In the generated code, there should be a line something like:

    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

     

    After this line, you need to add something like:

    loader.addEventListener("progress", myProgressFunction);

     

    And then you'll need a progress function, something more functional than this:

    function myProgressFunction(e) {
	console.log(e.progress);
}

     

    You can take that progress parameter and use it to display a number, a filling bar, whatever.

     

      A
      aavp1020Author
      Known Participant
      October 28, 2020

      Thank you

      N
      Community Expert
      Nick GioiaCommunity Expert
      Community Expert
      September 9, 2020

      try this tutorial. Shows you how to create a preloader in html5.

       

      https://www.youtube.com/watch?v=67_DXhS3_Hc

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices