Sencha Animator: Revealed!

Posted: January 20, 2013 in Revealed, Sencha Animator
Tags: , , , ,

Hello World,

Well I’ve come to the end of my week long evaluation of Sencha Animator. Overall, I was pleased with what the tool was able to provide. It certainly delivers on what it promises … but no more. During my evaluation period I was able to create an decent prototype of a strategy game I am very fond of – Turn About. It’s based on the old 90’s game called Lights Out. I have created many versions of this game using many different languages including: PowerBuilder, Flash, Flex and Actionscript, Coldfusion, and Javascript. I use it to help me learn a new language or platform and discover its limitations. So first let’s look at the Pros:


It’s a great tool for creating visually compelling animated pages. I will never consider myself a designer but I can do wonders with clip art and photos. Having the ability to simply choose my images, position them on the canvas, and animate them by dragging, dropping, and updating parameters in the IDE was of great benefit. An animated page that took me two hours to construct (struggling with the CSS) took only 15 minutes in Sencha Animator.

It’s very easy for someone with a Flash animation background to pick it up and run with it. I spent years creating applications in Flash using Actionscript. I am very familiar with the timeline in Flash and was pleased to see it implemented in this tool as well.

If you are a designer with CSS experience then it’s easy to enhance your creation with custom CSS. Sencha Animator allows you to add your own CSS to your project. You can also export your project and it will create the HTML, CSS3, and Javasript source files. The resulting CSS is so clean that understanding and modifying the CSS is very easy.

If you are a developer with Javascript experience then it’s easy to extend the page interactions and behaviors with your own Javascript. I found that I needed to extend the functionality of my page beyond what Sencha Animator could provide. Fortunately the tool provides a way add your own Javascript code.

The product support is great with a decent supply of documentation and tutorials. The documentation for Sencha Animator looked complete. There are several tutorials (with source) on the site that will get you started.


It has limited functionality if you are an experienced Flash Developer/Designer. The “animation model” (for lack of a better term) used in Sencha Animator is scene-based. What that means is that your animation is grouped into one or more scenes.

All animation is a given scene is played when the scene is entered. The only way to prevent the scene from playing is by using custom Javascript code.

Although you can specify certain objects in the scene to play more than once there is no way to control the animation thru code. Once you are in a scene I found to easy way to start animating an object at a specified point. I had to write custom Javascript code and CSS to make that happen. But I had to be careful because any subsequent exports will overwrite any custom code I may have included.

Nor are you able to receive notifications during animation (such as a callback when the animation reaches 50%). I found a couple of libraries that helped report the frame state during animation but since the timeline is time-based I found it not to be 100% reliable.


Despite its limitations I am still pleased with Sencha Animator. Although I will never use Animator as a primary development tool (and I don’t think Sencha had that in mind as well) it will serve me well as a secondary development tool. I will certainly take advantage of Animator for any projects that require the placement and/or animation of images and objects. I can then include the resulting code into the larger project.

It also serves as an excellent tool to learn CSS transformations and animations by example which, is how I learn best.


Next up is Tiggzi! Tiggzi is a “Cloud-based HTML5, jQuery Mobile and Hybrid Mobile App Builder”. I took a look at this tool about a year ago when I was first evaluating tools to use for web-based mobile development. At the time I wasn’t impressed with its features and their subscription prices seem quite high for what they were offering (they do have a limited free plan). When I found appMobi (completely free at the time) my decision was made. Now I will come back to do a full TWO WEEK evaluation of Tiggzi. They seemed to have improved their features (including adding Window 8 support).

I will post the game app I created using Sencha Animator (including source) on a later date. I have two Hackathons and a contest that I am preparing for. If you would like for me to send you the game app just comment on this page.

Until Next Time World,


  1. Gostou do nosso post sobre empreendedorismo do dedo?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s