Further experiments with HTML 5 and Flash.
Flash is a great tool for creating animations. It is usable on most browsers and most platforms and creates compact files which are easy to place on a web page. The problem is that they are not Web Standard compliant and they don't work on the growing iPhone and iPad market. Instead, the Elders of the Internet recommend that we use HTML 5 animation. This would be all well and good but the HTML 5 standard isn't yet complete, different browsers use different techniques so you need separate code for each browser you want to display with. On top of that the tools for creating animation with HTML 5 are just not up to the job. Enter Google with its new tool Swiffy. Swiffy takes a flash file (an .swf file, pronounced 'swiff'- hence the name Swiffy) and converts it into an HTML file. This means that I can use Flash to create animations then convert them and display as appropriate. The downside - there is always a downside - is that the HTML files don't display in some browsers. To that end I have done a bit of work setting up a way of displaying either a flash file or an HTML file depending on which browser you, the viewer, are using.
In the animation below you should see, first of all, the name of the browser that you are using, under that it will say either HTML 5 if you are using Google Chrome or Safari or Flash if you are using anything else.
Below that should be the animation. Please could you let me know via comments if this is working. (Preferably with browser name and operating system, Windows, Linux, Mac etc) Fingers crossed that this might be the solution that I have been looking for!
Using Flash
Rate this post:
Flash is a great tool for creating animations. It is usable on most browsers and most platforms and creates compact files which are easy to place on a web page. The problem is that they are not Web Standard compliant and they don't work on the growing iPhone and iPad market. Instead, the Elders of the Internet recommend that we use HTML 5 animation. This would be all well and good but the HTML 5 standard isn't yet complete, different browsers use different techniques so you need separate code for each browser you want to display with. On top of that the tools for creating animation with HTML 5 are just not up to the job. Enter Google with its new tool Swiffy. Swiffy takes a flash file (an .swf file, pronounced 'swiff'- hence the name Swiffy) and converts it into an HTML file. This means that I can use Flash to create animations then convert them and display as appropriate. The downside - there is always a downside - is that the HTML files don't display in some browsers. To that end I have done a bit of work setting up a way of displaying either a flash file or an HTML file depending on which browser you, the viewer, are using.
In the animation below you should see, first of all, the name of the browser that you are using, under that it will say either HTML 5 if you are using Google Chrome or Safari or Flash if you are using anything else.
Below that should be the animation. Please could you let me know via comments if this is working. (Preferably with browser name and operating system, Windows, Linux, Mac etc) Fingers crossed that this might be the solution that I have been looking for!
Using Flash
Text
Keep up to date: Receive the latest blog post by email
Rate this post:
- ‹ previous
- 569 of 799
- next ›
Comments
machina eX
works fine on macos 10.5 in firefox 5.0
although i would like to see more people just say no to apple as long as they block flash on their Ipads and pods...
robives
Indeed - that would be much easier in the long run!
clintfern
WinXP using -
Chrome 12.0.742 etc - HTML5
Safari - HTML 5
Firefox 5.0 - Flash :(
Opera 11.5 - Flash :(
Are you using http://www.modernizr.com/ for the browser sniffing?
Darren Griffin
Working fine here under OS X Lion and Safari.
robives
@clintfern: What do you see in Firefox and Opera? I've written a small Drupal module for Browser sniffing - thanks for pointing out modernizr though - looks good!
Smelter
Looks fine here Rob
WinXP Pro SP3, IE8, Flash V10,3,181,26.
Deal
Working fine on my computer. Windows 7, Internet Explorer, Flash
Looksa like maybe you've "got it."
JayHavvic
Rob:
Looks like you have nailed it. Looks good on:
Win Vista Service pack 2
FireFox: 5.0- Flash
Chrome: 12.0.742.112 - HTML5
Safari: 5.0.5 - HTML5
iPhone 3G, 3, Safari, HTML5
and
PortableApps (running off an USB drive)
FireFox portable, : 3.6.18 - Flash
all working with animation and color.
The HTML line look way better than the flash. Especially clear on the iPhone. Look like lines no jaggies.
maxlrainer
Hi Rob,
works fine on windows vista, sp 2 and Firefox 5.0 - Flash and IE 7 - Flash.
Well done.
clintfern
Firefox 5.0 gives -
Mozilla Firefox
Using Flash
Opera 11.50 gives
Opera
Using Flash
The animation works fine for both, although have to say the HTML5 looks nicer than the flash one.
Have just tested it in IE6 which I keep for testing purposes and it fails, but as IE6 is almost dead, thankfully, I wouldn't worry about it.
carole dwinell
I'm running Mac OS10.5.8 on my MacBook using Safari. The animation works really good.
Carole.
Zrowny
Using Windows XP Home SP3 with Opera 11.5 and It works fine with flash! Congratz on finding a solution that works!
DaveC
IE9, Windows7 (service pack 1), Flash - works well
Mayer Brenner
Looks great now. I'm seeing this message:
Apple Safari
Using HTML 5 ...
followed by the animation, on my configuration with:
Mac OS X 10.6.8
MacBook Pro with Intel Core i7
Safari 5.0.5
Glad you're looking to support non-Flash platforms - no point in getting stranded with a technology heading for marginalization!
SFCohen
Windows 7 + Firefox 5.0 = animation is working. ;-)
[=sfc=]