Is Sencha Animator a Flash Killer?
Houston, we have a PR problem.
Someone’s gone and graffitied “Flash Killer” over our mobile creation software
I don’t think it’s Sencha‘s fault this software has been mislabelled. Bloggers have been out to lynch Flash ever since they caught sight of webkit’s CSS extensions and Sencha Animator is perfect hype material. But Sencha Animator is not a general web creation behemoth like Flash. It is designed to integrate into the workflow of Sencha’s other products which are primarily for the mobile market. Sencha’s other desktop products have been developed to leverage a HTML5/js web application framework called Ext JS - an 80k javascript library with touch extensions designed to replicate the experience of native apps on iOS and Android. This animation tool doesn’t use the Ext JS library, it’s strictly CSS3 animation only. Many of the transformations are currently available in Chrome and Safari. Yes, headline whores, it’s webkit-only, a Flash Killer this is not!
The animation parts of the Ext JS library were written by David Kaneda - of JQTouch fame. The results are impressive - especially in mobile safari, which has access to accelerated iOS animations through CSS properties. With strong roots in jQuery, Sencha have a stated commitment to web standards. Whether it’s possible to create an authoring tool that adheres to web standards is questionable, and while Adobe are developing plugins that try to bring their web exporter into line, Sencha are taking a more direct approach with their suite of products. I suspect the flexibility of their applications in a desktop environment will be restricted by the glacial standardisation of CSS3, as their javascript-powered tools leap ahead in functionality.
In my office, Sencha Animator’s primary use would be to create engaging alternatives (not equivalents) to flash banners for iOS devices. But these “html5” ads have their problems- so I won’t be using them yet!
Interfacing up to your problems
It’s impossible to review the interface of a visual design tool without comparison to Adobe. For Sencha, it makes commercial sense to develop in a cross platform environment, and their apps aregreat demos of there Ext JS library. Spoiled by their experiences of Creative Studio, designers are hard to please when it comes to interfaces. On the Mac, the application frame, the creaking animation and windowsy design will annoy Cocoa purists. On Windows, the experience is slightly smoother, but still clunky.
The tool attempts to duplicate the default layout of Flash, with a stage, a timeline at the top, collapsible panels down the right. Unlike Adobe’s “workspaces”, these panels aren’t configurable. There weren’t any right-click menus either, so expect a bit of eyeball ping pong as you use Animator.
There’s no contextual properties panel: to change a property of an object on the stage, you need to go hunting. The properties are divided into obvious categories like “Animation”, “Dimensions, Position and Flow”, “borders” etc, so it doesn’t take too long. As more CSS3 properties get added, however, I suspect this right hand column may become unmanageable.
Within these categories, properties correspond to those that you’ll find in a CSS3 stylesheet - each property has it’s own line with a checkbox. This is a bit of a literal way to represent CSS properties- and no easier than reading or editing a stylesheet. Sencha Animator could do with something similar to Illustrator’s appearance panel, which summarise the properties and filters you have applied to an object and allows you to add/remove/edit them independent of the panels.
Custom properties can be hand-coded in a box at the bottom of the column of panels. Some obvious omissions flag up that this is an early release- background gradients, for example.
Timeline
CSS animation does not have a defined frame rate - the animations run at the native refresh rate of the device (or, in the real world, at the maximum rate the processor can handle). On iDevices, animations are accelerated with a custom graphics processor, but accelerated graphics are still experimental in desktop browsers. The ability to artificially suppress the framerate is essential to animation optimisation- making sure your animations don’t get in the way of more important processes or stutter when there’s something else going on. I suspect this issue will eventually need dealing with in the CSS standard.
As a result, the timeline does not have frames. If this tool is ever used for character animation, frame by frame precision will be essential. The time is expressed in seconds, to two decimal places. A keyframe’s handle is a huge blue dot, But the handles snap to others in the timeline. Each object has it’s own row in the timeline- but again, there aren’t enough contextual options to this panel - even renaming the objects has to be done on the right hand side.
To create animations, you set keyframes for objects by double clicking the timeline, and then scoot over to the right hand side again to adjust the properties in the Animation panel You can adjust rotation, position, scale, skew, origin, opacity and set some basic easing.
Confusingly, keyframe animations override any transformation settings you have applied to the object itself, so if you’ve applied properties before adding an animation, you’ll have to do it again. Is this an idiosyncrasy of CSS3, or just the interface?
The stage
There are 5 available components- circles, squares, lines, text boxes and generic containers (for clipping animations).
You need to use the timeline to select objects on the stage. Once selected, you can move objects around the stage by clicking and dragging. There are no “handles” for indicating which object is selected or manipulating the size and rotation of objects on stage. I hope these are planned, along with direct selection of objects on stage as they are essential to a visual workflow. There’s an animation path helper, but this isn’t directly editable and must be also be a stub for future development.
In Flash, the registration point is a vital specification for animated objects. All rotation, scaling happens relative to this point. This point is handled by a css3 property called “origin”. In Sencha Animator, this position can only be set as a percentage of the object’s dimensions, although it can be set as a negative percentage. There’s no graphic representation of the point on stage, so you have to do a certain amount of guessing or maths to get the rotation point right- not something you want from a visual tool!
Objects can be grouped simply by dragging them on top of one another, and animation can be applied to those groups. This is the first time the power of a CSS3 authoring tool becomes apparent- being able to easily coordinate and execute simultaneous animations within groups is what makes visual animation tools useful. It would be nice to be able to group objects into a generic container using a shortcut like ctrl+g, but otherwise this function works well.
Like Flash, the stage extends beyond the frame of the animation. Sencha Animator doesn’t need to compile before you view animation, so you can preview it live on stage. You can hide the objects outside of the frame by clicking an icon.
Output
Pleasingly, exporting the animation produced just a html file with the CSS in the head, and a subfolder with the images. There was no option to produce an external css file, although I’m guessing if you’re producing a self contained CSS animation, this is how you would want it. I ran the html through the experimental validator at http://validator.nu/ - and it passed with flying colours (of course, since there are actually very few html tags to test). However, I noticed a lot more objects in the CSS that were in the stage - Animator unfortunately doesn’t seem to clear the markup of deleted objects, and this is probably a bug. The animations worked well in both safari on the desktop, and on the iphone- although at the time of writing, Chrome’s positional animation was a bit jerky - I think it wasn’t able to position the objects in sub-pixel increments.
Conclusion
Being a developer preview, there are many, many bugs. But even when all these bugs are ironed out, Sencha will still have a lot of work to do identifying how people are using this tool and create interface enhancements and workflows based around their most common tasks.
Sencha Animator is making great headlines as a Flash killer. But headlines is all it’s making. In it’s current form, it isn’t a direct competitor to Flash, and this tool has many painful stages of evolution of it before it can go head to head with Adobe’s bloated mutant design environment. If you’re looking for a weapon to wield in your crusade against Flash, this is a blunt one. It has great potential, but Sencha needs to invest in platform-specific development and the interface before designers and animators will take it seriously. This tool’s future is also heavily dependent on the CSS standard and webkit’s css enhancements, so feature implementation is likely to be inconsistent and fragmented. Nevertheless, I look forward to watching the development of this software, and Adobe’s response.
[9 Nov 2010] This article was corrected after feedback from Sencha. I assumed the program had been written in Java when it’s actually written in Sencha’s own Ext JS library and wrapped in QT Webkit. This is an impressive feat, and shows the maturity of their library..
blog comments powered by Disqus