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

[_tal_]

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:

1. 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?
2. 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

[Colin Holgate]

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_]

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]

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.

[_tal_]

Our target devices are smartphones, so it needs to work well on those, even if we need to make the quality less on higher end devices.

Please correct me if I'm wrong, but from what I understand:

With a raster graphic, the computer just needs to read the image file, decompress it (depending on if its png/jpeg/etc), and draw it to the screen, as is (more or less), one pixel at a time.

With a vector graphic, the computer needs to read the schematic (svg/etc), draw the objects in memory one object at a time using math, and only then can it draw it to the screen. The more objects there are, the harder it is to do, unlike with a bitmap, where the contents of the bitmap don't generally matter (in terms of making it harder for the computer to draw) - only the resolution (number of pixels to draw) matters.

Drawing vector graphic animations is made even harder, given the fact that if you want to animate, say 30fps, the computer has a maximum of 0.033 seconds to draw each frame before moving on to the next frame.

Does that sound right? Is that essentially the issue with having too many vector lines/paths/objects? At a certain point, computers can't keep up doing the math?

If this is true, it makes sense that replacing a complex object made up of many paths with a bitmap would be a great deal easier for a computer to draw. I still don't really get how to do it properly with Adobe Animate though.

[Colin Holgate]

For compressed images, the more compressed, the less demanding it is. For vectors, the performance is proportionate to the number of cruves. There will be a sweet spot where bitmaps that look good enough are easier to play back than vectors that are more detailed than the compressed bitmaps can show.

You can argue to do the most detailed vector graphics, and play them back as bitmaps. The bitmap doesn't care about how many vectors there used to be.

In Animate terms, that can be simply to use spritesheets or texturemaps. They don't mind whether the source images were vector or bitmap. They are bitmap in the end.

[_tal_]

I tried using texture maps as is, but they didn't improve performance, probably because as seen in  main_atlas_2.png, there are hundreds of textures in the texture map. Is it possible to tell it to combine some of those into actual parts? In my case, parts of a sat dish.

[Colin Holgate]

I am hoping that it combines things in a smart way. You can set the dimensions of the spritesheet, to help with devices that only can take 1024x1024 textures. Better to have 16 different 1024x1024 textures than one 8192x8192 texture, for lesser devices.

[ClayUUID]

> For compressed images, the more compressed, the less demanding it is.

Err, no. The only thing compression helps with is initial load time. Once a browser downloads an image, it's decompressed in memory into a raw RGB (or RGBA) bitmap. The only way to make an image less demanding for animation is to lower its resolution.

Caching all these apparently hyper-complex vector objects should fix the animation speed issue, but apparently the original poster is somehow messing it up. Unfortunately, since there are infinitely many more ways to do something wrong than there are to do it right, it may be impossible to guess what the problem is.

[_tal_]

Exactly. I'm pretty sure caching should fix the issue, but I'm messing it up somehow.

Is there any detailed documentation on how to use caching? Perhaps even a book about Animate that goes into detail about caching?

All I can find are simple tutorials like this one: https://helpx.adobe.com/ca/animate/how-to/bitmap-texture.html

If it I follow that, all I get is the texture map attached, where ever tiny part is separate, and the performance is still terrible.

[ClayUUID]

Go into your publish settings and disabling textures and sprite sheets. Then, to use runtime caching, just make each problematic symbol a Movie Clip, then set the render mode in the properties to "Cache as Bitmap".

The only downside to caching vector symbols, other than the memory used, is that if you scale up the cached symbol it will appear pixelated instead of being redrawn at the larger size. Translation and rotation are no problem though.

[_tal_]

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...

[Nancy OShea]

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.

[ClayUUID]

Did you mean to post that in this thread?