Archive for August, 2011

Adobe Edge Review : The Rise of HTML5

without comments

Adobe’s HTML5 editor has burst on the scene, carefully touted as a powerful complement to Flash by Adobe Fanfolks,  heralded as the end of Flash by everyone else. For the past several years, mobile developers have been encouraging clients to use HTML5 as a replacement for Flash wherever possible, and many of the new creative web projects have been made with HTML5. Ive downloaded Adobe’s Edge preview which focuses on animation. I’ve worked with Flash since version 3. What do I think? In a nutshell, Edge offers an exciting and refreshing approach to web animation that demonstrates incredible potential, once the kinks are ironed out.

After (annoyingly having to) logging in and downloading the Edge software, installation was a breeze. I also took a look at the samples that come with Edge. As soon as I saw the first one, a bouncy Edge logo scene created by a developer called Rain, I knew Flash had some serious competition. These are similar to Flash animations in the early days (anyone remember Gabocorp http://www.thefwa.com/flash10/gabo.html), and we all know how fast those developed into what we have today. It’s not a question of if but when folks – HTML5 as a powerful open spec WILL take over proprietary tech like Flash eventually.

What’s great off the bat about Edge is that it is filling a need in the market. An IDE for HTML5 is something that’s been asked for from the community for a while now (I’m not sure why they didn’t do this earlier, but I have my suspicions…). Everyone who has been creating HTML5 effects and interactivity has done so in the IDE of their choice – Dreamweaver, Notepad, etc….  Now we have a dedicated HTML5 tool becoming available. But I don’t want to pop out of my web program every time i want to add some effects or animation, I want to do it inside the IDE of my choice. So in that light, where does a separate dedicated IDE like Edge fit in? the only way to find out was to try it.

The interface is well done and clean. I’m not a fan of white text on dark backgrounds – I find it harder to read, even if it looks slick, and an intuitive option to change this would be welcome. Right off the bat I realized that it was very similar to embedding a flash movie inside a web page. You’re given a stage and you can set its size, instead of working on a sizeless full web page. Its HTML roots are visible and welcome – you can change the stage size using em units as well as pixels. And the standard CSS options for overflow (hidden, visible, etc) are available as well. It feels like you could easily go into the generated code and change things in a text editor if you had to. The whole thing feels lightweight. This will sound crazy to some but I suspect completely sane to anyone who has worked in depth with a computer – your nervous system almost integrates with any computer you use and when you are deep in code and testing, you can get a sense of where the program is pushing against you or struggling on its own. Here the sense is of working with the software not against it – Adobe is off to a good start.

So, what can you create? Adobe has stated that this version concentrates on animation, so that’s where i started. The timeline is prominently displayed, something many HTML editors tuck away and with good reason. They are rarely used to date, and a bit intimidating. Well, the time to be intimidated by HTML animations is apparently over, with this timeline displayed proudly, as if this were a video editor. It’s quite comforting in fact.

I tried something very simple. I drew a rounded rectangle on the stage. The property inspector  lit up with a ton of beautifully arranged options. Animation was as easy as dragging the scrubber to a new time and changing the box on the stage. That’s it! Tweening is automatic once you set keyframes, which you can do by clicking the keyframe button on the elements timeline. It’s very intuitive and I was easily able to tween the Stage background color, set simply by choosing interactively from a color palette. Basically it feels like working with a version of Flash that outputs to lightweight html. This is a very good thing. Adobe has effectively combined the Dreamweaver and Flash IDEs into something that makes sense.

Getting your work out of Edge is simple enough. There is a preview in browser option – again a sign that we are moving away from the closed ‘test movie’ proprietary player of Flash into more open waters. It’s easy to see that the browser IS the new ‘player’, and I suggest we start thinking of things this way. I imagine this is where Google sought to go when the developed the chrome OS – the browser being the runtime environment for everything.

Then I hit what I think is the best part of the Edge workflow. “How do I save this?” I wondered. “Where is the export button?”. Nope, folks. You just save it as an HTML file. THAT is Edge’s native file. You can open it up elsewhere and play with it, copy/paste, whatever you like. For years I have dreamed of saving flash files as an open set of files I could work with. Flash had introduced an open .xml file format but I found it difficult to work with. Edge does it right.It saves your HTML along with the necessary jQuery javascript files to make it work. What’s nice about this is I can picture Edge developing as the web does. An update could make use of newer versions of jQuery as they arise, or other javascript frameworks. People could write their own and offer them as plugins.

Some things need polish, or if they aren’t thinking about implementing them, they should. Drag and drop of files into the IDE didnt work. Edge instead relies on the outdated import pipeline. Imported images weren’t visible on the stage until the file was tested, and the IDE didn’t quite crash but chugged to an unacceptable  halt with a few video issues several times. These things can be fixed but I hope they make stability and usability a priority from the get go.

A few words about the HTML5 revolution.  I imagine Flash today looks to new developers like Director looked to me when I first started programming. Director seemed powerful but old school, wrapped up in its ways. Flash seemed open, exciting, full of promise. HTML5 seems that way today for a variety of reasons.

HTML5 is open source. this is the biggie. Ive always thought that Flash should have been opened up as a completely open source project and Adobe would concentrate on making the best IDE possible (please no bullshit about how Flash is so open, it isn’t. It’s proprietary). Now Adobe is ending up doing the same thing for HTML5 anyway, a completely open spec that anyone can create with any number of software (even notepad!) and a bit of elbow grease. Unlike Flash Professional, Edge manipulates an open spec rather than containing the actual runtime engine and player within itself. If Adobe had followed this path for Flash, I think Apple and many others would have been much more welcoming of it. People tend to champion open projects in ways that proprietary technology can’t hope to maintain indefinitely.

So what’s missing in HTML5? Two things, and three if you’re a suit. 1 – Sound. Flash has excellent sound capabilities. HTML5 not so much. Many HTML5 projects use flash as their sound engine – in itself it cant do much more than stop/play sounds and not with much precision. 2- power. this is quickly changing with each new browser iteration, and indeed its this increase in javascript engine power that has brought on the html5 renaissance. Javascript and actionscript are so similar there really isn’t much in theory you could do in one and not the other, but flash actionscript still has more raw power than any javascript engine. Basically, once HTML5 browsers have great sound and equivalent (and standardized) power, Flash will have to struggle to keep up. And – for the suits as promised – 3 – DRM style technology. I wondered what the big deal about leaving Flash video for HTML5 video was until I realized it came down to cash, folks. Flash has DRM style technology options whereas HTML5 video does not. And where an artist does not care about DRMing their latest video project, Big Business understandably does. Similarly HTML5 is open and impossible to control. And if Adobe does try to implement some kind of DRM scheme with their HTML5 editor, there will be hell to pay. I’m waiting on the first 2 items and forgetting about the third.

A lot of what you can get out of software depends on what you THINK you can get out of it. This was the power of Flash – artists with little to no programming experience began to see potential in the software and pushed it beyond its animation based roots in fascinating ways. We can see this example with HTML5, which is basically HTML, javascript and CSS – standards that have been around for years. There’s little reason one couldn’t have created more web animations using javascript earlier in the web’s history. Its just that people didn’t think to do it as much because of less, but not no, standardization. Indeed, jQuery is an example of how we have been animating things for years. But now this is all happening under the exciting umbrella term of HTML5. Developers eyes are being opened to the possibilities, and thanks to a push by Apple mobile, being almost forced to test them out. Now the cat’s out of the bag and companies like Adobe are sitting up and taking notice.

One big issue that Adobe is going to have to deal with is that the excitement is for HTML5, not Adobe HTML5. Unlike Flash, Adobe doesn’t own the HTML5 spec. They are going to have to make sure that their software is the best way possible to create HTML5 projects. Edge is going to have to be seductive, sleek, powerful and take into account the desires of it’s users more so than Flash ever did. In this sense Adobe is off to a good start by encouraging talk in their forums and offering Edge for download at such a pre alpha stage in order to get feedback. They have refreshingly  embraced a new paradigm of open source development and made a terrific first attempt at it. But they will have to be careful. In the past Adobe the Corporation has muddled the development of Flash, accused of dropping artists interests for business ones. Adobe will need to carefully walk the fine line between shareholder/corporate interests and those of the artists and programmers who work with it’s tools.  Hopefully they can get it right. So far, so good.

FOLLOW ME:

Protpop Games (PLAY) : http://www.facebook.com/protopopgames
Poplogik Design (WORK) : http://www.facebook.com/poplogik

Written by protopop

August 1st, 2011 at 9:04 pm

Posted in Uncategorized