Highlighted

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

Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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!

Screen Shot 2019-05-31 at 1.40.10 PM.png

TOPICS
Discussions

Views

423

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

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

Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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!

Screen Shot 2019-05-31 at 1.40.10 PM.png

TOPICS
Discussions

Views

424

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
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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

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...
May 31, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

ClayUUIDThe 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!

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...
May 31, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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?

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...
May 31, 2019 0