Flash in the pan
design
by Ben Jackson | December 2nd, 2015

Flash is dead. Ok we get it, Flash began it's slow death several years ago, and now even its authors Adobe have finally admitted as much in an official blog posted yesterday.

Whilst Flash Professional will still continue to exist, it’s being renamed to ‘Animate CC’ with a focus on creating HTML5 content over Flash - however, unlike many, I miss the old and much bemoaned plugin, and here's why...

Steve Jobs effectively killed Flash in one fell swoop by announcing that iOS devices would never support it. In many ways he was right to do this, Flash was never really designed with low power, touch devices in mind. It was never particularly optimised for the Mac platform and most importantly, it was a self-enclosed, proprietary plug-in – and the web in general has been moving away from required plugins for a while.

However, when Steve Jobs announced that HTML5 was the future, that future was still a while off. Whilst we're now able to replicate many of the functions Flash could do back then within HTML5, its support is still limited and rendering capabilities are still prone to extreme slowdown on older desktops and newer mobiles/tablets.

Many of the things Flash was capable of are now supported reasonably well via HTML5 or other means. But most importantly, at least for me, is that with just a little coding practice, Flash offered a very powerful tool for designers to create interactive and dynamic animations and even web applications. Surprisingly, despite the death of Flash being announced years ago, there are still no real equivalent tools for creating a similar level of interactive HTML5 aimed at the designer. Sure, I could go and learn a heap of Javascript, but that only takes me so far.

Adobe's latest version of Flash Pro (aka 'Animate CC') offers an HTML5 export feature, but I never really bought into the update from AS2 to AS3 (it was a case of too much change, too late in the game). It also doesn't really offer the complete HTML5 solution everyone had hoped for (but who knows, maybe future versions will improve this offering). To counter this, Adobe have been working on 'Edge Animate' for quite a while. It's shaping up to be an interesting, responsive friendly HTML5 animation tool - but it's still very limited compared to it's fully scripted Flash cousin and better used for static animations.

Of course, when you're working on a 'proper' modern web project, the best idea is to simply create the visuals and hand-over to your talented front-end development team who will implement it all and solve any cross-browser / cross-device issues there may be. This is all well and good, but that takes time and, more importantly, when it comes to more complex animations, or dynamic scripting, a Photoshop visual just doesn't cut it - and often a client wants to see it in action before signing it off.

So, when a website we're currently working on required a little dynamic, non-repeating animation - how best do we (the designers) approach this? The graphic itself is fairly simple. The client wanted a map to show animated points on it as if showing 'live' data of big deals and mergers. However, the developers are mid-sprint, and adding to their work-load means re-prioritising other things.

This is where the aging Flash still proves useful. Firstly, it allows me to build a prototype of the animation in a very short time and demonstrate the effect that the client is after. We can also use the Flash version to demonstrate both to the client and the developers how we want it to look and behave. In addition, creating a quick and dirty ‘Flash to HTML5’ conversion via Google's Swiffy offers a workable HTML5 prototype that can be used until the final piece is recreated.

Ever since the responsive design revolution, Photoshop visuals have been lacking when it came to really visualising how the site would look and more importantly behave. With more complex and dynamic animations now gradually starting to become the norm, we designers need more powerful tools to take static visuals and demonstrate how the end result will work. Asking clients to use their imagination is all very well, but asking them to sign off on something they haven't seen yet can be a bit of a risk.

Tools such as Adobe Edge Animate, Edge Reflow, Muse and it's challengers such as Sketch and Macaw (and Adobe's up-coming Project Comet) are gradually moving away from the creation of static, pixel-based images to represent a living, breathing website. Yes, we still hand these over to the front-end team to create it properly (I doubt there will ever be a great design focussed tool that also creates perfect code - no matter what Macaw claims).

Whilst Flash definitely belongs in the past, until there's a perfect alternative for prototyping aimed at designers, Flash does still have its uses.

 

Design and prototyping tools to check out:

 

» Adobe Creative Cloud including: Edge Animate, Edge Reflow, Muse and the new ‘Animate CC’
» Sketch - modern, vector based web-design tool
» Macaw - web design tool that (apparently) creates useable code too
» Invision - simple online app prototyping tool
» Pixate - Google's new app prototyping tool
» Project Comet - coming 2016, Adobe's answer to Sketch, new responsive web design tool

Inspired?

If we’ve inspired you to think of your needs from a business perspective, we’d love to work with you.

get in touch