In case you missed it on Friday, here’s a little Monday morning awesome for you. A week or so ago, Jonas Flint threw down a little web UI challenge, daring the open web to build a button as cool and sexy as his Flash-based button:
Can this be replicated in HTML5? And if so, gracefully? Smoothly? So there you have it. That’s my challenge. If you can, I’ll eat my old flash software disks.
Well, get the hot sauce, a Firefox Beta, and check out our friend Al MacDonald’s response: live demo here, video here.
I know, right? How did he do it, you ask? Just use “View Source” to find out. Firefox 4 is going to be a lot of fun.
18 Comments
Now that’s a WIN. It doesn’t replicate the Flash button’s effect (even though it could), it does something ten times better. Thanks for linking to this.
One of the responses replicates.
Also, the response that exactly replicates probably would work fine in IE6-8 using excanvas.
But the embedded video showing off the power of HTML5 is still Flash?
vimeo supports HTML5 – not sure how it is enabled or detected.
The video in the post is just Flash, conveniently using object-tag fallback to fall back to more Flash. The vimeo.com link just doesn’t work, insisting my Flash is old (though I don’t actually have it installed at all).
Given that even HTML*4* can play videos without Flash, the state of Internet video is quite worrisome.
The real question is, can someone come up with an HTML5 demo that can’t be done in Flash? Also, it’s not just about the possibility, but also the amount of effort required. In general, I’d say Flash development’s ROI is still quite a bit higher. And I’m not sure if that’ll ever change.
Tim, it seems to me that should be pretty easy to do, just because an can’t interact with the page in the same way a can.
In fact, I’ve seen quite a few and demos incorporating CSS that seem like they’d be difficult, if not impossible, to do in Flash.
Aaaargh. Clearly this blog does not do automatic escaping of tags.
“Tim, it seems to me that should be pretty easy to do, just because an can’t interact with the page in the same way a can.”
should read
“Tim, it seems to me that should be pretty easy to do, just because an [object] can’t interact with the page in the same way a [canvas] can.”
“In fact, I’ve seen quite a few [video] and [canvas] demos incorporating CSS that seem like they’d be difficult, if not impossible, to do in Flash.”
(to elaborate, those being demos using rotation, gradients, opacities etc)
Not to mention the fact that when I showed the challenge to several friends, they couldn’t even *see* the initial flash due to either having FlashBlock enabled, or not even having the plugin installed (yes, that was true on one coworker’s machine).
Nemo, sorry, but I don’t think you’re aware of how advanced Flash’s API really is. Most people think YouTube is all Flash is capable of. Someone should port this to HTML5. Granted, it’s not an illustration of the video possibilities, but I’m sure Adobe have those under control.
@Tim: You should take a look at some of the examples on http://www.chromeexperiments.com/
Ryan, that’s just the thing. Name one that doesn’t look like it’s years behind on what Flash can deliver today.
Just to clarify, I’m not a Flash enthusiast. I’m all for open standards and a better Web–just not because it’s the latest craze.
I’d say almost all the WebGL demos I’ve seen are far ahead of what Flash can deliver “today”
In terms of fully 3D worlds and sophisticated GPU shaders. And all integrating into the page and fully stylable (although admittedly if you get too ambitious you are going to cut down on your frame rate
)
And I’m not aware of any Flash demos that actually integrate with the web page for the purpose of styling. I’m not saying this is a limitation of *Flash* I’m saying that’s a limitation of anything that has to run as a little window into the page rather than as a native part of it.
BTW.
Specific examples for webgl are kind of a pain due to the very recent renaming of float/int array syntax.
So, a lot of cool ones are broken.
But here’s some simple ones that do work.
http://www.glge.org/demos/platformdemo/index.htm
http://spidergl.org/example.php?id=11
http://spidergl.org/example.php?id=9
http://spidergl.org/example.php?id=8
(actually all the spidergl and glge ones are darn cool – glge just has more broken arrays)
The WebGL Quake 3 level is neat too.
And here’s a cool one that needs to do a find and replace on its arrays.
http://katalabs.com/demo/gallery/
Anyway, take a simple one like:
http://www.rozengain.com/files/webgl/tunnel/
Try setting
#lesson04-canvas
{
opacity: .75
-moz-transform:matrix(1, -0.2, 0, 1, 0pt, 0pt);
}
#canvasDiv { background-image: -moz-linear-gradient(red,blue); }
And, even better, all the code visible and easily manipulable, all part of the DOM.
Flash was awesome, and there are still things only it (or java applets) can do (camera/microphone for example) but finally the web is getting the capabilities it should have had all along, and it seems silly to keep arguing we should stick w/ little embedded foreign blobs.
Given that the HTML5 version runs at 5 seconds per frame and the Flash version (granted, with a much smaller feature set) runs smoothly, I would have to say the Flash version is much better.
Yes, Flash is known for being a CPU hog. Sadly, most HTML5 demos miss the point and do things even worse – because they all focus on the small group enthusiasts who have fast hardware. Firefox m-c nightly/WinXP(32)/Pentium M 1.3GHz/768MB RAM/onboard Intel 915GM graphics.
HTML5 video capabilities appear better than Flash – which is interesting as many of the “cool” HTML5 demos all appear to involve video. I always thought Flash was a bit clunky as a video player – but surely video is just a very tiny part of the deal, almost irrelevant? By that I mean, if everybody uses HTML5 for video in the future, or everybody uses Flash – it won’t mark the success or failure of either.
WebGL is cool but has a long way to go – will it ever become mainstream? Last time I checked Microsoft have no plans for it in IE and may be implementing their own format, and like it or loath it – that’s a huge chunk of userbase you can’t access until they do. It depends what userbase you are going after. Geeky gamer types are more likely to be a WebGL consumer – but are these not the sort of users that will have the much more powerful/consistent Unity3d plugin installed too? Adobe have recently hinted they are going to add some kind of 3d hardware support in a future version of Flash – we’ll find out next month at a conference. That could be a significant development and be a huge shot in the arm.
As a developer for the mainstream market there’s no point me doing a big project in WebGL or even HTML5 right now until the bulk of the userbase is there. Part of me wants to go back to doing more experimental stuff though for that <10% of geeks that feed off the cool demos. But commercially, Flash is great for "compile once deploy (almost) anywhere". I can reach the greatest number of users and have a smaller dev team because I don't have to allocate resources to sorting out inconsistencies from one browser/device deployment to the next. I had spent a decade in conventional web development and only went to Flash ironically at a time when the whole HTML5 fuss kicked off with Steve Jobs's slightly eccentric rant. Compared to old DHTML/HTML4/Javascript/Ajax Flash is a revelation in terms of producing bug free code that runs pretty much exactly the same regardless of browser or OS. Making changes to cater for a particular browser was always very demoralising.
Whatever happens, as developers and consumers exciting times are ahead, and I'm sure this battle will just run and run and – most likely – end in stalemate.
I might add (and surprised nobody else has picked this up) that creating a simple button – barely any more sophisticated than those awful Java navigation buttons from a decade ago – and challenging somebody to beat it was never going to end well.
WRT webgl acceptance.
Consider something like Google Wave – now, admittedly the *idea* was not one that was too successful, was kind of a fuzzy thing that finally got stripped down and turned into a real-time collaboration tool.
But, they did require you run Chrome/Safari/Firefox – basically cutting out half the US browser market.
Anyone on the other side of that divide, they recommended chromeframe.
And yes, gamers I would say are much more likely to not be running IE, I hardly have figures for it, but I expect it won’t be 70%.
And anyone who doesn’t have a modern web browser, well, adding one is pretty trivial if your game is cool enough.
I’m not too worried about webgl. Unlike, say, webm, webgl kinda sells itself due to the unique capabilities it offers.