We’ve used Flash to animate logos for years, until Apple refused to support it for its mobile devices. But it ain’t over just yet. Swiffy enables the translation of Flash .SWF files into HTML5, suitable for iPhones and iPads.
I always loved working with Adobe Flash. I found it fairly intuitive, was pretty good at it, and animating logos was a natural extension for The Logo Factory and myself. We did some decent stuff over the years, transitioning static logos designed at the shop into moving versions for websites. Of course, that was before the late Steve Jobs and Apple decreed that the iPhone and then the iPad weren’t going to support Flash at all (they claimed security and battery drain issues) and client interest in Flash animations plummeted overnight.
Consequently, so did mine.
Flash animation requests dried up and despite it still being featured on our site as a service, I haven’t promoted it for a couple of years. While I’ve tinkered with Lightwave and other bloated software, I’ve never been able to master logo animation with them like I did using Flash and other than a few big projects, animation more-or-less fell by the wayside.
Swiffy to the rescue.
Thanks to Google and their Flash conversion tool Swiffy, I may have to rethink my de facto moratorium on Flash. None of this is terribly new (Swiffy’s been around since 2011 and I’ve actually wanted to write this post for a while) but Google has a web-based application called Swiffy that converts Flash animations – specifically .SWF files (ShockWave was the precursor to Flash back in the day when it was owned by Macromedia) to mobile device friendly HTML5. I’m not going to get into the technobabble, suffice to say you can upload .SWF files and Swiffy will automatically crank out some HTML code that runs the same as the source animation, except it works on non-Flash compatible devices. Let’s take a look at a little animation I did using the Putters Wild logo, designed by our studio, and as seen above.
Pretty neat, huh? Not a big deal if you’re reading this on a Flash enabled desktop machine or laptop – the native Flash file would run on that anyway – but it should also be running just fine on your Flash restricted device too. Which is kinda groovy from where I’m sitting.
Caveats & issues.
There are some issues that I ran into. When running Flash animations you can do some funky stuff to keep the movie running smoothly as it loads. Swiffy seems to need ALL the code in the browser so large files may hang for a bit. Does Swiffy convert everything? It’s supposed to, but it doesn’t. There were a few animations I played around with that resulted in nothing but a white screen – granted they were older animations, so there might be some compatibility issues and I might have to rewrite from the original Flash source files. Those are but little kinks that some experimentation should work out. Speaking of how things work, here’s what a small section of the Swiffy code looks like:
Anyone who knows their way around this stuff probably understands what all this means but if you’re not a code monkey, like myself, there’s no real need to figure it out anyway. Simply bring in everything from the Swiffy generated HTML document via an iFrame as I’ve done here. There is a little bit of bloat in file sizes – Swiffy files are supposed to come in at around 17% bigger than their source files though in this instance, the Swiffy file was a lot bigger (170K in HTML as opposed to 40K for the original .SWF file.) I suppose with some mucking about, it should be possible to trim things down (the original fish animation above was developed with Flash playback in mind.) In terms of compatibility with Flash features, Swiffy supports pretty well everything Flash does, with some possible issues with sound:
That’s certainly not a deal-breaker. While I initially loved putting sound effects and music into my Flash animations, I was quick to realize that a) sound loops become annoying after about 1 loop, 2) people don’t like you highjacking their sound system with some crazy electobeat music and c) sound files tend to choke the movie as the sound loads (unless you use a pre-loader to get everything in first.)
Responsive Flash animations.
Flash animations by their nature could be responsive – they’d collapse in size depending on the browser window size – but Swiffy animations aren’t (by default anyway.) To get a Swiffy animation to be mobile friendly we need to tinker a bit with the iFrame code and CSS and the relationship between height and width of the movie. It took me several hours of hacking at code variations, but I finally figured out how to make the movie above collapse proportionally (rather than the window collapsing around it.) It’s actually easy once you figure out the combination of what size to attribute to what. All in all, a hearty thumbs up.
It looks like the reports of Flash’s demise are a little premature. For me anyway.