Adobe Edge HTML5 Animation Tool
Adobe has just made two significant announcements this week on its support for HTML5. First, there is the new HTML5 tutorial and evangelism site, The expressive Web, which is chock full of examples of HTML5 +CSS3 code with comments, links, and Complimentary resources – see here for a review. Next, Adobe Labs has released a UI tools developing animations in HTML5 – and Adobe Edge is a very solid basic animation tool. Clearly Edge is not in the same league as the Flash/Flex/Air and its versatile cross platform and online/offline capabilities. But Edge does show Adobe’s determination to become a first rank cross-platform tool provider – which is no small deal in a development world confronting an OS Mess and ever more proprietary offerings from Amazon, Apple, EMC, Microsoft and Nokia as a Microsoft OS subsidiary.
What Adobe Edge Preview Edition allows developers to do now is create fairly sophisticated motion animations using text, images and rectangular boxes. The Edge developer tools can be downloaded here and is good for free use for 151 days. But by that time two more beta versions of Edge should have emerged[more on this below]. The reason Edge is solid is because it uses the old Adobe GoLive interface. GoLive was Adobe’s competitor to Flash before Adobe bought Macromedia and Flash. GoLive had a much better Timeline interface for creating animations than Flash [a continuing problem, see SwishMax4 for a superior 2D animation tool]. Unfortunately, Adobe decided not to use the superior GoLive interface for Flash animations; but it is now available for Edge and works quite well in creating HTML5 animations.
As noted users can add images, text, and rectangles with reasonable property control like color, sizing, rotation, position, scale, skewing , opacity, etc. These properties can then be changed in the timeline creating a from here-to-there change in say opacity[disappearing text, for example] or position – moving from upper left to lower right on the screen. There are over a dozen method of easing/tweaking the animations. Any number of property settings may be changed in the timeline and any number of times. The result is fairly sophisticated banner ad or slide deck creation tool. Even more interesting is how Edge works:
Actual HTML code just uses calls on the <div> stage to jQuery and CSS and is a <div> mover not Canvas or SVG
Once again we see that HTML5 is really heavily committed to JavaScript [also true of CSS3]. The code was tested in all 5 A-grade browsers [latest editions] and worked without hitch in all, including preserving the CSS-driven rounded corners [many _webkit, _ms, _moz specs]. But just as great in interest is the ambitious plans Adobe has for delivering Edge by 2012. Remember you already have a very usable HTML5 Banner-ad or slidedeck creation tool right now.
Plans for Delivering Adobe Edge HTML5 Development Tool
I am not certain whether Google’s Swiffy Flash to HTML5 translator tool accelerated Adobe’s plans to introduce Edge; but clearly Adobe has ambitious plans for Edge as seen in the slide below:
Edge Development plans
Now ye Editor does not pretend to know what Expressivity means and the extent of the Coding, Interactivity and Graphics clouds could be either wide or narrow moats. See the discussion here for some excellent insights on the design ideas and considerations around Edge. But clearly Adobe is targeting an early 2012 introduction for Edge. This coincides with the more agile development cycle Adobe appears to be adopting. I do not expect any sophisticated forms and data interaction capability and also offline operations will likely have to wait for an Edge 2. But the ability to run in mobiles and browsers is part of Edge’s mandate from the get go.
In sum, it appears Adobe will be intro-ing some preview/beta updates on Edge that will be well worthwhile downloading if the current preview is any indicator. Meanwhile, just below is an example of an Edge Animation in the Das Blinken Lichts style of many years ago:
[iframe src=”http://theopensourcery.ca/edgeanimate.html” width=”600″ height=”400″] Click here to see the animation alone on full screen
Has anybody tried Hippo Animator yet? It’s like adobe edge but it works in all browsers including iPhone and IE6. http://www.hippostudios.co.uk
Thanks for the tip – I will try it and compare it to the new version of Edge. By the way I had no problems in all 5 major browsers [lastest editions] , and Edge animations worked in all 5 even IE9.
That’s cool how did you get on with it? Does edge work in older browsers like IE 6,7,8?
It works in my XP-based IE8, but that is the only back browser test I have done. I keep the 5 major browsers up to date [ I am just loading Firefox 7] but do not keep old browser editions. I was a bit disappointed in this Edge update because I expected more vector drawing capabilities.