Because of its HTML5 output, Ye Editor has been following Adobe’s HTML5 Animation tool, Edge, with two looks at the evolving preview edition. So it was a surprise when Sencha appeared in Mid-September with the first completed HTML5 based tool called Sencha Animator:



The Sencha IDE for Animator

At first glance Sencha Animator appears to be an Adobe Edge clone:

1)Same basic objects and panels – elements, properties, timeline.

2)Same simple drawing tools – dont go to either one to do your basic animation drawings.

3)Same equally capable SmartGuides for dragging and placing objects precisely.

4)Same overflow options: Visiable, Hidden, Scroll, Auto.

5)Same Align, Distribute, Arrange [drag and drop in the timeline list of elements in the case of Sencha] features.

6)Same animation of element/object properties – scale, location, rotation, size, etc.

7)Same easy-to-use Timeline Magnify/Shrink control.

8)Same emphasis on no programming and ease of use for Designers.

9)Both have Preview in IDE or browser.

10)Both have simple, complete HTML file export for ready to run animation.

But of course the two programs differ. Sencha Animator is out now in its first version and on Linux as well as Mac and Windows where as Adobe Edge is available only on Windows and Mac. Edge is still in beta with intro expected in early 2012.

Advantages for Sencha Animator

a)Sencha is available now.

b)Sencha supports gradients, video, and most important linked Scenes now.



d)Sencha provides library function for copy and pasting frequently used objects/elements.

e)Sencha’s Objects/elements can be grouped/nested and the group animated.

e)Sencha’a big downside is that Sencha Animator works only in webkit browsers for now.



Click above to see a simple Sencha Animator example. Use CTL+U to see the underlying code used by Sencha.

c)Sencha uses CSS3 rather than jQuery to do animations.d)Sencha provides library function for copy and pasting frequently used objects/elements.e)Sencha’s Objects/elements can be grouped/nested and the group animated.

Advantages for Adobe Edge

1)More precise control of each object/element’s animation – easings and element event/actions code.

2)Runs in all 5 major browsers now.



4)More versatile copy and paste options for objects/element including placing all the transitions/actions in novel ways.

5)All Objects are contained in Elements panel with color-shading used in the Timeline.

6)Timeline has useful control toggles for Auto-keyframe the Properties and Generate Smooth Transitions

7)Edge goes second and has promised more features for early 2012 final release.



Click above to see a simple Adobe Edge example. Use CTL+U to see the underlying code used by Adobe. 3)Better UI/interface for control and customization of workarea.4)More versatile copy and paste options for objects/element including placing all the transitions/actions in novel ways.5)All Objects are contained in Elements panel with color-shading used in the Timeline.6)Timeline has useful control toggles for Auto-keyframe the Properties and Generate Smooth Transitions7)Edge goes second and has promised more features for early 2012 final release.

Both tools have taken the minimalist approach to drawing and layout. In the case of drawing tools, both have only squares and rounded rectangles/circles for shapes [no lines, stars, n-sided shapes or pen-drawnings]. In addition to this both tools allow images and text blocks to be entered and Sencha adds videos as well. So in either case, Graphic Designers will be creating most of their media assets elsewhere. Sencha Animator costs $199 with a thrty day trial download available here. And no price has yet been set for Adobe Edge but it can be used freely in the beta previews available here.

From a guts of the engine view, the two tools are interesting. Neither tool has used HTML5 Canvas or SVG capabilities. Adobe Edge uses jQuery for almost all of its runtime animation support[hence it runs in all the desktop browsers]. Sencha uses CSS3 animation features plus its own EXTjs JavaScript framework for controling scenes. Sencha implies this gives them an advanatge in the mobile deployment space – but this reviewer was not able to test that.

Finally, Sencha Animator itself is coded in Nokia’s Qt – hence its availability on a number of desktop and tablet platforms. Ye Editor promises to follow up on this as Nokia Qt is making some serious Open Source commitments. But just like Java and Flash, Steve Jobs banished Qt from iOS development [sewing the seeds for iDevices downfall??]. But no question – with Sencha Animator and Adobe Edge, HTML5 animation has taken a decided turn for the better. In sum , you can do serious HTML5 animations right now.