Archive for August, 2011
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.
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.
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.