Highlighted

HTML5 Canvas slideshow slows to crawl in browser

New Here ,
Sep 21, 2020

Copy link to clipboard

Copied

Greetings community!

 

I'm currently creating an interactive picture gallery with buttons advancing each frame to the next. The images are 1920x1080, and I've managed to create a simple navigation system which upon testing works well, however after publishing and then launching it in a browser window, after around 12 slide clickthroughs  the performance slows to a crawl and will no longer advance, forcing me to close out the window 😞

 

I have created many of these interactive presentation in Flash previously, but am new to HTML5. Am i wrong in assuming HTML5 Canvas can handle something like an interactive slideshow the way Flash can?

 

I appreciate any suggestions or possible solutions!  Thanks in advance.  Note: I've attached an image showing my basic timeline structure and simple button code for reference.

Views

79

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

HTML5 Canvas slideshow slows to crawl in browser

New Here ,
Sep 21, 2020

Copy link to clipboard

Copied

Greetings community!

 

I'm currently creating an interactive picture gallery with buttons advancing each frame to the next. The images are 1920x1080, and I've managed to create a simple navigation system which upon testing works well, however after publishing and then launching it in a browser window, after around 12 slide clickthroughs  the performance slows to a crawl and will no longer advance, forcing me to close out the window 😞

 

I have created many of these interactive presentation in Flash previously, but am new to HTML5. Am i wrong in assuming HTML5 Canvas can handle something like an interactive slideshow the way Flash can?

 

I appreciate any suggestions or possible solutions!  Thanks in advance.  Note: I've attached an image showing my basic timeline structure and simple button code for reference.

Views

80

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
Sep 21, 2020 0
Adobe Community Professional ,
Sep 22, 2020

Copy link to clipboard

Copied

Hi.

 

This slowness may be happening for one or more reasons:

- Are you preventing your buttons to receive new listeners of the same type everytime a frame is revisited?

- Are there many images being displayed in the same frame?

- How are you publishing your content? The texture mode is the one that should deliver the best performance.

 

My general tipos for performance are these ones:

- Try testing your file with and without exporting the document as texture (Publish Settings > JavaScript/HTML > Image Settings > Export document as texture);

- Consider turning off the advanced layers mode (Ctrl/Cmd + J) if you don't need advanced features like camera or parenting because this mode has some impact on performance;

- Avoid complex containers with lots of children;

- Avoid complex shapes;

- Make sure you're not using color effects/filters;

- Use cache whenever possible;

- Avoid using large bitmaps. This is specially true for mobile devices;

- Try low resolution values for exported bitmaps (Publish Settings > JavaScript/HTML > Image Settings > Resolution);

- Try to balance wisely when an asset should be made of a vector shape or of a bitmap;

- Avoid using too many static text fields because they are exported as raw vector shapes;

- Avoid adding too many listeners;

- Add mouse events to a container and use the event.target property instead of adding a separate mouse event to dozens or hundreds of children;

- If possible set a container.tickChildren to false so the tick will not be propagated to children of a container;

- If using a tick event it may be a good idea to change the Ticker.timingMode and see which one works best for your case;

- Avoid using motion tweens because they are exported as frame by frame animation;

- Avoid having a huge main timeline with lots of tweens;

- Avoing very large shape tween spans.

 

Please notice that some may or may not be suitable for your case.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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 22, 2020 1
Adobe Community Professional ,
Sep 22, 2020

Copy link to clipboard

Copied

Try this. Inside every one of your button event handler functions, add the line:

alert("clicked!");

 

I suspect you'll see the problem.

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 22, 2020 0
New Here ,
Sep 22, 2020

Copy link to clipboard

Copied

Thank you for the replies!

 

JC: I appreciate the thorough checklist. This is helpful. I'm suspecting that my novice usage of buttons events seems to be the culprit here.

 

ClayUUID: Thank you for your insight! I see now, it's triggering the alert everytime i click a button to navigate, stacking to the point where it's bogging everything down, like infite popups. ugh.. that would explain it for sure. Horrid.

 

I am admittedly new to this (and coding in general).. but, is there an easy way for me to avoid this stacking effect here, while still retaining the simple button clickthrough functionality (similar to flash buttons)? Any advice would of course be greatly appreciated.

 

Thank you both for your time!

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 22, 2020 0
beaudsn LATEST
New Here ,
Sep 22, 2020

Copy link to clipboard

Copied

UPDATE: had an idea and moved the buttons with their respective functions and corresponding slide image into their own individual Movieclip containers (rather than have them on separate layers on the main timeline) using parent to advance the main timeline. No more duplicate popups from hell!

 

I'm sure there's a much more elegant solution to all this, but for now this is closer to my skill level.

 

Again thanks.

 

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 22, 2020 0