Adobe Edge Animate proves HTML5 is no substitute for Flash

Animation is handled via the Timeline panel, by specifying time-based keyframes and changing property values. It’s very different from Flash Professional’s frame-based approach and takes some getting used to, but it’s certainly more modern and, as programs such as After Effects show, can be just as powerful. However, the power of property-based animation clearly depends on the properties on offer, and those are disappointing.

There are other limitations. Without frames you can’t quickly create flick-book-style sequential animations, those “vector videos” with which Flash made its name. Neither can you create advanced effects such as animating along a custom motion path, shape-based tweening, 3D transforms, variable filter-based special effects or bone-based animation. It’s all pretty static for a dedicated animation package.

Older versions of Internet Explorer offer only spotty HTML5 support

So what about interactivity? As you’d expect, this is handled through scripting. To create a button, for example, select a drawn or placed element, then Open Actions and select an event (say click, mouse-over or touch), then enter the desired JavaScript code. To help with this Edge Animate has a range of prefabricated snippets for timeline handling (such as play, stop, playReverse), for managing your symbols and elements (hide, show, setVariable), and for loading a new page/URL. Put these snippets together and it’s relatively straightforward to create simple interactions.

However, comparison with the latest Flash Professional is once again telling. Edge Animate offers only 16 snippets while Flash Professional CS6 offers dozens, but the real difference becomes apparent when you move beyond the pre-supplied samples. With Flash Professional’s ActionScript 3 API you have full drill-down access to all the properties, methods and events of hundreds of classes ranging from Accelerometer through to XMLSocket, plus code IntelliSense and debugging capabilities. With Edge Animate, you’re limited to controlling the capabilities of the browser through JavaScript, without any special coding or debugging support beyond syntax colouring.

Time to publish

Okay, you’ve struggled through and are ready to publish. Using Flash you can generate a single, easy-to-deploy, highly efficient SWF file of less than 10K in size containing all the vectors, bitmaps, text and code, ready for streaming delivery to all supporting platforms and browsers via the Flash player. With Edge Animate your output is a hodgepodge of separate HTML, CSS, JavaScript and asset files, and even the simplest animation requires more than 200K of support code in the form of jQuery and the dedicated animation framework that Adobe built on top of it.

At least Edge Animate offers the sort of universality that Flash no longer can, and your animation should appear as designed on Android, Kindle, BlackBerry and the all-important iOS, thanks to shared reliance on the WebKit layout engine that Edge Animate employs (plus the current most popular desktop browsers – Chrome on Windows and Safari on Mac – are also WebKit-based). But remember that WebKit isn’t the only target, because on the desktop there are Firefox, Opera and Internet Explorer, along with their increasingly important mobile incarnations. Thankfully, the latest version of each offers advanced support for HTML5 so your project should render more or less as expected (but only more or less).

A bigger problem is that not all your site visitors will be using the latest versions and, in particular, older versions of Internet Explorer offer only spotty HTML5 support, while IE8 and earlier can’t render SVG at all. There are probably as many non-HTML5 desktop browsers as there are HTML5-only mobile browsers. There’s a partial workaround thanks to the ability to turbo-charge older IE releases using Google Chrome0 Frame. This just about enables Edge Animate to claim web universality and seize Flash’s crown, but asking visitors to download a plugin to view open content is both awkward and undesirable.