David Nibley, creative director at Rain, guides you through the basics of creating an animation in Adobe Edge and is pleasantly surprised about its ease of use and familiarity of the process
Adobe’s new tool Edge enables you to design animated web content using standards such as HTML5, CSS3 and JavaScript. It’s not just about simple transitions, it’s about filling standards-based animations with detail and personality like never before. It’s about a UI that’s familiar and comfortable for designers and animators. And it’s about new features that actually advance the usability and flexibility of a timeline-based environment. And the obvious bonus: because it uses web standards, your work will perform beautifully on iOS devices.
As a test of Edge’s capabilities, I created an animation in about five hours. You can download the asset files above. Even though Edge is still an early pre-release and lacking many standard features, after the hour it took to round the learning curve I was pleasantly surprised by how easy it was to create a subtle, nuanced animation. There was a sense of familiarity about the process, but many capabilities will also be new to those used to other timeline-based animation tools. I consider many of them to be improvements overall.
This tutorial will cursorily cover how to build this animation. For a more in-depth look at how it’s done, as well as a brief primer on Edge animation that may be helpful before you dive into something more sophisticated like this animation, please review this video tutorial. Keep in mind that the tutorial was based on a previous build of Edge, which had less refined capabilities.
View Demo | View Full Tutorials
