Skip to Navigation

Swiffy your Flash to HTML5 without CS6

by Karina

in Blog, HTML5 & CSS3

White Knight

My inbox is full of newsletters from Adobe. Creative Suite 6 packages are shipping, Creative Cloud has arrived, and the Messiah is riding to town on his donkey … All this could be yours if your tech-fund hasn’t been depleted by, say, a recent forced upgrade to 5.5.

One of the new features in Flash 6 is the HTML5 converter. If you’re a Flash developer, you might be feeling a certain amount of chill aimed at your hard-earned expertise. With HTML5 the coolest kid on the block, we are no longer the apple of our step-parent Adobe’s eye. Don’t get me wrong, there are still great uses for Flash, which leverage its awesomeness in ways the new kid can only dream about (shameless plugs: Yeats  and TimeTwister). But for everyday web design, we must make like the Borg and adapt. One way is to leverage our Flash know-how for HTML5 development.

If you’ve upgraded and used the converter, feel free to leave a comment about your experience. On the other hand, you may have your own reasons not to upgrade just yet. Guess we’ll have to wait to convert our Flash animations … or do we? Google Swiffy to the rescue!

Well, mostly. You won’t be able to export an entire website, a sophisticated game or RIA application, or anything that relies on ActionScript 3. This knight in shining armour is less Sir Lancelot of the Round Table and more of an Alice in Wonderland White Knight.

Released in June 2011, Google Swiffy is a free service that allows you to export .swf files to SVG format using a JSON object (basically, JavaScript). It currently supports a subset of SWF 8 and ActionScript 2 features and, with the release of CS6, I doubt they will bother to add AS3 support. You can see a table of supporting browsers and features here, including a list of all the supported AS2 properties and methods.

So what can you do with it? Swiffy Gallery has examples of converted animations and even simple games. I used the tool to convert my animated logo at the top of the page, and the iframe below holds a Swiffied example of my old logo animation (or click on the Swiffy Tree link here for an unmodified source file):

Google provides two ways to convert your movies: the online tool for uploading swf files and an extension for Flash CS4 and higher. I find the extension more useful, because you can use it during development and receive some error feedback if you try to use unsupported or partially supported features.

If you try to export an existing movie, chances are you will run into an error. Planning is the key. For best results, start developing your animation with Swiffy in mind and test often on various browsers. Unlike Flash, SVG doesn’t seem to be platform-agnostic, even for supporting browsers. For example, filters are not supported by (Mobile) Safari, some fonts may look terrible on Chrome, and I noticed that the Symphony example works only partially on IE9.

If you weren’t detered by the above, here’s how to use the extension:

  1. Download and install with Extension Manager
  2. Create or chose a Flash animation (Flash 8, AS2)
  3.  Select “Export as HTML5 (Swiffy)” from the Commands menu
  4. This creates an html file in the same directory as your fla file. Typically, the file opens automatically in the browser
  5. Note that the background colour is set to the stage colour, but you can locate and simply remove the “backgroundColor” property to make it transparent
  6. For best practice, transfer some of the generated JavaScript to its own file. There are three script declarations in total: the first calls up the Swiffy library (remotely, but you can download the script locally as well); the second generates the Swiffy object; the third creates a new swiffy.Stage() object and writes the code into a div with a “swiffycontainer” id.
  7. For more best practice, error-proof your JavaScript by testing for feature support. I used Modernizr in my WordPress theme, so my error proofing code for the site logo looks like this:

if (Modernizr.svg && swiffy) {
swiffyobject = { ... }
....
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
if (stage) stage.start();

The final step is to create a fallback. Depending on your animation and its role on your site, your fallback could be an html img tag, a CSS background-image property (check out Modernizr for .no-js and .no-svg classes), and best of all – how ever did you guess? – Flash.

If you have used Swiffy and have helpful tips, warnings, or examples, you are welcome to leave a comment.

33 responses to “Swiffy your Flash to HTML5 without CS6”

  1. Failing to export most of the time.
    I keep getting the ff:

    Swiffy Flash Extension for Mac v1.0.15
    [-32099]: Backend Error
    Error invoking the Swiffy webservice.

    Im using Flash CS6 , LION OS

  2. Hi Henslo,
    I’m using Flash CS5.5 on Windows, so can’t tell if there is a problem with your system settings.
    Two things you can try:
    1. Try to export your swf directly from the Swiffy website
    2. Check if you have unsupported ActionScript (try a bare-bones swf with no code for starters).

    If neither works, it’s possible that there is a problem either with your connection or with the Swiffy service itself.

    Karina

  3. Hi Karina,

    Do you know if it’s possible to combine two html5-files which are converted by Swiffy (same flash-file, two different parts of the timeline) or where I can find information about it?

    Hope you can help me.

    Erwin

    1. Hi Erwin,

      I think your best bet is to combine the two in one swiffy export. You can use some ActionScript commands, so it should be simple enough to jump to that part of the timeline with gotoandplay();

      Cheers,
      Karina

  4. Interesting article Karina 🙂

    I’m running Flash CS4 but the extension manager won’t let me install Swiffy. Keeps saying it requires Flash 10 when I’m already running 11. I can’t imagine I’d have to go back to 10? Any ideas on a fix?

    Thanks

  5. Hi Simon,

    I haven’t installed it with CS4, so maybe it’s a bug associated with the earlier version. You shouldn’t need to downgrade your Flash version to use an extension! If you’re still having this problem, try to use the online converter on Google’s Swiffy site.

  6. Thanks for the pointer Karina. I’ll have a play with that re smaller SWFs. Shame it caps uploads to 1Mb.

  7. Though it did a few things well, swiffy doesn’t support some extremely important Flash methods…such as this trinity of everyday Flash essentials excerpted from a long list of ‘errors:’

    The ActionScript class LoadVars is not supported. (32 occurrences)
    The ActionScript function loadMovie() is not supported. (23 occurrences)
    The ActionScript function unloadMovie() is not supported. (13 occurrences)

    don’t expect swiffy it to convert even a modestly serious site if it can’t do these things.

    1. Hi d4v!d,
      As I said in the blog, you should’t expect it to convert or replace any kind of website or application. What this is good for is to rapidly create an animation or small interactivity widget to enhance a html/css website. On this site, I used it for the logo animation at the top left.

      Karina

  8. Hi.

    I have an swiffy object, but it does not work in internet explorer 8, because the compatibility with swiffy is from internet e. 9 and up.

    So,m what do you suggest me to do?

    1. Hi Sterling,
      It really depends on what your object is designed to do and which browsers you wish to support. If you have another look at the end of my blog post, you will see that I suggest a way to check for browser compatibility with Modernizr. Or you could use IE conditionals, if you only care about IE8 and lower.

      Then you create a fallback – an image, a flash object (the same flash movie that you converted to Swiffy), some html – whatever works for you.

      Karina

  9. The extension manager won’t let me install Swiffy either and I am running CS5 with the latest Flash plugin. Has anybody else run into this problem?

  10. Hi, I am trying to remove the stage color (to achieve a transparent background) from my swiffy output.

    I have tried removing the “backgroundColor” (and it’s number) as you suggested , nothing works. Is there somewhere else it is hiding, or is there a number for ‘transparent’.

    Also how do I fallback to an image from the swiffy output.

    My first option on my page is to run the flash file using ‘swfobject’ , then using it’s Alternate Content to run the html5, how do I then fallback to an image.

    Thank you, your page and advice is very much appreciated..
    Bill

  11. Hi Bill,

    I double checked with my own code, and all I did there was simply remove the backgroundColor property. You need to double check your code, possibly clear your cache, and also make sure you don’t have a movieclip sitting in the background.

    Your SwfObject approach sounds like the right way to go about it. For the fallback image, create an inner div or span with an image and a classname or id to target it.
    Then, using Modernizr or other JavaScript tool to detect svg (see blog post above), you can either:
    Switch the image off with JavaScript if Swiffy works, or
    Use Modernizr’s no-js and no-svg html classes to hide it with CSS.

    Hope that helps,
    Karina

  13. Hello Karina. Thank you for your Swiffyy post. It was very useful for me.
    But I still have a large audience using IE 8, so I used a script for charge 2 different pages, one for explorer and one for everything else. So now I have the same animations in Flash and HTML5:


    var browserName=navigator.appName;
    if (browserName=="Microsoft Internet Explorer")
    {
    window.location="home_fla.html";
    }
    else
    {
    window.location="home_h5.html";

    }

  14. Hi Ricardo,
    Thank you for sharing your code. I removed the comment tags because they were hiding it in the html.

    If this works for you, great. But using the browserName is not considered best practices. If you want to use browser sniffing, navigator.userAgent property is slightly more reliable:

    This example uses userAgent and Regular Expressions:
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
    if (ieversion<9)
    document.write("You're using IE8 or below. Does not support Swiffy!");
    }
    }

    But it's generally better to use feature detection instead. Check out the Modernizr project for that.

    Karina

  15. Again i tried the swiffy and trying to removed the background color or make transparent like the original .swf but removing the background color option does nothing but turn the background black?

    I’m newbie on this stuff and very confusing really, also how do you Incorporated the output files (HTML/JS) swiffy HTML back into an exiting website where i trying to replace the flash content in the layer via div tags?

    Do i have to save the older HTML page to something new as well?

    anyway some experienced help would be grate!

    1. Peter,

      I am suffering from the same issue. Removing:
      “backgroundColor”:-65536,
      from the resultant HTML simply leaves a black background. I’ve seen this tip on a number of sites so I wonder if the latest version of Swiffy has broken something in this area. Did you ever solve it?

      best regards

  16. Hi guys,

    All I had to do was remove the backgroundColor property. Of course it’s possible that the latest version broke something, in which case there’s nothing to do but wait for the bug to be fixed. But the simplest explanation would be that you might have introduced a bug by removing too much or not enough code. Little things like commas, colons, etc, can make a big difference.

    Karina

  17. Karina. Thanks for the reply but I’ve discovered that I was right! Change the line:

    at the top of the file to:

    and it works! (the 5.1 was a lucky guess BTW)

    best regards

  18. Hi Andy,

    Thanks for sharing, but the comment editor has stripped your code… Can you post it without any html tags?

  19. Karina,

    Sorry. Let’s try again.

    Change the line:

    at the top of the file to:

    and it works! (the 5.1 was a lucky guess BTW)

    best regards

  20. and again:

    change:

    src=”https://www.gstatic.com/swiffy/v5.2/runtime.js”

    to

    src=”https://www.gstatic.com/swiffy/v5.1/runtime.js”

  21. Karina, Sorry but it turns out that my solution to the transparency problem isn’t really safe and probably won’t work reliably if you have the 5.2 Swiffy exporter installed. However, another solution is available in this Stack Overflow thread.

  22. Can’t install Swiffy, it says I need Flash 10… using CS5. is there a workaround for this? -10 points for Google come on guys lol

  23. Swiffy is a absolute CRAP. It doesn´t allow to download converted files, nothing happens if you want to download it

    1. Sorry it didn’t work for you, but this is a fairly old post and I have no control over what Google decides to do with its code. At this time, you’re probably better off learning how to manipulate SVG with Snap.svg, Raphael.svg, or roll your own code.

    1. Hi Mark, I haven’t used Swiffy in a while, having switched to full HTML5 development. But off the top of my head – have you tried this in different browsers?

Comments are closed.