Known Participant

Question

How can I speed up the animation of complex objects on smartphones?

Forum|Forum|5 years ago
June 19, 2020
3 replies
1887 views

I made some animations in Adobe Animate. See attached Animation.gif.

When I publish, and play them in a browser on my desktop, I average about 47 FPS. When I play them on a smartphone, I get about 20 FPS. In both cases, there's visible lag and jerkiness. The project is set for 60 FPS.

60 FPS is just a test. I don't intend for the final project to run at 60FPS, but even if I drop it down to a more reasonable 30FPS, both the desktop and smartphone still have lag and jerkiness.

My guess is that the problem is caused by the fact that these animations are made out of complex objects, with a large number of lines, and the computers trying to run the animations are having a hard time calculating the location for and drawing each tiny line.

Digging around online, I can see that Adobe Animate supports caching vector images as raster images at deploy time. Unfortunately, when I do that, it doesn't appear to help performance any. I think this is because what I end up with is something like the attached main_atlas_2.png, where instead of caching large objects, it caches every single tiny line.

Naturally, I have some questions:

Am I even on the right track when it comes to speeding up animations? Is caching objects as raster images the best way to speed up an animation on a smartphone, and make it play smoothly? Is it really that difficult for a computer to display a large number of vector lines?
Is it possible for me to tell Animate not to cache every single tiny line, but rather to cache larger objects? Is this likely to help in any significant way?

I know that if you look at the properties of a movie clip, it has a "Render: Cache as Bitmap" option. I would assume that my solution would be to select groups of objects, make them into movie clips, and mark those movie clips as "Cache as Bitmap", but as far as I can tell, this has no effect on the main_atlas_2 texture map that gets generated.

What am I doing wrong? What should I be doing?

Thanks

This topic has been closed for replies.

Nancy OShea

Community Expert

I've never been a huge fan of animated GIF. You'll get smoother results and better picture quality with After Effects transitions saved to MP4 video. And in many cases, video will produce a smaller filesize than gif.

Nancy O'Shea— Product User & Community Expert

C

ClayUUID

Legend

Did you mean to post that in this thread?

_

_tal_Author

Known Participant

The only working way I found this morning is to do this:

Right click a Movie Clip and hit "Export PNG Sequence..."
Pick an empty dir to save the PNG sequence to
Select a resolution for each PNG (you can play around with this to find the best quality, while still having it run smooth on your target devices)
Start a new Adobe Animate project
Create an empty movie clip, and open its timeline
Select "File --> Import --> Import to Stage"
Select THE FIRST PNG in the sequence
- Do NOT select ALL the PNGs
When you import, Adobe will tell you that it detected that your PNG is part of a sequence, and ask if you want to import the entire sequence. Do it

This will give you a movie clip where every frame is a keyframe, each containing your animation's PNG, in sequence.

You can now open your library, put all the images into a folder to keep them organized, and transfer the movie clip, and the image folder to your actual project.

In your actual project, as long as your Publish Settings have something like "spritesheet" or "texture" selected, it will publish all the PNGs into a texture map, or a spritesheet, and play fairly smoothly on your target devices. If the target device still can't keep up, try dropping the resolution as you export the PNG sequence.

This shows a video of how to import the image sequence: https://cartoonsmart.com/?portfolio=how-to-import-an-image-sequence-change-all-frames-then-export-it-in-adobe-animate-free

Colin Holgate

Inspiring

There are a lot of ways you can optimize, but there may be a simpler solution to your problem.

The last two version of Animate now let you use Stream sync on audio, instead of only Event. That means that you can have a soundtrack that forces the frames to keep up on slower devices. The soundtrack could even be silence, if you don't use sound.

If you do have sound aleady, select it in the timeline, chance sync from Event to Stream in Properites, and then publish and try on mobile.

_

_tal_Author

Known Participant

I added a silent audio track and changed it to Stream sync, like you said. I can't tell exactly what it's doing (skipping frames?), but it's definitely smoother than it was before. There's still a little bit of jerkiness sometimes, but like you said, it tries to catch up and seems to do an ok job. If I don't find a better solution, this is definitely what I'll go with. Thanks!

If anyone has any more info about why a computer has so much difficulty playing a complex vector graphic animation smoothly, or how it would normally be sped up, I would appreciate it. I assume I'm not the first one to try to animate complex objects. Despite my objects being complex, the majority of the pieces either don't move, or move as a unit, so grouping the parts that move together, and turning them into raster images seems like it should work, assuming computers have an easier time displaying raster images (do they?), though I'm not sure how to do it properly.

Colin Holgate

Inspiring

It will skip frames, and will skip less if you do the other optimizations.

The general case with performance is that the more vectors there are, the more demanding it is. Also, with bitmap compression, the more compressed it is, the less demanding it will be.

You want to aim for a level where your lowest intended devices are tolerable, and the higher end devices are perfect. You're not going to make lower end devices perfect without giving up some possible extra quality in higher end devices.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded