What is Adobe Edge and Who Cares?
Adobe Edge is the latest addition to Adobe’s already wide collection of content creation tools. It uses HTML 5, CSS3, and JavaScript to create motion and interaction for websites. What’s interesting here is that Adobe Edge is designed to generate the type of multimedia experience that users have come to expect from modern websites, but without the required plug-ins like Flash player or Silverlight.
This is just a preview release, which means that the software is still in development. Many of the features that you would expect to have in an Adobe content creation tool are missing. But that’s to be expected in a preview release. Here’s what I found.
Interface
The interface is clean, intuitive, and in line with other Adobe products. It’s similar to After Effects or Premier. Upon first opening the application you get the sense that you are working with a video editor. It has the slick, dark-grey interface and white text that has become prominent in Adobe’s video suite.
There are four basic panels:
- The elements panel: This is similar to the library in Flash. All objects in your project will be listed here.
- The stage: Where you will add objects and layout your project.
- The timeline: Here’s where you will animate and choreograph all the objects in your project.
- The property panel: Lists properties that you can key frame for the selected objects in the timeline.
What do you get?
This preview release is very limited. At the moment, only the animation and some drawing tools are available. Basic image file formats are supported for importing, but are limited to PNG, GIF, JPEG, and SVG. Audio cannot be imported.
Drawing
Right now the drawing tools are pretty slim. There are 4: the selection tool, the rectangle tool, the rounded rectangle tool and the text tool. Edge supports new CSS3 styling options for HTML elements like rounded corners and gradients, although I could not find the gradient fill option anywhere.
Animation
Adding key frames is very intuitive with the auto-key frame mode. It allows you to animate properties as you change them; this reminded me a lot of animating in After Effects. The property panel even contains key frame buttons next to each property for easier key frame generation. Of course, you can turn off the auto-key frame mode and manually insert your key frames if needed. There is a well thought out and robust set of easing equations available, including linear, quarts, elastic and bounce.
Adobe introduces a new key framing tool called the mark. It lets you create key frames at the beginning and end of a selected region simultaneously. The first key frame will hold the original value of the property selected while the second will hold the key frame for the edit you make. Another handy tool is the paste inverted function which lets you paste copied key frames in reverse. Very handy for creating quick animations that are cyclical.
Bugs
Saving your files was a bit buggy. I often found that the first time I saved a project, when reopening it, my last few minutes of work would be deleted. It crashed on me or became unresponsive when trying to undo something several times. I found some problems while animating. Often I simply could not edit a key frame, or the property would not record the value that I had just assigned it. The mark animation tool seemed a little buggy as well. I consistently could not get it to set key frames for just the selected property. It would create key frames on all properties that had already had transitions applied for that object.
Seeing your work
This is where it gets exciting. Adobe Edge saves your project as an HTML file. The files I created worked perfectly in IE, Firefox, Chrome and Safari. Albeit, they were not complex, the idea of needing a plugin to support the animation almost instantly felt wrong. It just works in the browser. This felt right. Currently there is no loop function, so you will have to resort to editing the HTML file to get your animations to loop.
Conclusion
The future of web animation is here. I’m looking forward to checking out the final version of Edge. So far I like it, but it leaves a lot to be desired. There are other similar applications out there that are further developed than Adobe Edge. Here are a few for you to check out if you are interested.
Tumult hype
Sencha Animator
- http://www.sencha.com/
Motion Composer
- http://www.aquafadas.com/en/motioncomposer/videos.php