Tuesday, June 28, 2011

Swiffy: convert SWF files to HTML5


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

74 comments:

  1. Great work!

    Any plans for making Swiffy open source?

    ReplyDelete
  2. Why not convert the trend graphs on "What do you love" on-the-fly to HTML5?

    Seems 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?

    ReplyDelete
  3. Another call for putting it up on google code!

    ReplyDelete
  4. Interesting! 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.

    ReplyDelete
  5. I have created blogspot, so you can compare SWF vs. HTML5 on the same page:
    http://codeasi.blogspot.com/2011/06/google-swiffy-zkonvertuje-flash-swf-na.html

    (audio still doesn't support :(

    ReplyDelete
  6. That's amazing. Doesn't seem to support shape tweens, but it's pretty amazing how much it does do.

    Good work!

    ReplyDelete
  7. Is there any API, so the swf files can be sent from web page dynamically and converted to html5 ?

    ReplyDelete
  8. Awesome work! Would love to use it in my own projects. Any plan to release API/Open Source?

    ReplyDelete
  9. Folks,

    This 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.

    ReplyDelete
  10. High marks for use of snake and pong as demos.

    ReplyDelete
  11. Amazing work. Hats off to Pieter, Marcel and other googlers involved. This is an impressive followup to the work Adobe has been doing on Wallaby.

    - 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.

    ReplyDelete
  12. @ 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!

    ReplyDelete
  13. There was a similar project called Gordon. Is there any relationship between that and Swiffy?

    ReplyDelete
  14. This 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.

    ReplyDelete
  15. I 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.

    ReplyDelete
  16. Great work guys! I have a feeling that I am gona love this stuff. Rock n Roll swiffy!

    ReplyDelete
  17. Love it - years of Flash work NOT down the drain xx

    ReplyDelete
  18. The generated code doesn't look pretty.
    512 Kb filesize limit.
    AS3 not supported-will it ever?

    Nice alternative to Wallaby though.

    Looking forward to next versions :-)

    ReplyDelete
  19. "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."
    Great new cross-platform-HTML5-world.....

    ReplyDelete
  20. 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:
    http://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

    ReplyDelete
  21. Hi,

    It 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?

    ReplyDelete
  22. Also, I think the ad servers would need to get involved to ensure click tracking, page impression monitoring etc... awesome nonetheless

    ReplyDelete
  23. Held 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.

    Having said all that, I LOVE the concept, and hope future iterations bring life back to Flash-retarded devices.

    ReplyDelete
  24. Same experience. Nice work and keep on charging.

    ReplyDelete
  25. Seems 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.

    ReplyDelete
  26. Hi 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!

    ReplyDelete
  27. Hi,

    I 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?

    ReplyDelete
  28. It works just fine in FIREFOX too and has a few errors in IE9.

    ReplyDelete
  29. Amazing work. This is just fantastic.

    ReplyDelete
  30. Sweet. Yall should release it as a jar and call it Jiffy.

    ReplyDelete
  31. Wow, 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.

    ReplyDelete
  32. will it work on an ipad with safari

    ReplyDelete
  33. adobes walaby does this
    http://labs.adobe.com/technologies/wallaby/

    ReplyDelete
  34. Guys, 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.

    I 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/

    ReplyDelete
  35. Google swiffy is a project in development phase.
    It can not convert newer flash to html5 accurately.
    Check Out the link
    http://www.techrefined.com/progamming/prognews/google-swiffy/

    ReplyDelete
  36. As of today, you can upload files of up to 1024 KB. Thanks for trying Swiffy!

    ReplyDelete
  37. In 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/

    ReplyDelete
  38. Would be cool to have something like this that could work in real-time on devices like Apple iPad which don't support Flash!

    ReplyDelete
  39. That really a great work,i think swiffy brings a new dimension into the world of animation and flash content

    ReplyDelete
  40. The converted file does not show images in Firefox :(..that's so disappointing..

    ReplyDelete
  41. With the announcement of Google Labs closing, will Swiffy be moved to a beta placement or the plug being pulled.

    ReplyDelete
  42. the converted file doesn't show up the buttons in firefox :(

    ReplyDelete
  43. This is Great
    I 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

    ReplyDelete
  44. We've just added support for shape tweening and drop shadow, blur and glow filters. See the release notes for more info.

    ReplyDelete
  45. Anyone 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!

    I 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...

    ReplyDelete
  46. ant: feel free to send us a link to that file using the feedback page; images should work in Firefox 5.

    ReplyDelete
  47. 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?

    ReplyDelete
  48. find convert SWF files to HTML5

    ReplyDelete
  49. Now you just need to mix in various parts of Jangaroo (AS3 compiler, and their BitmapData Canvas renderer). http://www.jangaroo.net/home/

    ReplyDelete
  50. Now you can write Webpages in Adobe Flash and turn it into HTML5!

    ReplyDelete
  51. Can i covert to video swf files? is it working fine?

    ReplyDelete
  52. Just tried it and works wonderfully, congratulations!

    ReplyDelete
  53. this is my best xmass gift for this xmass!!!

    ReplyDelete
  54. can anybody tel me how i can embed 2 swiffy converted files in to 2 separate div tags in a html file??? its killing me!!!

    as i embed both files in two two different divs a single swiffy file repeats in both divs.

    please help :(

    ReplyDelete
  55. 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?

    thanks

    ReplyDelete
    Replies
    1. you have to use..

      < 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

      Delete
  56. great. mm well.. i wanna see html5 converted source code.

    ReplyDelete
  57. IE7, IE8 is not showing the converted file. chrome and firefox does. Showing error in runtime.js script. pls help

    ReplyDelete
  58. If 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.

    ReplyDelete
  59. Thank 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.

    ReplyDelete
  60. I 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...

    ReplyDelete
  61. Many thanks! just a few minor problems with some of my animations, but at least I can share them with my students now.

    ReplyDelete
  62. dragstart nd end not supported...

    ReplyDelete
  63. YES! Thank you! I love you so much! I'm so psyched to try this out!

    ReplyDelete
  64. I don’t think Flash is the one that requires a lot of computing power, it’s the fact of decompressing and decoding a very complex data in real time called “Digital Video”, Flash makes transparent the hardware calls implementation for the developers, with swf to html5 converter you will need to deal with conversion of flash to html5 players by rendering a lot of hardware engines, then multi-platform apps will be a true headache for the developers, the same problem than always: HTML hacks for each browser but with a more complex technology: HTML5

    ReplyDelete
  65. Great 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.

    Is this going to be available soon - or does anyone have a solution - any advice is welcome!

    ReplyDelete
  66. 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)

    With 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

    ReplyDelete