Highlighted

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

Community Beginner ,
Aug 09, 2020

Copy link to clipboard

Copied

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

html package.JPG

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);
}

Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Aug 09, 2020

Copy link to clipboard

Copied

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

html package.JPG

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);
}

Views

59

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 09, 2020 0
Adobe Community Professional ,
Sep 09, 2020

Copy link to clipboard

Copied

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

 

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

How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader Creating a pure css3 preloader, which looks like a circular animated spinn...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 09, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Sep 09, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 09, 2020 0