?
Solved

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

Posted on 2014-03-07
7
Medium Priority
?
444 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39912740
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
ID: 39912755
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
ID: 39914002
Gary, I think that the developer re-made it from scratch in Html5 because he changed some effects...
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39914042
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
ID: 39914049
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
ID: 39914586
> 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
ID: 39914673
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
Suggested Courses

764 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