Solved

Look at this Flash vs Html5 version of the same animation.  Is Html5 slower?

Posted on 2014-03-07
7
383 Views
Last Modified: 2014-03-18
I obtained from a Flash developer an animation done in both Flash and Html5:

Flash version:   http://goo.gl/YK0sS6
Html5 version:  http://goo.gl/5hCvDW

On my Android default browser on my Galaxy Note II  (quad-core 1.6Ghz) the Flash version is totally fluid while the Html5 version has a very low framerate.

Are the html5 animations with many objects/layers renownedly slower than Flash or there's something wrong in the Htm5 code?
0
Comment
Question by:lucavilla
  • 4
  • 2
7 Comments
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
Using Chrome on my PC, both seem to play at the same speed. Have you tried multiple platforms for your testing?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
You would be hard pressed to notice a difference.
Is this a flash to canvas conversion?  As it is throwing a lot of styles around.
0
 

Author Comment

by:lucavilla
Comment Utility
Gary, I think that the developer re-made it from scratch in Html5 because he changed some effects...
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
No, looks like he transferred it to Edge and then made the HTML5 version from it.
And however that coded it has made a dogs dinner of it.
I'm sure you managed to get some of the samples from the other question working so you should have been able to see how fluid it should be even with really complicated computations going on.
This is not complicated animations.
I don't know if I could even debug the code to see where the bottleneck is coming from.
(typical bloated Adobe code)

I think the main problem is that Edge isn't using the canvas object but normal HTML elements which is kinda not really HTML5
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Here's an example using just a few lines of css.
http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/#

Repeat this 20, 30 +++ times, wouldn't matter

This is how your 'flash' should be done - it would be ultra smooth and not start hogging memory/cpu like it currently does.

edit
That is not going to work on your IE9 - but at 3% global usage and dropping  you shouldn't be worrying about it
0
 

Author Comment

by:lucavilla
Comment Utility
> Repeat this 20, 30 +++ times, wouldn't matter
How do you know it?

If you look at my html current animation you'll see that it uses 13% (my PC) CPU too, but it's not smooth, it's 10-15fps... while the Flash versions seems 25-30fps at 13-15% CPU too.

Seems like CPU usage in a single Chrome page never goes above 13-15% on my Windows 7, Core i7 PC, like if it were an external limitation...
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Chrome jumps to about 70% cpu and FF to 100% from idle.
Memory on both increase about 200mb

On a dual core - not everyone has an i7 ;o)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now