It could be in small part optimization on your end but I have seen the same thing myself with high cpu usage alot..
Best practices I have found to reduce the "load" is when using images, use 1024/1024px or below, jpgs whenever possible and always save for web to reduce file sizes (Photoshop).
In addition I have found that making sure all the symbols in use have a stop();... to ensure sure they don't play forever... seems to help.
"What I'm seeing at this point won't survive on a mobile device."
I agree that this is most likely the reason mobile support isn't "official" yet...
I stand corrected, There was confusion was a support ticket..
1 person found this helpful
If you're using large images, CSS filrers or have a large amount of symbols (like 100+) this can contribute to degraded performance in Animate. This is a known issue on our end and we're actively working to try and solve it. Always ensure to test your comps in the browser first though as that's where you'll see the truth in performance.
@DDcreams -- re" I agree that this is most likely the reason mobile support isn't "official" yet..." Just wanted to clarify this isn't true, not sure where this misconception came from. Animate content is officially supported on mobile devices. There's some limitations to consider on mobile like image size, processor speed and such, but Animate content is supported for deployment on desktop as well as mobile.
I had a composition with a symbol which was used 100 times on the stage with a 3 second animation called in succession on each symbol (the animation ended with a .stop). It worked beautifully however the the CPU load ramped up with each new animated symbol until my fan was roaring away! It then dropped back as soon as the composition was finished. Interestingly it only seemed to be a problem in Chrome.
I had the same issue on Firefox as well as Chrome, seems ok on Safari but then again I haven't run any real tests with that browser. Chrome by far is the worse though....
Thank you for the response on this issue. I'm be very eager to hear the results on what is found to be the resolution with these high CPU load issues. (Because doing the level of character animation I'm working with here outside of Edge may not be possible, and I'd like to not have to scrap our approach to this so soon.)
If it helps to explain this a bit more in depth, this is a moderately simple timeline. Only 6 unique symbols, most nested inside each other, and only one has been duplicated for symmetry in the project. All images are SVG files, 16 of them totaling up to 86kb. Transitions are only scale, position, opacity and rotation. No CSS filters or other "complex" features of Edge Animate in use here due to the need for cross browser compatibility and CPU demands.
Very light build since a vital part of the target market for this project is tablet usage. If you need more information from me to help dig deeper into this issue please let me know.
(And thanks to everyone else posting feedback as well. Much appreciated!)
1 person found this helpful
At the end of the day the truth is going to be in the browser, not the tool. You can easily check in realtime how your comp is running by using Edge Inspect -- when you enable Inspect and pair it with your mobile device, when you preview your comp in Animate you can see it on mobile without having to transfer files or any of that noise.
So one last follow up on this topic. Thanks again for all the feedback folks.
Did an overhaul of this project once more this morning and finally got the browser quality I need. (Bear in mind this is my opinion, but it comes from trial and error.) The real need for me dig into performance so much is the mobile device requirements.
Turns out that Edge Animate projects have a naturally "high idle" demand on the CPU. I can only assume that this is a good deal of jQuery cycling in the background, constantly looking for something to do. Each object (div) you bring into a project adds weight to it, regardless of how well you nest symbols and minimize the complexity of transitions.
The insects in my animation were just too complex when it finally came down to a mobile device. The legs and eyes, each in separate symbols, kept detaching from the body when moving across the screen. I can only assume the processing power on certain tablets and phones I'm using couldn't track all of the transitions in real time. And considering this is a project for kids, it would have scared the hell out of them when legs rip off a character lol. Solution was to switch up to a sprite sheet, constructed out of an SVG for this character.
CPU now spikes at 34%, then idles down to 14% after all animations have ended. 9 Elements on the stage, 3 are symbols. 1st symbol is the sprite for the spider character, 2nd is a single angle of the spider nested with a circle, and the 3rd is 6 green circles to act like blinking lights. Without altering the content further, this is probably about the best I can get for this project.
And thanks for pushing me to try Edge Inspect again Sarah. It was a little less than functional last time I gave it a go, getting better now it seems.
Happy Thanksgiving all! (Glad to have this one done before the holiday.)