Posted on March 29, 2012 by
Spread the word...

In the transition period from Adobe Flash to new technologies, I look at the past, present and future of creating web animations for the masses.

Flash-back into the past (see what I did there!?)

I look over my shoulder (towards our SEO team) in genuine fear when I say this. I. Like. Flash. There I said it. Now, I must explain myself…

I am one of THOSE web designers that are more designer than developer. Although I can hold my own when it comes to the coding side of things, I’m a sucker for a good old fashioned user interface. And Flash has a whole lot of interface to play with.

Don’t get me wrong, the ‘Design’ tab in my Dreamweaver window does have cyber cobwebs in comparison to its ‘Code’ tab counterpart. But when it comes to animation, I’m interface all the way. After all, animation is meant to be visual, isn’t it?

As anyone with basic web knowledge is aware, Flash is feeling the strain. It’s incompatibility with Search Engine Optimisation techniques, along with Apple’s disregard for it on their mobile devices has caused a global rethink into how animation for the web should be carried out. Currently, original animation implementation (not plugins) for the masses is in limbo.

The current state of web animation

So what are we faced with now in 2012? Flash has become a taboo word in the web design industry, and terms like jQuery, CSS3 and  HTML5 are now the talk of the town. Problem solved then? No?

The problem with these technologies at this current time (more specifically CSS3 and HTML5), is compatibility. Although most ‘modern’ browsers support them to an extent (later versions of Firefox, Chrome, Safari and IE9+), the rest of them inevitably don’t. Meaning a huge sector of users relying outdated browsers will miss all the wonders these new technologies have to offer. And as a web designer, it’s our responsibility to ensure everyone sees the website our clients pay for.

And until these old browsers fall off the spectrum of supported programs, then this problem will remain.

JQuery

JQuery is currently the in thing. The simplicity if the Javascript library allows web designers to implement it to elements within their sites – providing them with the ability to carry out basic motion and transitional functions. Plugins (such as nivoslider) are a-plenty, and hugely accessible.

 CSS3

In an animation context – new properties such as transform are great when teamed up with Javascript, as you begin to see the rebirth of movements such as rotation; one that so commonly defaulted to Flash in the past.

HTML5

In an animation context, the HTML5 tag <canvas> opens even more doors to post-flash web animation. Canvas is a tag that allows a block area to be ‘drawn’ into using API’s within Javascript. It is fast, innovative and allows a whole new world of on screen interaction.

So as it stands, it seems that the the most wide used and compatible animation technology is the JQuery library. In the near future though – a mixture of Javascript, CSS3 and HTML5 will surely overtake this.

Us web designers are always obliged to try and stay one step ahead of technology, and we are inevitably encouraged to get to grips with the combination of HTML5, Javascript and CSS3. In theory that sounds easy, in practice a little more difficult. Existing articles on using HTML5, Javascript and CSS3 together go into the depths of animating in this way. And its not pretty. When I see pages of script on how to draw a smiley face, I know for me learning these techniques won’t be commercially viable.

This google search then ensued: “HTML5 software”. And I was presented with Adobe Edge.

Adobe Edge – The future of web animation?

This was it. The interface that I craved. And the interface that the combination of HTML5, Javascript and CSS3 craved.

Adobe Edge (codename) is a ‘preview’ of a software package that deals with ‘Motion and Interaction Design for HTML5′. With a similar, more simplified interface than that of my beloved Flash. Edge uses the same ‘tween’ processes as Flash that now cleverly interprets your animation into a combination of Javascript and CSS3. I tested it, and it did just that.

When I investigated the code of my test (I’m aware that using interface for programming based mediums can spew out some horrible code) – something was missing. That elusive ‘<canvas>’ tag. All of the animation was being outputted as <div> tags. I go back to the software’s title. ’Motion and Interaction Design for HTML5‘?

As I investigated further, I came across this very interesting thread between a concerned user and the Adobe Edge development team, echoing my thoughts: http://forums.adobe.com/thread/884525

In a nutshell, this was Adobe’s response to the matter:

“We started with DIVs because we wanted to get something out there quickly that folks could play with.  I say we “started” there because Edge will be evolving rapidly – the product is by no means feature complete.  We expect to add support for more and more of the HTML universe over time.”

Mark Anders, another Edge developer elaborates:

“We seriously considered Canvas, but current performance on mobile browsers (especially iOS) is very bad.  We didn’t want to have the first experience produce content that couldn’t run acceptably.  Note that this may be changing in iOS 5, so that’s good…

But the big thing to keep in mind is that this is a Preview 1, not a Version 1, and we will be looking to expand support in future releases.”

In layman’s terms: “It’s not ready yet”.

The preview I tested was version 5.1 and there was still no inclusion of the <canvas> tag. Now, I know it isn’t the biggest problem in the world. But Adobe are without a doubt the tour de force of web design software, and there standards will shape the way sites are coded for years to come. So if they don’t get it right, their users won’t either. Did someone say <table>?

And Finally…

The most important thing that will determine web animation in future years is browser compatibility. Unless we don’t have a degree of uniformity in standards, then there will always be grey areas in how to carry out animation for the masses.

I predict an interface will come. And it may be Adobe Edge’s older, more mature brother. But in the meantime, us commercial web designers will stay in limbo. Falling back on our loyal JQuery compadre.

Leave a Comment

Your email address will not be made public or shared. Inappropriate and irrelevant comments will be removed.

  1. Good summary there. Don’t forget about our old (but still useful) friend the Animated GIF! We also are wondering about Adobe Edge and where it will go… in the meantime we still use Flash to Animate but combine it with After Effects in order to render in a non-swf format. I know its not “in the browser” but Flash is still an important part of our workflow.