Swiffy your Flash to HTML5 without CS6

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 currenly supports a subset of SWF 8 and ActionScript 2 features and, with the realase 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.

This creates an html file in the same directory as your fla file. Typically, the file opens automatically in the browser

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

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.

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:

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.

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.

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.

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.

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.

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.

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.

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:

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.

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?

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?

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

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.