HTML5 IDE Roundup

By Dan Mall

Standards-based animation has grown leaps and bounds over the last year, but responsibility for it still lives in the land of the developer. Let’s be honest: syntactically, CSS transitions are more than a bit intimidating for the code-conservative designer. Having the experience we have in motion design, we’ve created an incredibly flexible system for designers to animate and developers to simultaneously create and refine functionality. However, this system is largely tailored to a workflow built around Adobe Flash, a tool we love because it doesn’t restrict us to working in a particular way.

As the execution of our work varies, we’re continually searching for other tools that allow the same flexibility within a set of different technologies. Here are our findings from our still-in-progress search for an HTML5 IDE.

(For the sake of semantics, let’s be clear here: there’s either technically no such thing as an “HTML5 IDE,” or it already exists in software like Dreamweaver or Flux. What I really mean is a tool that helps to create CSS- or JavaScript-based animations using a GUI to manipulate keyframes, preferably with a timeline. But that’s a mouthful. That’s what she said. “HTML5 IDE” it is.)

Criteria

Though there’s a lot to be desired in a GUI for CSS or JavaScript, the most important thing we evaluated was ease of animation. (We could have evaluated quality of code outputted, formats support, and a host of other things, but we’ll leave that for another time.)

For our test, we looked at Sencha AnimatorRadiWallaby, and few other related options.

Sencha Animator

Opening Sencha Animator for the first time was comforting, as the interface looks somewhat similar to Flash. The app also starts with a tutorial built right into the interface, so getting up and running was a breeze. Modifying CSS properties over time was pretty simple too, due to the thoroughness of the inspectors.

My biggest complaints about Sencha Animator:

  1. I believe the interface is built in as a website (probably with Sencha’s own Ext JS framework), and sometimes dragging within the UI actually selects the UI instead of manipulating objects within it.
  2. I couldn’t find anyplace where assets were stored (like Flash’s library), which would make reusing them much easier.
  3. There’s no multiple file import, so assets have to be imported one at a time. This makes importing things like an image sequence a completely laborious and manual process.

 

Sencha actually released the first beta a few days ago that I haven’t played with yet, so it’s quite possible that these things are fixed. I’ll be eager to see what David Kaneda and team have up their sleeves.

Radi
HTML5_05172011-180x180

Radi seemed a bit complex from the start. After toying with it for a bit, the most solid conclusion I came to was that it’s sort of like After Effects, but specifically designed to output HTML5 content (<canvas>, <video>, etc). Seems pretty cool, but probably doesn’t have an audience with people like me.

Wallaby

Though not an IDE, Adobe’s Wallaby experiment does a pretty decent job of converting a FLA into HTML, CSS, and JavaScript. The only caveat was a warning after testing that read, “Unsupported feature: Dynamic Masks are not supported…” Masking is a huge help when animating, and an animation tool that doesn’t have masking capabilities is severely lacking. All things considered though, not a bad conversion at all.

Miscellaneous

In related news, here are some options that don’t quite meet the conditions of this test, but are interesting nonetheless…

  • Last year, a few of us from Big Spaceship were fortunate to attend an invite-only workshop to learn about iAd Producer, a new tool from Apple to create ads with HTML5, CSS3, and JavaScript. Though designed specifically to output iAds, the easy Keynote-like motion controls make me wonder whether a sister tool to create web content is in the works. If so, it’s definitely one to watch.
  • Edit Room is a browser-based visual CSS animation designer that has some great features in it. It’s still an early release, so you can’t do crucial things (like saving the HTML and CSS from what you create), but there are some pretty smart interactions that I’d love to see in software like Flash and After Effects.
  • Maqetta is a browser-based tool designed to easily create UI.
  • Ceaser is tailored for those that already hand-code CSS animations. Taking Robert Penner’s wonderful easing equations, Ceaser gives you a visual way to animate and generates well-formatted CSS for you to use. We love this and have already started using it.
  • We don’t know much about Animatable, other than the fact that Andy Clarke announced it at An Event Apart Boston. There’s a little video demo on the landing page that teases the app by showing how it was used for the Madmanimation demo. It’s certainly one to keep a close eye on, especially for the crew that’s working on it.
  • At last year’s MAX, our friends at Adobe showed a preview of the Edge Prototype tool for HTML5. This looks awesome. Rumor has it… I’ve already said too much.
The Verdict

While all these apps have great qualities, only a few come close to the level of quality we’d like to continue creating great experiences. Most of that is due to the fact that these solutions are still in early stages, so we’re looking forward to seeing the progress in each of them. We’ll continue our search, but if you’ve found anything worthy, we’d love to hear about it!

What's Next?

Try & Try Again – Why Prototyping…

Inviting Clients to Join Our Team