Adobe has a new Edge in its HTML5 tools
Adobe has come a long way in more than three decades as a company, and while a lot of attention lately has been given to security breaches and its subscription model, there is a lot of innovation going on behind the scenes.
Last month, I had the chance to sit down with Sarah Hunt, who works on Adobe Edge tools and services, one of Adobe's newest parts of its multimedia-oriented software. Edge is a collection of HTML5-based tools that help designers and developers work with the web. Competing software that fall into this category includes Tumult's Hype and Sencha Animator.
I have a subscription to Adobe's Creative Cloud, so I also took the chance to take a look at the software myself.
Design
If you're familiar with the current design of Adobe Photoshop, then you will be right at home with the tools in Edge. Everything is laid out in palettes on a dark background. The bulk of your work takes place in Edge Animate, and at first it's a bit overwhelming to have all this information in front of you at once. Coming from Hype, it was a bit jarring to go from a sparse environment to sudden clutter. But, as I explain below, having all this information works for the program.
Adobe Edge Animate also has a template gallery and you can save templates as well.
Use
One of the things I love about Adobe Edge Animate are the tutorials. Upon first launch, you're given the chance to go through a series of step-by-step lessons to help you get comfortable with the software. Even if you're familiar with a competitor's software, it's a fantastic resource. For those new to this sort of work in general, it can be a godsend. There's plenty of books out there covering the same material, but this is all baked into the software. I would love to see similar tutorials come to Photoshop, InDesign and Illustrator - especially Illustrator. The tutorials are very easy and cover creating objects, basic animation, resizing, extending, reuse and motion paths.
Once you're done with a design in Edge Animate, you can take it out to Edge Inspect to test on mobile devices in realtime. You can also bring it to Edge Reflow, which is a responsive design tool or tinker with the code in Edge Code, a commercial version of my favorite open-source code editor, Brackets.
My test project was done through one of the tutorials. Following the steps, I completed a basic keyframe animation of bouncing letters, using the little toggles in the properties panel to control the keyframes. I enjoyed not having to puzzle over a record button or with the timeline for these, which was the steepest part of my learning curve with Hype. I also liked not having to flip through an inspector for other data. I caught on with Edge Animate a lot faster than I did with Hype, even though my learning curve with it was fairly quick as well. The software titles share enough similarities in basic tasks that if you go into Edge Animate with any knowledge of its competitors or Flash, it won't be hard to use.
To change touch and swipe events, you need to right click on the object and select the action. I really wish there was an additional panel for this. One of Hype's features that I loved was the ability to see what browsers and devices your project was compatible with while you're working on it, something I would love to see here.
Hunt acknowledged that the Edge tools does encourage people to do some coding. But, if you're familiar with timelines, there's a lot you can do with Edge.
As a former print designer, Edge is built in such as way that I didn't feel intimated by using those skills to create a web product. While there is some coding involved, features such as motion paths are nearly impossible to hand-code and are best served by products such as this. Hunt said that the developers wanted to make people be as creative as possible, with as much UI help as possible.
"Do you have three hours?" Hunt asked when I asked what was in the works. "There's so many things that we want to do." One of the active projects is introducing audio storytelling to Adobe Edge Animate. Other planned features include integration with InDesign and expanding it to chart-building, article linking, ePub3 support and other features such as drawing, tweening and video.
Conclusion
The Adobe Edge tools and services are part of an Adobe Creative Cloud subscription, and if you have this subscription, then take advantage of it. The Edge tools are extremely easy-to-use, and there is a lot of positive creative energy and excitement coming from its development team. As working with interactive and responsive design becomes more prevalent, these HTML5-based tools are going to become far more important than my beloved InDesign.
If you want to try the Adobe Edge tools, there's a trial available on Adobe's wesbite. A monthly subscription is $49.99 and has access to all of Adobe's software. You can subscribe to just Adobe Edge Animate for $19.99 a month.
