Animating Ideas with Adobe Edge and HTML5
ProfHacker 2013-06-10
Last month, Adobe announced that they will no longer be “selling” tools like Photoshop, Illustrator, InDesign and After Effects and instead will be offering a “Creative Cloud” software subscription model not unlike what Microsoft is trying with Office 365. Those programs are all among the more powerful accessible platforms out there for building and remixing digital content, although they’ve always been pricey. I rely on a lot of Adobe tools in my workflow already, so I’ve migrated to the subscription model, in part to try out some of the Adobe Edge tools as potential ways to more quickly create web animations and interactive content for my current play with alternative scholarly forms.
Adobe used to be known for animating the web with Flash, a program now so behind-the-times that it’s relegated to the “also included” list of the software package. But Adobe is trying to build its replacements using native web tools that allow animations to work on anything, including Flash-adverse iOS devices. I’ve been playing with one part of this new toolset, Edge Animate. Edge Animate is essentially a timeline-based tool with some very basic drawing tools and good support for importing images and adding JavaScript interactivity to web production. It reminds me of the early versions of Flash: not perfectly user-friendly, but very solid for getting simple animations built quickly. As you can see in the interface below, the coding elements are mostly concealed, and the layout is organized around layers and properties in a way that users of other Adobe products can pick up pretty readily. I had some problems with corrupting my project files when I started adding a lot of layers of text and experimenting with fonts, and some things aren’t supported well yet–to add sound, I needed to import the Edge Commons library. I can see pointing my students towards Edge Animate particularly as a way to build online portfolios of their creative work or to create visual stories, but there will definitely be a learning curve and some bug-fighting along the way.
So is Edge Animate a seamless tool for jumping into web animation? It’s free to try, but in the long-term given how pricey the Adobe package is, the Edge tools are currently more appealing as an added perk. If you or your institution is already investing in the Creative Cloud subscription, it’s worth a look. It’s still a ways from being Flash, but it’s one of many advances towards making platform-neutral web animation and interactivity creation as accessible to newcomers and non-coders as Flash used to be. There’s an update coming soon with the full launch of Creative Cloud that might solve some of its current limitations.
For creating animations without coding, there are several other platforms in the works. Some worth watching are Radi, currently in beta, and Purple, aimed at visual storytelling on Mac and iOS devices. Construct 2 is also worth another look for more game-like applications. The HTML5 Canvas has the potential to be a framework for doing just about anything within a browser, from animation to game-making. But it’s definitely not easy for non-coders, and since it’s still evolving there are lots of choices for libraries to build with, none of which offer a great universal toolset. Among those, I’m partial to KineticJS, which works particularly well for games; Paper.js, which offers some really cool ideas for playing with geometry; and oCanvas, which changes how objects are referenced once they are on the screen, but neither of these are beginner-friendly. Processing.js is a great option if you already know Processing or want to pick up something simpler to get started with coding.
What are your top tools for building interactive web content? Will you or your institution be trying out Adobe’s Creative Cloud? Share your experiences in the comments!