Skip to main content
E
Exuberant_funB836
Participant
July 10, 2017
Answered

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

  • July 10, 2017
  • 2 replies
  • 2568 views

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

This topic has been closed for replies.
Correct answer Katie Houghton

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.

2 replies

E
Exuberant_funB836Author
Participant
July 10, 2017

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.

C
ClayUUID
Legend
July 10, 2017

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.

K
Katie HoughtonCorrect answer
Inspiring
July 10, 2017

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.

K
Katie Houghton
Inspiring
July 10, 2017

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

E
Exuberant_funB836Author
Participant
July 10, 2017

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?

K
Katie Houghton
Inspiring
July 10, 2017

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices