Why is my frame rate so low when I publish to HTML 5

[Exuberant_funB836]

Hi All.

I have created an animation for my website, It's running smoothly at 30 fps within adobe animate but when I publish to html and upload to my site its so slow and jumpy on every browser and device I test it on.

Does anyone know why this is? Any help would be very greatly appreciated.

Here is a link to the animation...

robotics1

Thanks

Anthony

[Katie Houghton]

Looks like a lot of graphics. Try adding a preloaded under the Basic Tab of your Publish Settings.

[Exuberant_funB836]

Thanks for the reply but this didn't fix the issue....

robotics2

I have seen animations like this before so I know it can be done. Is it a loading thing rather than a frame rate thing?

If it is, how do I fix it?

[Katie Houghton]

Do you have any custom easing, filter effects or ink modes? These will slow down the playback. Is your animation using Basic Tween or some other animation. Basic Tween does not have to write the x,y location of each element for each frame. This could slow the playback if you have a lot of different layers animating using something like Motion Tween with custom easing, this could very well be the problem. Try simplifying the animation elements. Some animation costs more in processing then others. Stick to Basic Tween when you can. Keep the elements simple. Not a lot of custom blends nor filters etc.

[Colin Holgate]

I looked at the JS file, and I think it's all simple Classic tweens. But the graphics are all vector. Making some of those be bitmap could speed things up.

[Katie Houghton]

Yes. Vectors will also hit the processor. Try to use Cache as Bitmap for complex static vector shapes whenever possible. Under the Display tab for your symbol you will see an option for Render.

[ClayUUID]

https://forums.adobe.com/people/Katie+Houghton  wrote

Try adding a preloaded under the Basic Tab of your Publish Settings.

Canvas documents always preload their content. The "Include preloader" option under publish settings is labeled wrong. What it actually means is "Include throbber". Adobe really should fix that.

[Colin Holgate]

There is something very funny in that Wikipedia page. It shows an example of a 'throbber', but it never loads! It just sits there, loading...

[Exuberant_funB836]

Thanks for all the replies. I've just tried turning all the vectors into Bitmaps but this has made it ever slower.

http://www.ah-graphics.co.uk/animation/robotics3.html

This has made a 2mb spritesheet at the lowest setting. But it has reduced my .JS file to 800kb.  What sort of file sizes would be appropriate to get this to run smoothly.

I'm struggling to understand how a broswer can't cope with this animation. Surley this is a fairly simple animation compared to other online html animations. 

Should I turn each classing tween into a frame by frame animation? I really dont know what to do next.

[ClayUUID]

It looks like the only thing in the sprite sheet is the background. Everything else is just white.

Don't use shape tweens unless you absolutely have to. Those generate a ton of JavaScript.

Looking at the animation, a single static bitmap and maybe six boxes tweening around should be able to handle the whole thing. You must be doing something really inefficient.

[Katie Houghton · Accepted solution]

Yes. agree. Again try to keep your animations to the Classic Tween if possible. Also the background artwork should be one image. The smaller pieces animating. I assume at least 4 items are Classic Tweens or Classic Tween with a Classic Motion Guide. The rest Motion Tweens. Don't make a lot of little parts. Make a background with smaller animations. Keep it as simple as possible.