Sencha HTML5 Animator

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

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.

2 thoughts on “Sencha HTML5 Animator”

  1. Hi! My name is Luca Candela, I’m the product manager for Sencha Animator and I’m really thankful you for this review. However, there are a few imprecisions in your review that I would like to rectify:

    1. Sencha Animator was created to target specifically mobile browsers that are, at the moment, pretty much all based on WebKit. This doesn’t exclude that in the future we will broaden our compatibility list, but right now that’s the focus.

    2. We have plenty of options for interactivity. See done entirely in Animator.

    3. Sencha Animator is not “coded in QT”. We use QT as a runtime and we use its webkit-based webview, but the software is entirely built with Ext JS, our flagship framework for web applications. It essentially runs in a browser.

    4. Lastly, we started development of Animator long before Adobe Edge was even announced in form of tech preview, so calling it a “clone” seems a bit unfair to me.

    Thank you and keep up the good work!

    1. Luca –

      Glad you liked the coverage- and there will be more in the next few weeks now that Edge preview 3 is out. As for who started first on the path and whats a clone of what I simply was not in a position to find out – so I deferred to the royals of graphics software development, Adobe to make the point on what a high caliber of HTML5 animation product has been produced by two vendors.

      Finally I am very worried about the Webkit issue because Opera, Mozilla and Microsoft [70% of browser users worlwide]. True you can say you are devoted to the mobile platform – but this is an issue that really threatens HTML5 along with Web SQL/Databases, Web Workers, Offline Web and a few other hardcore issues that give truth to Hickson’s prediction that HTML5 will not be standard until 2018-2020. If patent wars are any indication, co-operation in Tech is reaching new lows. The prospect of another 6-7 year hiatus like Microsoft’s no improvements to IE is just a GodAwful prospect.

Comments are closed.

Pin It on Pinterest