Adobe Edge:- Motion and Interaction Design for HTML5

Adobe Edge
Adobe Edge

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.

Edge seems to run on an interface similar to Flash. The familiar timeline and other tools are situation in approximately the same places in Edge as they are in the current version of Flash. Behind the scenes, however, Edge is very different. Instead of Adobe’s ActionScript format, the animations created in Edge are coded in JSON. So rather than actionscript the animation is coded in html and javascript and runs on all modern desktop browsers and most mobile browsers.

Edge Preview Highlights

  • Create new compositions with Edge’s drawing and text tools.
  • Import popular web graphics such as SVG, PNG, JPG or GIF files.
  • Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
  • Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.

The preview version of Edge is available from Adobe’s site, to anyone who has an Adobe ID. This version is really more of a promise than an actual release, however. Features such as compatibility testing with older browsers and support for interactivity are yet to come at this stage. A commercial version of Edge is still months away. Adobe expects to release Edge commercially in 2012.

Adobe Edge Preview Sample Files

Adobe created losts of edge samples. We can download these files. Edge Samples.