Skip to main content
SSSSSSBenay
Known Participant
May 31, 2019 7:09 PM UTC
Question

Slow, dragging animation when Animate HTML5 Canvas is played in full screen browser

Hello everyone,

I am creating an interactive children's program using Animate's HTML5 Canvas. My animate timeline is 6 frames long and each frame includes multiple nested movieclips with timeline animation. I have javascript on the main timeline, and also within many of the nested movieclips' timelines. I am using simple vector art for my characters and small animated objects, and bitmaps for my large backgrounds. My animation is done through Classic tweening on the timelines. I am using no filters. I have short sound effects called at various frames in my movieclips.

The issue I am having is that my program is playing with a very noticeable drag when the file is played on a browser in Full Screen mode (Chrome is the worst). I have done a lot of testing and problem-solving trying to figure out why this is. In my testing, I shortened my Animate file to only one frame on the maintimeline instead of 6, eliminated nearly 80% of nested movieclips, converted most my vector artwork to bitmap, and the program STILL ran super slow on the browser at full screen mode. This is the Chrome Performance summary I got of my trimmed down test file.

My program plays fine at normal browser window size, but when viewed in Full Screen Mode I experience the drag and it is quite problematic. Does anyone have any idea what I could be doing wrong with my animate file as far as artwork or optimized javascript? (The javascript I am using is mostly timeline controlling– .gotoAndPlay(), .gotoAndStop();– button events, drag and drop with hitTests.....but even when I cut out all this interactivity in my test file, the program STILL dragged when viewed at full screen mode in the browser...so I am thinking it is not an javascript optimization issue...although I am open to ALL suggestions!!) Thank you in advance!

This topic is closed to new replies. Start a new post to keep the conversation going.

5 replies

SSSSSSBenay
Known Participant
Jun 1, 2019 12:50 AM UTC

Also I should say that when playing my Animate HTML5 Canvas file, the CPU of the browser exceeds 100%. Can someone please advise me what I could possibly be doing wrong with my artwork or javascript to cause such poor performance in the browser?

Translate
natashah93244772
Known Participant
Feb 3, 2024 1:30 AM UTC

Very disappointed in Adobe. BRING BACK MACROMEDIA!!!!!

Translate
kglad
Community Expert
Community Expert
Feb 3, 2024 1:33 AM UTC

you could hardly pick a more inappropriate thread for that comment.

Translate
Legend
May 31, 2019 8:02 PM UTC

You already started a thread on this. Multiple threads on the same topic accomplishes exactly one thing: Annoying people.

Translate
SSSSSSBenay
Known Participant
May 31, 2019 9:23 PM UTC

ClayUUID​ The question in my previous post was how to add a max-width to my canvas to prevent animation drag when viewed in large browser modes (by keeping my canvas a smaller size than the full screen browser), but that was poorly thought out– what I really need to address is how to FIX the drag issue itself in large screen browsers and therefore I have more clearly stated that objective in this post. Thanks!

Translate