Archive of TideArt content.

Mon, Aug 1 2011 6:39:04 UTC

Adobe Edge overview

Adobe, the software giant behind Flash and Photoshop, has been slowly transitioning to standards-based HTML5, CSS and JavaScript lately. For artists and animators making web designs, it also means adapting to a new world. Today, Adobe released Adobe Edge Preview 1, the first public version of their new tool. It allows the creation web animations using the latest features of HTML5.

What is Edge?

According to their site, Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3. Basically, it's an easy way to add animated content to a web site without having to rely on Flash or other plugins.

Preview 1 is a 65Megs download, and a very fast install. It does require you to register for a free Adobe account if you don't already have one, but after that the process is very simple. Once installed, you can start it and see that the interface is actually very similar to a simplified animation program.

The timeline

Like any animation software, Edge has a timeline at the bottom of the screen which is where all the changes are tracked. On the left side, you see all the properties of the elements you add to the canvas. So if you draw a rectangle, for example, you can then adjust its opacity, color, size, position, and so on in the properties, and add keyframes on the timeline, and Edge will fill in the rest.

You don't have to rely on just shapes either. You can import text, Scalable Vector Graphics (SVG) or images, and Edge will use the element of HTML5 to display and animate them. The program also provides many easing functions to make the animations look better, such as bouncing or slowing down.

Once you get used to the interface, it's extremely easy to use. Simply position the cursor on the timeline, then modify the canvas as you wish, same as in After Effects or Flash. There are several examples on their site that you can download to see how they work.

The result

The main use of something like Edge is to add a pre-roll animation on a site, such as an animated logo or menu. The code produced by Edge is pure HTML, CSS and JavaScript, although it does create a lot of JavaScript. Edge also takes care to add browser specific statements to make sure the animation looks the same in all popular browsers.


Adobe Edge is an interesting tool for any animator or web designer to take a look at. It's free, and will work for 150 days. Adobe promises several new versions with more features to come. This is still early software and is likely to have bugs in it, but for enthusiasts, it's worth taking a look at.

Give it a try: here

Back to index

© 2007-2019 Patrick Lambert - All resources on this site are provided under the MIT License - You can contact me at: contact@dendory.net