Adobe Edge 12 months on

Adobe Edge interface with tutorial file open

Timelines, tweening, transitions, keyframes, symbols, vector drawing tools. That's a world I left behind around ten years ago now, when I moved from the world of Flash animation and movies to the emerging field of standards based design.

Before standards emerged as a viable platform I, like many other web designers, used Flash to deliver visually rich content that would work reliably across platforms. That was pretty much the only way you could do it back then. Rather than messing about with Netscape Navigator and Internet Explorer compatibility issues, and their respect JavaScript implementations (I still have a book on VBScript that's currently helping to prop up a shelf), you could develop something using Flash's elegant user interface and, with the help of the Flash Player, produce very nice stuff that would work and look the same on all browsers.

Flash and its enemies

I moved away from Flash when the web design community was diverging along two paths. One way was to continue to develop rich interactive applications using Flash's ever evolving functionality. This was age of Flash-only immersive multimedia sites. The other way - the narrow, virtuous path, I thought - was to embrace web standards, which in 2002 finally became a credible platform. With Internet Explorer 5 and 6 it finally became possible to separate content and presentation, to use semantic markup for structure, and CSS for style. Browser inconsistency made it frustrating as hell, but there was a glimmering light at the end of the tunnel, websites as God had intended: semantic, search engine friendly, fast loading, accessible, editable through simple content management systems, with site-wide design adjustments possible by changing a single line in a CSS file.

I'm glad I chose the web standards path. Even then it seemed inevitable that web standards would eventually win. And lo, a decade on, excluded from iOS, Flash is dying as a mainstream web design app (I know that it will continue to be useful for complex online apps, adverts and games).

I know some designers in the standards community hated Flash for its lack of accessibility and the many 'skip intro' design crimes perpetrated in its name. But, liberal bleeding heart that I am, I've retained a soft spot for it. I've fond memories of Flash 2, 3 and 4 hitting my doormat, and attending early developer conferences. It was exciting to see it advance from a simple animation tool to - supercharged with ActionScript - an exceptionally capable design platform.

Flash recidivus

So I was intrigued when Adobe announced its spiritual successor, Adobe Edge, last August. The first preview releases of Edge looked an awful lot like early Flash: an app for simple online animations, with a timeline, basic drawing tools, the facility to import objects from Illustrator and Photoshop, and the option to script interactive behaviour using a library of snippets or custom code.

The crucial difference is that Edge's native format is HTML. All the elements, motion and interactivity in an Edge 'movie' are built from the DOM, JavaScript and CSS. No need for a Flash-type player.

There's a great piece in this month's .net magazine by Karl Hodge that summarises the development of Edge over the past 12 months. As Karl says it's 'shaping up to be much more than just a web motion and animation tool. The closer we get to the official launch date, the more Adobe Edge looks like a full blown HTML IDE … like Flash for HTML5.'

I've downloaded the preview and, when time allows, am working through Edge's tutorials and example files. I'm rather enjoying a bit of time travel: it's like 1999 all over again, but without the same vague sense of guilt that pervaded experimentation with Flash. That felt (and was) a little but naughty because Flash disregarded the vision of open standards that inspired the emergence of the web. Edge is a tool that uses honest-to-goodness HTML for its effects. I can see myself using it a lot for the kinds of things I used Flash for, including:

  • Simple animation
  • Slideshows
  • Infographics
  • Zoomable maps
  • Animated text

Adobe Edge timeline

Concrete examples of what Edge can usefully do are still rather spartan. There's a small Showcase on the Edge website, and an interesting photography portfolio site by Patrick Williams. There are some discreet Edge generated animations on Fast Company's iPad edition. If you're interested it's worth having a look at the Edge's website's Resources section for tutorials and FAQs.

So, early days. But I think this could emerge as Adobe's most successful new product for some time, opening up the emerging world of complex HTML motion graphics to designers as well as developers. For a contrary opinion, and an interesting thread about the app's possible merits, see Paul Boag's post Adobe Edge: Wrong technology, wrong job.

PS: I'm aware that there are interesting tools that promise to develop into alternatives to Edge such as Tumult Hype and Mugeda. I've focused on Edge here for brevity, and the Flash backstory, but I certainly hope we'll see a healthy marketplace for these HTML motion tools.

Categories: