Adobe Edge HTML5 Editor Public Beta Released

Adobe just released 'Adobe Edge', a "Flash for HTML5&Prime web design tool into Beta.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. This version of Edge focuses primarily on adding rich motion design to new or […]

Adobe just released 'Adobe Edge', a "Flash for HTML5&Prime web design tool into Beta.

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. This version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

Adobe Edge, the company's pure HTML5 tool that could ultimately do the most damage to the life of Flash on the Web.

  • 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.

"In a timeline interface that looks exactly like Adobe Premiere or After Effects, users can add transitions, animation, or motion to HTML documents using JavaScript, HTML5, and CSS3. Users can import their site, manipulate their graphics (SVG, JPG, PNG or GIF) and apply any of 27 different transformations, and insert the new animations directly into the existent code. It's limited to creating animations right now, but Adobe will be rolling out more features incrementally for a full 1.0 release in 2012. New features to be added to Edge in the coming months will be shapes, expressivity, coding, interactivity, and graphics."

Features details:

FeatureDescription
Intuitive user InterfaceThe 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 contentCreate 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 contentAdd 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 filesImport existing web graphics such as SVG, JPG, PNG, and GIF files.
Standards-based outputEdge 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 devicesAnimated 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.

Watch the videos below for features demonstrations:

More Info:Adobe Edge