Adobe Embraces HTML5 with 'Edge': What do You Need to Know?

The public preview of Adobe Edge, the company's new Web motion and interaction design tool, has been released. The new tool will allow designers to bring animated content to Web sites, using HTML5, JavaScript and CSS3.

According to John Cole, creative solutions architect at Adobe, Edge will "bring Flash-like animation" but using HTML5. The purpose behind the new tool is to create a Flash-like development environment for Web animations using HTML5 and CSS3.

Adobe Edge is now available for free download from Adobe's Labs Web site. The company said that Edge will be updated in a regular basis with new functionalities. It also confirmed that the tool will be having more capabilities soon.

What you need to know?

Using this version of Adobe Edge, developers can add rich motion designs to new or existing HTML projects that can be run on devices as well as desktops.

The tool features a timeline editor that helps design animation. Developers can also modify existing HTML files with motion elements, while keeping the integrity of CSS-based HTML layouts intact. Edge uses a separate JavaScript file to store animations, which can distinguish the original HTML from Edge's animation code.

The animated content produced in Edge is expressed in a JavaScript Object Notation (JSON) data structure which preserves the CSS-based layout.

The user interface of Adobe Edge is mainly based on a stage, timeline, and panels for elements and properties, similar to that of After Effects and Flash Professional. Developers can edit animations and control timings on a WebKit-based stage. They can also do it through property adjustments directly on the timeline.

Adobe Edge has made composition easier using basic HTML building blocks, text, and imported web graphics. Developers can make desired changes to objects with the help of a number of transformation and styling options.

iOS and Android compatible

Animations created in Adobe Edge are compatible to both iOS and Android platforms. They also run reliably on WebKit-enabled devices and desktop browsers like Firefox, Chrome, Safari, and Internet Explorer 9.

Supported technologies of Adobe Edge include JavaScript, JSON, HTML/HTML5, CSS, web graphics including SVG, jQuery-based animation framework.