Does HTML5 Canvas have trouble playing concurrent movie clips?

[MatthewLally]

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.

[kglad]

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]

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.

[ClayUUID]

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.

[Colin Holgate]

Pause a moment before going back to motion tweens!

It isn't that you can't use them, its that they get converted into hundreds of individual tweens. That takes up a lot more JavaScript space, and it will be the most demanding tween possible.

The same happens with custom Classic tweens. If you have done a classic tween with any default setting, it will perform well. If you have tweaked the curve at all, it then becomes as bad as a motion tween. Your original issue may be because you did custom classic tweens.

Here is an example, first the code needed to tween a complex bounce effect, using a preset:

this.timeline.addTween(cjs.Tween.get(this.instance).to({x:360.7,y:267.75},23,cjs.Ease.bounceIn).wait(1));

Here is a simple tween across the stage, but where I altered the curve a tiny amount:

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:90.9284,y:74.5229},0).wait(1).to({x:102.9619,y:83.1421},0).wait(1).to({x:114.8734,y:91.6738},0).wait(1).to({x:126.6851,y:100.1341},0).wait(1).to({x:138.4186,y:108.5384},0).wait(1).to({x:150.0951,y:116.9018},0).wait(1).to({x:161.7355,y:125.2393},0).wait(1).to({x:173.3603,y:133.5658},0).wait(1).to({x:184.9903,y:141.8959},0).wait(1).to({x:196.646,y:150.2444},0).wait(1).to({x:208.3481,y:158.6262},0).wait(1).to({x:220.1177,y:167.0563},0).wait(1).to({x:231.9761,y:175.55},0).wait(1).to({x:243.9452,y:184.123},0).wait(1).to({x:256.0475,y:192.7914},0).wait(1).to({x:268.3064,y:201.572},0).wait(1).to({x:280.7459,y:210.4819},0).wait(1).to({x:293.3915,y:219.5395},0).wait(1).to({x:306.2697,y:228.7636},0).wait(1).to({x:319.4087,y:238.1746},0).wait(1).to({x:332.8384,y:247.7938},0).wait(1).to({x:346.5907,y:257.6441},0).wait(1).to({x:360.7,y:267.75},0).wait(1));

 I hope you notice the difference!

[MatthewLally]

Thank you ClayUUID and Colin_Holgate.

I believe you are both right - I no longer think the problem is concurrent movie clips.

Colin, thank you for the 2 code examples.  I definitely notice the difference.

Just to make sure I understand the terminology/concepts:  if I go to the "Motion Presets" tab in Animate there is folder titled "Default Presets".  It contains about 20 presets with titles like: "bounce-in-3D", "bounce-out-3D", "fly-in-blur-bottom", etc.

Are those the 'classic tween with any default setting' that you recommend I use?

I'm happy to do it.  They are wonderful motions, but if they stop an object on the stage where I don't exactly want it to come to rest, and them I move the object where I want it to come to rest, will I be basically doing what you describe in your second code example?  Will moving the resting spot change it from a 'classic tween' with a default setting to a custom classic tween and therefore take up much more JavaScript space as in your second example?

In other words, if I take a simple colored shape and create a classic tween, and them insert a keyframe at the end of the classic tween and move the shape to another point on the stage associated with that ending keyframe - is that considered a "custom tween"?  

Again, thank you for your responses/considerations.