Adobe Edge Animate proves HTML5 is no substitute for Flash

For more than 15 years, professionals wishing to push the web envelope beyond the capabilities of HTML turned to Adobe Flash (or, more recently, Silverlight). Now, though, the future of web browsing is moving to mobile browsers that no longer support these plugins, so what’s the modern alternative?

Without a plugin, the only way to do it is in the browser. Both Adobe and the web design community must follow Steve Jobs’ advice from 2010, when he announced Flash wouldn’t be allowed onto iOS: use open browser standards instead.

As Jobs put it then, “HTML5, the new web standard… lets web developers create advanced graphics, typography, animations and transitions without relying on third-party browser plugins (like Flash)… Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticising Apple for leaving the past behind.”

Put that way it sounds reasonable and straightforward, but Adobe disagreed – no surprise given Flash was its unique selling point, the rich web format that held together its entire Creative Suite (from Premiere Pro through to InDesign), and the basis for its future mobile plans.

It’s back to the drawing board alright, but without any tools

Without Apple’s support, and hence without cross-platform universality, the writing was on the wall, and so the rhetoric and Adobe’s entire business strategy has changed. Flash in the browser is now rarely mentioned, and Adobe has repositioned itself as a champion of next-generation HTML5, taking Jobs’ advice in launching a range of tools designed to set the benchmark for standards-based web creation.

The most significant of these is Adobe Edge Animate, which is designed to create the rich, animated, interactive web experience that previously required Flash. It costs $499, but to encourage take-up Adobe has added it to the apps available through Creative Cloud and has made this first release free – here’s your chance to give your standards-based web projects a professional edge.

Back to the drawing board

So how does Edge Animate compare to Flash? Let’s start with the drawing tools, and you’re in for a shock since there are only three: the Rectangle tool, Rounded Rectangle tool and the Ellipse tool. Flash Professional’s Deco tool for drawing animated fire or vegetation effects is long gone. You don’t even get a Brush, PolyStar or even Pen or Path tools – in fact, you can’t actually draw a straight line unless you fake it with a thin rectangle! It’s back to the drawing board alright, but without any tools.

Edge Animate’s formatting capabilities are no compensation, either. From the Properties pane you can choose flat colours for fill and outline of rectangles or ellipses, set the line width (solid, dashed or dotted), and that’s about it. Special effects? A flat opacity setting and a shadow option, or to really impress you can set a different curvature for each corner of your rectangle.

There are no gradient fills, no textures, no procedural effects, brush outlines, graduated transparency or blend modes. The message is pretty clear that you’re supposed to do any serious artwork externally, so you might expect that Adobe has enabled you to cut and paste vector drawings directly from Illustrator into Edge Animate. You’d be wrong: the only route is via awkward export and import.

Moreover, scalable vector graphic (SVG) images are automatically flattened, so you can’t access their independent elements, which means you’d be better off using JPEG or PNG bitmaps unless you explicitly need resolution-independent scalability. As the help file puts it, “for the time being, it’s safer to use PNG”.

Edge Animate does at least let you add text within the program, although you can edit it only in an awkward little dialog box. Formatting includes control over letter, word and line spacing, as well as paragraph alignment and indent. It also includes size and font – but forget about advanced effects such as fitting text to a curve, or within an irregular shape (not that you can create one anyway). Worse still, don’t expect to simply specify any typeface installed on your PC as you could with Flash – the default is those same old web font families of which we’re all so familiar and heartily sick of (although Adobe’s new Edge Web Fonts service may improve matters here).

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.

There’s another problem, too. Getting your project to appear is one thing, but performance is another. No-one would claim that Flash was perfect, but both player and SWF format were designed from the ground up with one aim: to ensure consistent delivery and smooth playback over the web. With open-standards-based delivery, both renderer and JavaScript implementations are out of Adobe’s hands and depend on widely varying browser implementations. This caveat in the Edge Animate FAQ is significant: “Please note that performance of animations are based on a number of factors, so it is possible to create content with less than optimal performance.”

This is more than just an occasional issue. I loaded Adobe’s Edge Animate showcase example under recent versions of Chrome, Firefox and Internet Explorer, and discovered inconsistent layout (for example, the main strapline overflows onto two lines under Chrome), long load times, occasional executions problems (on one occasion Firefox froze), and generally jerky playback, especially of more complex animations. Surprisingly, IE9 seemed to deliver the best performance, but even this wasn’t as smooth as I’d expect with Flash.

This brave new world Steve Jobs promised is actually a step back 15 years

Let’s take stock. Compared to Flash, Edge Animate’s drawing tools, creative options, animation capabilities, programmability, deployment and performance are awkward, underpowered and inefficient – and that’s ignoring Flash’s extra capabilities for video, Rich Internet Application development, console-quality 3D and so on. Edge’s performance isn’t only embarrassing compared to the cutting edge, but incredibly it offers less creative power than the very first release of Flash. This brave new world Steve Jobs promised is actually a step back 15 years.

So what’s going on? Many will accuse Adobe of failing to deliver, even of sabotage to make Flash look good, but the problem lies with the technology on which Edge Animate is built. HTML was designed as a mark-up language for structuring hypertext content, with all presentational issues deliberately avoided. CSS has improved HTML’s design capabilities immensely but it still isn’t PostScript. Moreover, all usage of CSS, as with SVG, is dependent not only on the browser developers’ varying implementations but on the lowest common denominator of the worst current implementation. If all you have to play with as a universal design platform is the div element and some basic CSS, it isn’t surprising that you’ll end up desperately shuffling PNGs around.

There are reasons to remain positive, however. At least it’s completely clear now that the battle has been conclusively lost: Flash and Silverlight are being driven out of the browser so an open web standard alternative is urgently required. That’s precisely what Edge Animate delivers. Two-and-a-half years after Steve Jobs’ bombshell, we finally have an open-standard alternative that more or less works, more or less universally, and more or less enables HTML to start moving into Flash’s territory.

Yes, we’re at graphical ground zero with HTML5, but this means the only way is up. Things should start looking brighter soon, as IE8 and below are flushed out of the system and it becomes safe for both Adobe and its designers to start deploying SVG and more advanced CSS3 features. With support for vectors, web fonts, richer formatting and transitions, HTML will radically improve as a creative platform. Presumably Edge Animate will take advantage, and PNG bitmaps will take on a supporting rather than starring role.

HTML and Edge Animate should finally catch up with what Flash 4 could deliver in the late 1990s, but that won’t be the end of it. Along with the launch of its Edge tools (including Code and Reflow, which I plan to look at in a future column), Adobe also announced open-standard initiatives aimed at overcoming five limitations of current web design: the inability to deliver magazine-style flowing layouts; irregularly shaped text islands; blend mode effects; geometric transformations in 2D and 3D space; and cinematic effects such as blurs and colour transforms. To fill these holes it’s championing new W3C modules called CSS Regions, CSS Exclusions, CSS Transforms, CSS Compositing and CSS Custom Filters, and working with browser manufacturers to implement them.

This isn’t all. Visit Adobe’s demonstration site and the explanatory video, and you’ll see the company has a roadmap for rebuilding the web’s graphic capabilities starting with HTML’s core div element. CSS and SVG are clearly crucial for this, but eventually canvas will be too.

This HTML5 element allows a browser to write pixels directly to the screen as instructed by JavaScript. Using dedicated libraries such as WebGL it’s even possible to render 3D shaders via the GPU – again something that Edge Animate should be capable of taking advantage of in future, along with video and audio once browser support becomes universal and stable.

How far can all this go? With web vectors, fonts, pixels, multimedia and ever-improving JavaScript performance and support frameworks, can we simply recreate the Flash Player using only these open standards? I doubt it. With Flash and Silverlight, Adobe and Microsoft were able to build dedicated rich design, application and performance capabilities from the ground up by targeting single, tightly controlled players. Trying to graft similar power onto a mark-up language that wasn’t intended for graphic design, in a robust, reliable and efficient fashion across varying browser implementations is asking too much. It may be possible to raise the ceiling for HTML5, but not to break through it.

The loss of Flash and Silverlight placed a cap on the capabilities of the web platform, with the result that the richest experiences are being driven out of the browser and into the app stores. This isn’t necessarily bad news for Flash and Silverlight developers, who are best placed to produce such apps, but inside the browser the only future is HTML. The good news for web designers is that while we have to work with an inferior platform for now, its quality looks set to improve comparatively quickly.

Don’t be too put off by the limitations of this first release of Adobe Edge Animate, because the standards-based web is about to turn into a far richer and more expressive platform, with which designers will still be able to produce stunning work.