Skip to main content
MatthewLally
Known Participant
September 26, 2020
Question

Does HTML5 Canvas have trouble playing concurrent movie clips?

  • September 26, 2020
  • 1 reply
  • 533 views

I am an avid but amateur Animate user.

I am trying to manually convert an AS3 project in HTML5 canvas.

I know that I need to:

1) Change code commands from AS3 to JS (No problem.  I only use 'stop" and click to go to frame label.)
2) Remove filters like bevel and drop shadow (It doesn't look as sophisticated but no problem) 

3) Avoid Motion Tweens and Shape Tweens (no problem, Classic Tweens will have to suffice.)

 

But I still have one problem. One the web, some phones and tablets play the project quite slowly - too slowly.  By contrast, desktops, laptops, and iPhones play it perfectly.  I'd like the project to play briskly and smoothly on all devices.  After some observation I have noticed that the phones and tablets that play it slowly seems to have trouble when 2 animations (concurrently playing movie clips) are running simultaneously on screen.  I never have this problem when the original AS3 project runs as Android and iPhone apps; it runs seamlessly no matter what device they play on.

My QUESTION:  Does HTML5 have more difficulty than AS3 playing concurrent movie clips? I am reluctant to remove all concurrently playing animations because that is a major aspect of the project- but I will go it to get the project to play smoothly on all devices

 

Thank you.

 

 

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    Community Expert
    September 26, 2020

    html5 doesn't have the problem.  particular browsers/hardware may have a problem with particular displays.

     

    ie, there's nothing inherent in android/chrome/movieclips that causes performance problems.  eg, my lenovoa tab m8 (and even my nexus 7) can play a canvas file with dozens of movieclips changing concurrently without problem.

     

    p.s. you can use shape tweens and motion tweens in canvas projects

    MatthewLally
    Known Participant
    September 26, 2020

    Thank you kglad for your timely and helpful answer.

     

    It helps me understand the HTML5 is NOT the limiting problem.

     

    The website (which is just the Animate project) is so slow on older devices I have.  But the devices are probably younger than a nexus 7.  What really confuses me is that the website also plays very slowly on a Microsoft Surface tablet that my work lent to me.  I think that device is brand new.

     

    I appreciate your response and it has lead me to conclude that instead of 'dumbing-down' the project by removing concurrent movie clips, I'll  just re-build in HTML5 similar to how to how I made it in AS3 and let the chips fall where they may.

     

    And actually, I'm not so sure taking out some of the concurrently playing movie clips speeds it up on the slow machines any way.

     

    P.s. I also appreciate you offering that Motion tweens and Shape tweens are OK to use in HTML5.  I'm go gonna go back to using them.

    Legend
    September 26, 2020

    You're probably just doing something horribly inefficient that mobile devices can barely handle when a single clip is playing, but absolutely not when multiple clips are playing.