By Marcel Gordon, Product Manager, Swiffy
Some Google projects really do start from one person hacking around. Last summer, an engineering intern named Pieter Senster joined the mobile advertising team to explore how we could display Flash animations on devices that don’t support Adobe Flash player. Pieter made such great progress that Google hired him full time and formed a team to work on the project. Swiffy was born!
Today we’re making the first version of Swiffy available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari. It’s still an early version, so it won’t convert all Flash content, but it already works well on ads and animations. We have some examples of converted SWF files if you want to see it in action.
Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3. ActionScript 2.0 is also present in the JSON object, and is interpreted in JavaScript in the browser. This representation makes the Swiffy animations almost as compact as the original SWF files.
Swiffy is a great example of how far the web platform has come. Swiffy animations benefit from the recent advancements in JavaScript execution speed and hardware accelerated 2D graphics in the browser. Viva la Web!
Update Sep. 8, 2011: links updated to reflect Swiffy's move out of Labs.
Marcel Gordon is the Product Manager for Swiffy, doing the make-up and carrying the drinks. On the weekends he dresses up as a pirate and takes his hamster for short walks.
Posted by Scott Knaster, Editor
Great work!
ReplyDeleteAny plans for making Swiffy open source?
Why not convert the trend graphs on "What do you love" on-the-fly to HTML5?
ReplyDeleteSeems a bit odd that they're still in Flash, while you launch this. Shouldn't you use this for all your services asap, so that you press the Swiffy developers to make it as small as possible (smaller than the original SWF), to save the most space for future projects?
Another call for putting it up on google code!
ReplyDeleteInteresting! I am going to have a play with some flash banners and see how they get on with this tool. Would be of the scale if you could some how dynamicly call this tool on page load. So in effect detect iphone users and then load in the convertor for viewing.
ReplyDeleteI have created blogspot, so you can compare SWF vs. HTML5 on the same page:
ReplyDeletehttp://codeasi.blogspot.com/2011/06/google-swiffy-zkonvertuje-flash-swf-na.html
(audio still doesn't support :(
Inspiring
ReplyDeleteThat's amazing. Doesn't seem to support shape tweens, but it's pretty amazing how much it does do.
ReplyDeleteGood work!
Is there any API, so the swf files can be sent from web page dynamically and converted to html5 ?
ReplyDeleteAn API would be awesome.
ReplyDeleteAwesome work! Would love to use it in my own projects. Any plan to release API/Open Source?
ReplyDeleteFolks,
ReplyDeleteThis is not the silver bullet for Flash Site owners.
It will NOT convert your flash site into a mobile-friendly HTML5 version.
It will ONLY convert old flash animations and banners made years ago using AS2.
We can help : http://ConvertMyFlash.com
We can FULLY CONVERT your FLASH site into HTML5 ( powered by WordPress )..in just 72hrs.
Enabling your business to be :
+Usable to 5 BILLION Smartphones
+Display on 180 Million iPads+iPhones
+Increase their Search Rankings
+Shareable on Social Sites.
High marks for use of snake and pong as demos.
ReplyDeleteAmazing work. Hats off to Pieter, Marcel and other googlers involved. This is an impressive followup to the work Adobe has been doing on Wallaby.
ReplyDelete- Much improved asset AND animation conversion over Wallaby, both in terms of quality and size.
- VERY Impressive use of compressed JSON to eliminate SVG overhead. SVG as XML is way too bloated to be usable on real world mobile apps.
- Would like to see the backend code released, or an API as well.
Looking forward to the next generation of animation tools and vector graphic formats (JSON-SVG?). Very exciting.
@ arturdesign: the BIG difference is you charge a MINIMUM of $1500, for a quality we only have your word for, while Google do it for FREE - and it's early days; as the blog says, they can do some things now, others they're still working on. Spam 101 - think before you spam, it can bounce back and bite you!
ReplyDeleteThere was a similar project called Gordon. Is there any relationship between that and Swiffy?
ReplyDeleteThis is great news as most of my Flash animations are built with AS2, so hopefully I can convert some of them - pity that it can't convert sound though. I look forward to testing it out.
ReplyDeleteI work for a university that uses Mac and is interested in converting its flash resources to HTML5 (or other formats) because of lack of flash support on ipad/iphone. This tool would really be great if it could also convert audio.
ReplyDeleteGreat work guys! I have a feeling that I am gona love this stuff. Rock n Roll swiffy!
ReplyDeleteLove it - years of Flash work NOT down the drain xx
ReplyDeleteAwesome! Love it!
ReplyDeleteThe generated code doesn't look pretty.
ReplyDelete512 Kb filesize limit.
AS3 not supported-will it ever?
Nice alternative to Wallaby though.
Looking forward to next versions :-)
"Your browser may not display Swiffy's output correctly. You need a Webkit browser such as Chrome or Safari for the gallery and previews to be displayed correctly."
ReplyDeleteGreat new cross-platform-HTML5-world.....
For those of you who are over excited on this "invention" I would like to bring it to your notice that this code has been first hand released by adobe:
ReplyDeletehttp://labs.adobe.com/technologies/wallaby/
Its now that google is trying to monetize it with ads , as with gmail etc: to make money for itself. It will take little effort to credit the original developers at adobe.
Thank you
Hi,
ReplyDeleteIt seems great to use Swiffy , my quesiton is , Can I use Swiffy for my project to play sounds(beep,voice message) on mobile device, instead of using Flash Plugin?
Also, I think the ad servers would need to get involved to ensure click tracking, page impression monitoring etc... awesome nonetheless
ReplyDeleteHeld my breath as I tried about 6 older SWFs. Sadly none of them were perfect. Fonts dropped-out, scenes were ignored, shape tweens didn't work and some must have used AS3.
ReplyDeleteHaving said all that, I LOVE the concept, and hope future iterations bring life back to Flash-retarded devices.
Same experience. Nice work and keep on charging.
ReplyDeleteSeems like a lot of good comments and questions here -- but I don't see any answers from Google. It is a shame Google can't be contacted -- way too secret.
ReplyDeleteHi all. I just wanted to let you know that we do read every comment, but we don't always have more to say. On the questions of open sourcing Swiffy and creating an API, we're glad to see there's interest in both, but nothing to announce. Thanks for all your enthusiasm about Swiffy!
ReplyDeleteHi,
ReplyDeleteI am the author of F2C(swf2Canvas converter) Mac app.
Link:
http://itunes.apple.com/us/app/f2c/id418700584?mt=12&ls=1#
It seems we are trying to do the same thing.
Is there any chance I could work with you guys?
It works just fine in FIREFOX too and has a few errors in IE9.
ReplyDeleteAmazing work. This is just fantastic.
ReplyDeleteSweet. Yall should release it as a jar and call it Jiffy.
ReplyDeleteWow, Flash really is dead isn't it. Businesses like the one above charging $1500 to convert Flash to HTML5? Never thought I'd see the day. It's all good, though.
ReplyDeletewill it work on an ipad with safari
ReplyDeleteadobes walaby does this
ReplyDeletehttp://labs.adobe.com/technologies/wallaby/
without iframes
ReplyDeleteGuys, the only thing that this is effective for is converting Flash animations, with little more than very basic scripting elements. It won't convert any Flash apps with any degree of interactivity. The Swiffy FAQ identifies this, as does this post, but many think of Flash as only a tool for animations, and not as an application development platform.
ReplyDeleteI have a short writeup here that describes the limitations:
http://www.nathanderksen.com/blog/2011/06/29/googles-swiffy-helps-convert-10-year-old-flash-content-to-html5/
Google swiffy is a project in development phase.
ReplyDeleteIt can not convert newer flash to html5 accurately.
Check Out the link
http://www.techrefined.com/progamming/prognews/google-swiffy/
As of today, you can upload files of up to 1024 KB. Thanks for trying Swiffy!
ReplyDeleteNo... Thank U!
ReplyDeleteIn this parade of Universal Praise - I have beg to differ => Swiffy raises more questions than it answers: http://www.thephotofinishes.com/picthat/2011/swiffy-converts-swf-files-to-html5-but-raises-questions/
ReplyDeleteWould be cool to have something like this that could work in real-time on devices like Apple iPad which don't support Flash!
ReplyDeleteThat really a great work,i think swiffy brings a new dimension into the world of animation and flash content
ReplyDeleteThe converted file does not show images in Firefox :(..that's so disappointing..
ReplyDeleteWith the announcement of Google Labs closing, will Swiffy be moved to a beta placement or the plug being pulled.
ReplyDeletethe converted file doesn't show up the buttons in firefox :(
ReplyDeleteThis is Great
ReplyDeleteI tried to convert a file
It showed two error
The #initclip pragma is not supported. (16 occurrences)
Advanced text rendering using continuous stroke modulation is not supported. (1 occurrences)
What does this mean?,please help
Is there a way around this,Thanks in Advanced
We've just added support for shape tweening and drop shadow, blur and glow filters. See the release notes for more info.
ReplyDeleteAnyone here overcome any issues with swiffy and firefox 5? i have a really simple banner style animation saved out as flash5 and AS1, and the images within it refuse to display in firefox 5 when i convert it to HTML5. I was happy to put this down to a new browser support issue until i checked the swiffy gallery and... i see images!
ReplyDeleteI could only get my text to display by breaking it all apart before conversion. The same didn't work for images, i've tried jpg or png. Weird, confused, edging closer to suicidal...
This is great! Thanks! I've converted a .swf file into HTML5 with Swiffy but now how do I place it in the same location on my .html page where the old .swf file was? I've pasted the script code in the heading and the script code in the body in the same place as where the .swf file was, but the animation shows up in a different location on the page. Is there a different way to have it display where I need it to as opposed to how I placed the embedded .swf file?
ReplyDeletefind convert SWF files to HTML5
ReplyDeleteNow you can write Webpages in Adobe Flash and turn it into HTML5!
ReplyDeleteCan i covert to video swf files? is it working fine?
ReplyDeleteJust tried it and works wonderfully, congratulations!
ReplyDeletethanks! more power!
ReplyDeleteGreat work
ReplyDeletethis is my best xmass gift for this xmass!!!
ReplyDeletecan anybody tel me how i can embed 2 swiffy converted files in to 2 separate div tags in a html file??? its killing me!!!
ReplyDeleteas i embed both files in two two different divs a single swiffy file repeats in both divs.
please help :(
I converted my flash file, but when trying to place the converted banner to my existing html page its acting crazy.the positioning is a bit headache. it just go to left hand side of the browser...! any help is welcome?
ReplyDeletethanks
you have to use..
Delete< div id="yourStyle">< script >var stage = new swiffy.Stage(document.getElementById("yourStyle"), swiffyobject);
< script >stage.start();
Then use CSS and html to styl position you div and swiffyobject will apear in the correct position
great. mm well.. i wanna see html5 converted source code.
ReplyDeleteIE7, IE8 is not showing the converted file. chrome and firefox does. Showing error in runtime.js script. pls help
ReplyDeleteIf we can't fix bugs and add features, nor edit the output, this is not useful to us. Just like Wallaby. :( The fact that this is closed-source seems more like a "doubleclick" mindset than a "Google" mindset.
ReplyDeleteThank you! We've tested several swf's and must say, great job! This seems to have lots of potential and will be a valuable tool for developers going into the future.
ReplyDeleteI am impressed by Swiffy and the Flash extension! I have been converting several animations that I made some years ago and was impressed that even the actionscript bits turned out quite well. Is there a way to display the output fullscreen? Fullscreen, vectoranimations make more sense...
ReplyDeleteMany thanks! just a few minor problems with some of my animations, but at least I can share them with my students now.
ReplyDeletedragstart nd end not supported...
ReplyDeleteYES! Thank you! I love you so much! I'm so psyched to try this out!
ReplyDeleteGreat tool - had excellent results in converting flash animations for use in ipad application. But it isn't really practical in the development environment unless there is a published API available for batch converting multiple files.
ReplyDeleteIs this going to be available soon - or does anyone have a solution - any advice is welcome!
Mo matter if you think flash is a better solution or not (Vee Eee and others) it becomes somewhat irrelevant when Adobe does things like dropping all support for flash on Android, and never even tried for IOS. (their iOS support is via having flash media server transcode on the fly, and doesn't support interactive flash etc.. I've not checked the pricing in like 4 years, but flash server used to be something like .25M$ per year for 5 years min just to start, so even that is not a viable solution for any place without millions to burn)
ReplyDeleteWith Adobe turning their backs on something like 95% of the mobile market, moving to HTML5 is really the only solution open to iOS or Android users