June 24, 2011

Adobe's New Design Tool Edge Uses Web Standards to Animate Web Pages

Moving beyond Flash, Adobe (News - Alert) Systems is previewing a new design tool, code named Edge, for enabling designers to create smooth motion and transitions on Web page elements utilizing the latest Web standards like HTML/HTML5, JavaScript and CSS (News - Alert).

According to Adobe, the highlights include visually creating motion content with an easy timeline-based interface, creating new compositions from scratch, importing and energizing Web graphics or adding motion to existing CSS-based HTML layouts, and reliability.

Adobe said that the tool provides an easy to use graphical interface to create standards-based animation with ease and precision. In fact, a report in Cnet News says that Adobe’s new tool automates programming that otherwise would require more technical knowledge of HTML5, the next-generation version of Hypertext Markup Language now under development, and CSS, the Cascading Style Sheets standard for formatting.  

With it, said Adobe, designers can drop images or Scalable Vector Graphics (SVG) elements onto a canvas that's connected to an animation timeline. Animations can be built by dragging those elements around or manually editing properties, and those animation actions can be copied, pasted, and scaled as needs change, added Adobe.

Thus, using JavaScript actions can be linked to the structure of the Web page, so for example different sections of a Web page can be set to fade in at different times to give a "pre-roll" effect.

Adobe said Edge works well other Web design tools, letting such pre-roll effects to be added after other designers or web programmers create web page layouts and elements.

In an Adobe Edge demo on YouTube (News - Alert), product manager Doug Winnie said, "The underlying HTML and CSS code is untouched, which allows for designers working as animators in Edge to collaborate seamlessly with web producers or web designers working in HTML or CSS."

Well, Adobe is not alone in this race. Other major rival working on similar solutions include Microsoft (News - Alert). Meanwhile, Adobe is getting more serious about working with designers. Consequently, it has announced Adobe HTML5 camp next month.

Ashok Bindra is a veteran writer and editor with more than 25 years of editorial experience covering RF/wireless technologies, semiconductors and power electronics. To read more of his articles, please visit his columnist page.

Edited by Carrie Schmelkin


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More