My take: HTML5 vs. Flash

April 29th, 2010

Recently the steam has built up to the level where it needs to be set free, so here is my take on the whole HTML5 vs. Flash matter:

HTML5 by itself does not provide scripting or styling

HTML5 is a markup language, markup as in “the collection of tags that describe the specifications of an electronic document, as for formatting”, nothing more. To build anything more useful than a bunch of static text and media you will need to rely on…

CSS and Javascript

That’s right, RELY being the key word here. You might have heard (or experienced) that CSS and Javascript support across browsers is fragmented and broken due to vendor inability to talk with each other and to find a common understanding when defining web standards.

But how bad is it exactly? How does it look when you put it in perspective with a technology like Flash?

Mouse Events

In Flash Player’s Actionscript 3 you have a rich set of mouse events that allow you to distinguish between different states interaction with interface elements. These events allow to create complex user interface elements, nested navigation items, drop-down menus and even multitouch interfaces that work flawlessly. See a full list of supported events here.

In Javascript, you have to check with this compatibility table from QuirksMode.org which looks like a Christmas tree. It’s sad but browser vendors have chosen to implement mouse events so differently that most of the time it’s impossible to get something to work without using tons of compatibility code and sometimes it’s just not possible at all (for example this will never run on Opera).

Consistency

A table of currently supported HTML5 tags can be found here (note the dominating RED color).

Whereas Flash Player 10 supports consistent API through operating systems and devices and is currently deployed on 97% of all internet-enabled computers worldwide (data taken from here)

Clipboard

In Actionscript 3 setting clipboard contents is as easy as calling [as]System.setClipboard(contents)[/as] In Javascript… well since the native clipboard functionality is only supported in Internet Explorer you will have to EMBED A FLASH FILE and use a js-to-flash bridge to set the clipboard:

[js]
function copyIntoClipboard(text) {
var flashId = ‘flashId-HKxmj5′;
/* Replace this with your clipboard.swf location */
var clipboardSWF = ‘http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf’;
if(!document.getElementById(flashId)) {
var div = document.createElement(‘div’);
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = ”;
var content = ‘‘;
document.getElementById(flashId).innerHTML = content;
}
[/js]

Video

Let me quote diveintohtml5.org for this one: “There is no single combination of containers and codecs that works in all HTML5 browsers. To make your video watchable across all of these devices and platforms, you’re going to have to encode your video more than once.”

Hey, thanks but NO THANKS.

I will not go into details on this topic since it was covered many times over before me but currently HTML5 video tag support is fragmented and implementations are slower than Flash due to browser’s inability to leverage hardware acceleration. More information here and here. In other words, it’s a complete mess.

Styling

So here’s a simple example in Actionscript 3, let’s draw a semi-transparent box with rounded corners and and rotate it by 7.5 degrees:
[as]
with(shape.graphics) {
beginFill(0xB4B490,0.6);
drawRoundRect(0,0, 100, 100, 12);
endFill();
}
shape.rotation = 7.5;
[/as]

Makes sense? Sure does.
Now let’s take a look at HTML and CSS code required to achieve exactly the same result:
[html]

[/html]
[css]
#box {
/* Color and Transparency */
background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#99B4B490′,EndColorStr=’#99B4B490′); /* IE6,IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#99B4B490′,EndColorStr=’#99B4B490′)”; /* IE8

/* Dimensions */
width: 100px;
height: 100px;

/* Rounded Corners */
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */

/* Rotation */
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’, M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)”; /* IE8 */
zoom: 1;
}
[/css]

See those values next to filter and -ms-filter? HOW THE HELL should I calculate those matrix values by heart without opening my scientific calculator every time I need to adjust the rotation angle?!

And why do I have to repeat the same statement over and over again for each crappy browser implementation? -moz-o-webkit-ms-gimme-a-break.

And worst of all, why after going through all of this nonsense it still works only on 25% of all browsers?!

[EDIT] By popular demand, here’s how it looks in JS + canvas:
[html]

Alternate text.


[/html]
[js]
var drawingCanvas = document.getElementById(‘drawing’);
if(drawingCanvas.getContext) {
var width = 100;
var height = 100;
var radius = 12;
var x, y = 0;
var ctx = drawingCanvas.getContext(’2d’);

ctx.fillStyle = “rgba(180,180,144,0.6)”;
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.fill();
ctx.rotate(7.5*(Math.PI/180));
}
[/js]

Any better? I thought so… Oh, and if you want this on IE, you have to use a compatibility library.

Licensing

This is a point that gets mentioned over and over again, so let’s see:

  • Wikipedia states that “On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple’s Senior Patent Counsel, Helene Plotka Workman[3], which stated that Apple reserved all intellectual property rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” [4], but left the door open to licensing the patents should the specification be transferred to a standards body with a formal patent policy.”. Today, Canvas is still a copyrighted property of Apple Inc.
  • HTML, JS and CSS parser implementations of most of the browsers are closed source (with few exceptions).

Now on the opposite side we have this:

Still not convinced?

What Else?

Finally, here’s a list of cool functionality that you will miss out on if you choose HTML5, JS and CSS over Flash:

  • Sockets
  • Video and audio streaming
  • Microphone and webcam access
  • Embedded fonts (don’t get me started)
  • Multitouch
  • Native 3D transforms
  • Graphics shaders and other C++ based extensions (Alchemy)
  • DRM

Conclusion

Summing up I would like to say that I like HTML5 *very much* for what it is – a semantic upgrade to HTML4. But please don’t call it something like “Flash Player Killer” because doing so simply does not make sense.

Flash is a superior technology allowing for rich and true cross platform experience and it’s here to stay for a long long time whether you like it or not.

Flame wars commence… If you have a different point of view or want to add something to the discussion, please leave a comment below. You can also send me a shout at @pauliusuza on twitter.

Mediatemple.net DV4.0 Server

44 Responses to “My take: HTML5 vs. Flash”

  1. noj Says:

    Here is my take on HTML5 vs flash.

  2. noj Says:

    Here is my take on HTML5 vs flash. http://codeexplode.com/5-reasons-why-html5-will-still-be-friends-with-flash

  3. DannyT Says:

    Nice post, I really had to force myself to read another HTML5 vs Flash post but I’m glad I did, some useful actual factual points well pitched.

    Now, let me save the naysayers some ink:

    – “rant… processor usage… blah”
    I can max out your cpu with crappy javascript code just as well as some ad agency can with their crappy flash banner.

    – “rant… closed… blah”
    See point in article about cross browser compatibility, implementation of ‘open’ standards hasn’t exactly proved to be all gravy now has it.

    – “yada..blah… bloated… blah”
    See list of functionality supported by Flash Player not in HTML5 above and then qualify your argument.

  4. Adron Says:

    I made a somewhat similar post a while back, because I’m shocked by how many people continue on as if HTML5 (especially just that alone) is somehow some huge step forward. What is worse is when they go on about how it is the best/newest/greatest RIA type platform to build against. I’m sorry, but HTML5 + CSS + Javascript do not a solid RIA platform make.

    Great write up.

  5. Shalom Friss Says:

    Great post! Flash is easily far far superior to HTML/CSS/JS, it’s been clear all along unfortunately most people lack the depth of knowledge relating to these two technologies to realize that. AS3 + MXML should have become standards by now.

  6. Justin Says:

    I’m a 10+ year Flash dev veteran, and feel your pain. I’ve been coding in many different languages through the years, and have kept up on .js as well. I agree that it’s no replacement, and I’m super pissed at Apple for a number of reasons right now, partly due to their attempts to kill Flash. I will say though, that html5 has more than you’re giving credit for, and the graphics drawing example would’ve been more fair if you included code to draw that shape into the canvas object. Socket connections, fonts, video/audio playback are actually all in the spec, regardless of when the browsers will all implement them in a standard way. And this is a huge problem – when will a high enough percentage of the public all be on an html5-capable browser? It seems like that penetration will never catch up to Flash… And besides, the best html5 examples I’ve seen are at least 5 years behind Flash, and will really never catch up. Hopefully Apple decides to support both, so we have the freedom of choice in our development tools.

  7. Mike Kerr Says:

    OMG THANK YOU for outlining this from a technical perspective.

    You forgot to mention OOP. HTML5 is not object oriented programming environment which make it impossible to achieve the same advanced applications you can build with ease in Flash.

    Mike
    theBrokenApple.com

  8. leef Says:

    Well articulated, thanks!

  9. Al Says:

    @Mike Kerr

    HTML5… OOP?
    Think you’re missing the point, HTML5 is a markup language much like MXML. In HTML there is a scripting language, Javascript, that supports OOP. In Flex we have Actionscript for MXML (or if you’re a Flash Developer think Movieclips/Timeline rather than MXML).

  10. Paulius Uza Says:

    Thanks for the comments and RTs!

  11. ATIF Says:

    @AI Javascript is object based language. Action script is Oriented language. Actionscript natively supports . Inheritence,Encapsulation and polymorphism with the use of private,public,static access modifiers etc etc.Javascript dosen’t supports these adavance language constructs.

  12. flashopen Says:

    Here is an update:
    http://blog.gonchuki.com/archives/6-reasons-why-the-html5-vs-flash-debate-is-idiotic/

    Then again, and in my opinion, HTML5 could have been more successful in its ‘competition’ with Flash like 12 years ago. All HTML5 examples I’ve seen are weak and accomplished by Flash4 in 1998/9! It is unreal and stupid to call it Flash-killer. Additionally, the combination of both AS and JS are very useful for specific projects and they should just be best friends.
    @flashopen

  13. Giulian Says:

    Very nice explanation! i don’t want that html5 kill flash because i work with flash, but, if somethng new technology wil replace Flash , it has to be superior than flash, and javascript isn’t superior.

  14. George Profenza Says:

    I have been using Flash for some time(not a great one I admit), and I don’t have enough experience with Javascript in the browser yet. I’ve been using a Javascript APIs in the Flash, Photoshop and Illustrator IDEs and I like the language.
    I like scripting languages because sometimes you need to whip out quick utilities that in time distill to reliable tools. If I were to need a tool to speed up my workflow, but had to spend a lot of time to plan it like a proper app from the start(sketch a few uml diagrams, stub some classes, write it nice and easy), more than likely in a commercial environment this kind of tools would not see the light of day because of time restrictions.

    You bring some good points into this, but to me this looks more like a political choice where the big companies decide to work together or not. I don’t think it’s us developers/designer running the show any way…I see us as makers…and as makers we use tools…which are…well nothing more than tools…so from this point of view it really doesn’t matter that much.

    Yeah…js is piggy back riding flash for cliboard, video or something else…yeah..flash is talking to js via ExternalInterface when it needs to…

    My (digital hippie) opinion is that the more html5/js/css developers interact with flash developers and the other way around the better. There’s plenty to learn from both worlds. Standards…we wait for the ‘big shots’ to come to an agreement…but can’t we come to an agreement between ourselves first and let the change flow through naturally ?

    JSLint was is a one man made standard for example…so there is hope I guess.

    There are cool things on they’re way, where javascript looks ahead, 3d wise(webgl/shaders):
    http://www.ambiera.com/copperlicht/demos.html
    http://www.iquilezles.org/apps/shadertoy/

    Anyway…that would be one idea, but the thing to keep in mind above all, is that we’re ranting about tools, and it makes me wonder how/when did we get so attached by our tools ? Is it our ideas and creativity that has the final say in our work, or is it our tools ?

    Is worth more beeing a flash developer that outdoes all the techniques of javascript developers or the javascript developer striving to outdo what flash does ? Or is it better getting to know both and knowing when to use one and when to use the other, or when to merry them both ?
    Maybe we’ve been so stuck on ‘the web’, that now flash/js are makes us these great developers.

    I think the developers of the future will be more like the developers of the past…as in ready and able to tacle C/C++/Objective-C/whatever…and surely won’t shy away from scripting(js/python/etc.)…all this + the tools have matured…and languages bridge amongst themselves nicely to fit the needs that change.

    Just my 2 pennies

  15. Justin Vincent Says:

    I’m a long time Flash developer and JavaScript developer. 99% of the compatibility stuff you mentions is dealt with by using a library such as jQuery. Just use jQuery to bind mousedown event and it will work on all browsers without issue.

    I’ve developed a very complex app – http://pluggio.com – in jQuery/JavaScript/CSS/HTML and spent about 2 hours total dealing with incompatibility issues (over the past 5 months).

    And of course you can also get jQuery plugins to deal with things like clipboard (that also deals with incompatibility stuff.)

    Just an FYI

  16. Paulius Uza Says:

    @justin, thanks for your input. Yes JQuery is a great library for building rich web apps and it’s a great tool for solving some compatibility issues too – I’m sure that most of the readers here are also well aware of that.

    However what I wanted to stress in the article is that it’s impossible to use JS+CSS without compatibility layers. This really complicates things if you have to build something complex, like a JQuery library itself.

  17. Justin Vincent Says:

    @Paulius – I get you. On another note, the thing I’ve never been able to get over with Flash (and ultimately its the reason why I moved away) is the latency issue. When I click or scroll there’s always small latency no matter how powerful the machine. To me it always feels “slightly” less responsive than native html. It just bugs me. (my personal viewpoint).

  18. Steve Jobs Is Full Of It Says:

    [...] Flash has proved itself capable of advancing beyond what the HTML standards committee has produced, still to this day. Odd, Apple claimed itself as proprietor of the HTML canvas element on March 14 2007. I quote, [...]

  19. Howard Says:

    All good points; but sort of missing the really important issue. We in the Flash community know all of these advantages. What has happened is that Microsoft has developed really strong interface with non-Microsoft developers who simply are unquestioning of MS’s PR which is put out by some really well known MS MVP’s and internal MS bloggers that put out the MS line of HTML5 and Silverlight as being Flash killers. This gets further parroted by unaware non-tech bloggers and blog consolidators without further examination.

    What is needed is for Adobe to get with the PR program and not expect the general population to know about all of the underlying technical benefits of Flash. I’m aware that Adobe doesn’t have the greatest reputation for having a great PR department; but come on; this is really important stuff for them to deal with of they are going to loose the battle by default. This is all about “the horse shoe nail” and the war.

    Publishing the techie stuff if great for those of us that really care about that sort of thing. I’m not sure that there is any advantage for non-Adobe Flash bloggers to just repeat what we already know to be the major advantage of Flash.

    For gosh sakes even Steve Jobs trashes Flash when he knows that it really is not what crashes anything on iPhones, or iPods or iPads. Adobe needs to get some street cred people to come out in the press with support for Flash.

    Just my opinion.

  20. May Says:

    Correct, from a technical point of view Flash is superior. Other things Flash does, but not HTML5, are P2P video, advanced bitmap manipulation, sound manipulation, transparent video, PNGs with JPG compression, precise text metrics …
    Performance is another thing, contrary to popular belief Flash uses significantly less CPU for animations and video. Well, exept on Macs and Linux.

    And I totally agree Adobe evangelists should focus on these things rather than pointless discussions about “open”, or these “Apple screw you” types of rants.

    Just to be fair though, Sockets, Embedded fonts, Multitouch are well possible in HTML5, and your box example would be about the same amount of code with canvas. Libraries like jQuery are standard in JS, it’s a bit unfair to rule them out.

    I think us Flash devs should stop thinking in terms of “us against them”. We are experts in creating experiences. We should be open-minded by definition. There are cases where HTML makes more sense and others where Flash makes more sense. Nobody wants Flash to replace HTML, that’s silly.

    And we should focus on building better Flash pieces:
    - keep an eye on CPU usage
    - quick loading times
    - leave TextFields selectable
    - always add deep-linking via SWFAddress
    - add that extra bit of slickness!

    Cheers, M

  21. Paulius Uza Says:

    @May – thanks for input! I just want to clarify some points:

    - Yes, it is possible to open Sockets with JS. But JS cannot do it by itself and some helper object is required – whether via a Java Applet, an HTML-based user-defined control (OBJECT tag), or an ActiveX Object which may be instantiated directly from JScript (IE only).

    - Embedded fonts in HTML5 are not really possible without conversion into svg outlines readable by JS (see Cufon library http://wiki.github.com/sorccu/cufon/about). The drawbacks of this approach are more than obvious: no selectable text, fonts have to have a license that allow embedding, rebuilding of fonts into 3rd party format and a lot of unnecessary markup.

    - Regarding Multitouch I wanted to point out that Flash Player 10.1 has native out-of-the-box support for gesture recognition (more info http://www.adobe.com/devnet/flash/articles/multitouch_gestures_print.html) whereas JS lacks this functionality and it needs to be emulated with a helper library.

  22. HTML5 vs Flash take 2: what Steve Jobs doesn't want you to know – a pint of javascript (and general web stuff) Says:

    [...] http://uza.lt/blog/2010/04/my-take-html5-vs-flash/ digg_skin = 'compact'; [...]

  23. May Says:

    Don’t want to be nitpicking ;-) but
    - Websockets, part of html5 specs
    - @font-face/.otf, part of CSS3, yes needs a license but lots of free fonts there (including copies of popular classics)
    - multitouch, ok.. I’d just say whenever there’s a JS library available it’s feasible. It’s libraries that made JS mature finally, not the language itself (which didn’t change since ’99). I think we should generally be more appreciative of what these devs do, it’s smart and good work.

    Now little question that *in theory* HTML5 isn’t bad.
    But totally agree, in practice it’ll be tricky, inconvenient, more work, inconsistencies across browsers, inferior performance. Plus this huge legacy of older InternetExplorer versions makes the whole discussion moot anyway, hot air. If you need something fancy for iPhone/Pad build an app.
    But these tech arguments should be really sound, otherwise people might dismiss it as just some biased Flash dudes ranting… ;-)

  24. Eric Gage Says:

    Really great argument, I think a lot of the gossip over HTML “killing flash” is just generated by mac heads (no offense, I’m one myself) who aren’t really deep into the web, but reiterate everything Apple blogs say.

    Also, I was kind of baffled when you listed this as a feature we’d miss out on with flash:

    > DRM

    When is DRM ever a good thing?

  25. links for 2010-04-30 | CISNKY Says:

    [...] My take: HTML5 vs. Flash Very good article comparing HTML5 and Flash in the context of where they stand today. (tags: flash html5) [...]

  26. haineault Says:

    You all remind me those who said Linux would never reach something similar as Windows or Mac OSX in term of usability and conviviality.

    Well, here we are.

    And FYI, the rounded box example you gave is completely absurd. In HTML5 you would use canvas to achieve this with not much more lines than your ActionScript example.

    You’re right when you say HTML5 is not a Flash killer. It’s only one of the building blocks of the *open source* technology that will kill Flash.

    The problem with Flash is not only technical, it’s the proprietary licensing. In my opinion it’s a deal breaker, whatever edge the technology has.

  27. Paulius Uza Says:

    @haineault I’ve updated the post to include canvas + js example, enjoy.

  28. haineault Says:

    @Paulius

    Sure you can take the most difficult way to do it to prove your point, or use some common sense: http://raphaeljs.com/

    There’s something about “building blocks” you didn’t get I guess.

  29. Paulius Uza Says:

    @haineault I actually took the most simple approach that is available out of the box (since there is no native drawRoundRect function).

    But thanks for helping prove my point, that in JS you cannot draw a frigging square without using a 3rd party library.

  30. Paulius Uza Says:

    Just updated the post to include some info regarding licensing.

  31. Thomas Says:

    I wish Adobe would Open Source the Flash Player (w/o the licensed tech like h264 and mp3) so the whole Flash is closed discussion would go away.

  32. haineault Says:

    @Paulius

    > HTML, JS and CSS parser implementations of most of the browsers are closed source (with few exceptions).

    I really don’t see the point here. Open parsers have proven to be superior in many aspects, just think of Webkit, V8, SpiderMonkey .. and they can coexist with closed source parsers specifically because JavaScript, HTML and CSS are open standards.

    Flash does not allow this to happen. It forces browser vendors to use Adobe’s proprietary Flash player. It also means Adobe gets to chose on which platform Flash can or cannot play.

    If Flash was open source it would behave correctly on my Linux machines, just like HTML, CSS and JavaScript.

    I’m not quite fond of Steve Jobs, but I’m damn glad he ditched Flash on his platform for the same reasons I’m telling you that it’s not a good contender for a web *standards*.

    Anyway I’m not there to force you out of your ivory tower, I’m done :)

  33. Paulius Uza Says:

    @haineault One could argue that Flash Player is open source – see Tamarin http://www.mozilla.org/projects/tamarin/

  34. coderkind.com » Blog Archive » Steve Job’s thoughts on Flash Says:

    [...] EDIT: Good replies from Jesse Warden and Uza. [...]

  35. Gadget Newz Says:

    [...] My take: HTML5 vs. Flash [...]

  36. There is no such thing as HTML5 vs. Flash - 1300 grams Says:

    [...] out the styling example in this similarly-themed blog post.  Clients want a product that achieves certain goals.  They care more about getting that product [...]

  37. Ali Tan Ucer Says:

    I think the biggest problem is;

    With HTML5,JS,CSS implementation, you are relying on 3 different technologies and interpretation of different companies/browsers of them.
    (Ok, Apple is trying to eliminate the problem by simply not allowing any browser than Safari on Iphone. The support for other browsers under Iphone is just a scam (now who is more open Apple?????) >> http://blog.tmcnet.com/blog/rich-tehrani/apple/iphone-browsers-reviewed.html )

    But with Flash, you are relying on one technology huge opensource libraries, and great output. I think nothing can beat that.

  38. Flash Forever Says:

    I must admit, i heard some scary stories about HTML5, that flash time is over and that now HTML5 is future. Did not have time to dive deep into and try HTML5, and as flash developer with 10+ years of experience(5 of it in flash games), it wasn’t pleased to read about some HTML5. After reading this post, and especially comments, i relieved a bit. Thanks to author of post.

    I would like to see when someone writes a good flash game in HTML5, than HTML5 will be real treat to flash. And adobe need to freeze dev of flash for that time….

  39. Victor G. Reano Says:

    Hahaha, you’re right. How are you supposed to calculate matrix values? I’m all for eliminating flash from websites, but when it comes to highly interactive stuff, AS3 is just THE powerful flexible language of choice. I don’t think web developers want to spend all this extra time coding unneccessarily, just to eliminate flash entirely.

  40. Blanca Huff Says:

    [...] EDIT: Good replies from Jesse Warden and Uza. [...]

  41. gaga Says:

    very good

  42. MA Web Design Says:

    Boston WebDesign…

    Uza's Blog – Adobe Flash & AIR » My take: HTML5 vs. Flash…

  43. learn Says:

    learn…

    [...]Uza's Blog – Adobe Flash & AIR » My take: HTML5 vs. Flash[...]…

  44. Marketing Says:

    Marketing…

    [...]Uza's Blog – Adobe Flash & AIR » My take: HTML5 vs. Flash[...]…