Adobe Launches HTML5 Web Animations Tool

Adobe launches HTML5 Web Animations Tool. It enables users to create animated content using HTML5, CSS3 and JavaScript without using the flash.

What is Adobe Edge, and what does it do?

Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites using standards like HTML and HTML5, JavaScript and CSS. It is currently in public preview and is designed to be powerful yet approachable and easy to use. Edge Preview is a complimentary download on Adobe Labs.

This is an early look at Edge, for evaluation and feedback that will help shape the features and future roadmap of Edge. Users are also encouraged to submit feature requests and report bugs.

Who should use the Edge Preview?

Edge is ideal for visual, web and interaction designers who want to energize their content for the web with movement and transitions. Edge Preview 1 focuses primarily on animation and motion, with upcoming previews featuring additional creative capabilities and functionality.

Currently the software (Adobe Edge) can be downloaded free and used. Adobe is waiting for the review from the developer.

Features

Feature	Description
Intuitive user Interface	The user interface is based on a stage, timeline, and panels for elements and properties. It’s influenced by our customers’ favorite features and functionality in class-leading tools like After Effects and Flash Professional, but innovates in its ease of use. Animations and timing can be controlled on a WebKit-based stage, or via precise property adjustments directly on the timeline. You can also make quick edits on individual or multiple objects.
Visually author animated content	Create new compositions from scratch using basic HTML building blocks, text, and imported web graphics. Manipulate objects with an array of transformation and styling options which Edge natively applies to our jQuery-based animation framework.
Add motion to existing HTML content	Add motion elements to existing HTML web documents. Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge’s animation code. Edge makes minimal, non-intrusive changes to the HTML code to reference the JavaScript and CSS files it creates.
Import web graphics files	Import existing web graphics such as SVG, JPG, PNG, and GIF files.
Standards-based output	Edge reads and writes HTML, CSS and JavaScript files natively. Animated content produced in Edge is expressed in a JavaScript Object Notation (JSON) data structure that preserves the CSS-based layout. JSON is a formatting style for JavaScript that is easily readable, and allows more flexibility to work with the document and animated content independently.
Reliable content on desktops and devices	Animated content created with Edge is designed and tested to work reliably on the iOS and Android platforms, WebKit-enabled devices, and popular desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9.

Where to Get Adobe Edge

You can download from
http://labs.adobe.com/technologies/edge/