Skip to main content

Adobe Releases Free HTML5 Animation Editor Edge

Adobe has released a preview of its new HTML5 web design tool, Adobe Edge, that allows designers to create animated content for websites, using web standards like HTML5, JavaScript, and CSS3, through a movie editor like interface. The software has been released for free, and Adobe assures that it will remain so in the future.

Adobe Edge was first revealed last October at the annual Adobe Max show in Los Angeles. It's not a replacement for Flash, but it definitely rivals the company's Flash Professional tool when designing interactive content such as web advertisements and widgets. Adobe believes that both these technologies – Flash and HTML – can coexist, and we can only but agree since web standards such as HTML5 aren't yet up to the task.


"What we've been doing for a long time is focusing on our runtime: Flash. And because the HTML5 ecosystem wasn't really moving, we weren't doing a lot there," said Paul Gubbay, Adobe's vice president of engineering, design, and web. "But over the last couple of years, there's been a tidal wave of change [with HTML], and as a result, as we've been listening to customers, we've committed to doing more in the browser."

The company had already incorporated HTML5 tools into Creative Suite 5, and released a full Flash-to-HTML5 conversion tool called Wallaby.

With the Adobe Edge, you can import your existing site and add animations to HTML documents. Users can import standard web graphics, such as SVG, PNG, JPG and GIF files, style them with CSS, and apply up to 27 different transformations. There is also a live preview of the animation created, rendered in real time by an embedded WebKit browser engine. New features to be added to Edge as the project progresses.

Some key features of Adobe Edge:

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

[via The Register]


Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?