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.
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:
- 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 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.
Try this. Inside every one of your button event handler functions, add the line:
I suspect you'll see the problem.
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!
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.