Sencha Animator 1.1 Now Available

Sencha Animator 1.1 now available. We are excited to announce that the first minor release update for Sencha Animator is now available. In addition to general bug fixes, we’re happy to introduce a few new features and improvements to make working with Animator easier and more productive.

h3. Experimental support for Firefox 7+

Firefox recently introduced support for CSS animations, and we wanted to give our users access to animation on newer Firefox browsers. Animator now exports @-moz@ as well as @-webkit@ animations. If your customers use Firefox 7 and above, they can take advantage of this new Animator capability.

Firefox Support

Sencha Animator 1.1 has support for Firefox CSS3 animations

As we continue to work on support for Firefox, you may notice a few issues (e.g., div elements with gradients applied will fail to render). Improving Firefox support will be one of the areas we will focus on in coming updates.

h3. A new color picker

New Color Picker

Sencha Animator 1.1 features a new color picker

This latest release of Animator makes selecting colors easier and gives users more control. The new color picker features separate hue, saturation, luminosity, and transparency scrollers with integrated preview to fine tune color selections. You can also use RGB values if you prefer to work in the RGB color space. Animator keeps both sets of values up to date seamlessly, so you can switch color spaces as your project demands it.

h3. More workflow improvements

The new color picker is the most visible new feature but it is not the only one. On the basic UX front, new users can now create a Sencha ID without leaving the application; we hope this will make the experience of using Animator for the first time more convenient. To help users who work on smaller screens, we also added the ability to turn off the rulers around the main stage.

We also took a look at how we could improve the editing experience in Animator’s stage. The application positions child objects relative to their parents, according to the rules of CSS positioning. This generates behaviors that at first sight might look strange for designers used to traditional graphic design packages. In the case of nesting objects inside other objects, this can make objects appear to be in the wrong place on the stage.

The new version of Animator compensates for this, maintaining the child object’s position on the stage for ease of editing, while still preserving the correct CSS under the hood. This takes care of the majority of cases when objects are nested, but it won’t always work if extreme transformations have been applied to the objects.

Let’s look at an example involving two objects to see how Animator accomplishes this. Object A is at x=100, y=100 on the stage. Object B is at x=300, y=300. According to the rules of CSS positioning, which position a child object relative to its parent, nesting Object A inside of Object B will make Object A jump to a stage position of x=400, y=400.

Animator compensates for this during nesting by adjusting for the difference between the original positions of the two objects (300-100=200) when determining the new relative position of Object A. When Object A is nested inside Object B, Animator places the Object A child at a relative position of x=-200, y=-200 to place it in the same stage position that it was before nesting.

Export has also been improved, with a new “split export” feature. The new version of Animator lets you split your export up, exporting HTML, Javascript, and CSS separately instead of exporting a single file with all code embedded inline. In addition, Animator exports now also work around some Android 2.x CSS issues with the implementation of fill mode for greater browser compatibility.

h3. Bug fixes

We fixed a number of bugs mostly to address animation editing, automatic updating, a previous incompatibility with Mac OS X Snow Leopard, and export behavior. See the “changelog”: for a complete list. We are serious about providing a trouble free experience in Animator, and we encourage you to report bugs in the “Bug Forum”:

h3. Press Play to start…

The Animator team hopes you will enjoy this update and that you will keep creating beautiful animations with our tool.

For now, go ahead and update, either by accepting the update prompt you will get inside Animator on startup, or “download Sencha Animator 1.1”:, and show us what you can do with it.


  1. says

    I can not get the x,y coordinates of the click from the SeriesSelectionEvent.
    I can not differentiate between right and left clicks.

    If I override the onMouseDown method, I can get the x,y

Leave a Reply

Your email address will not be published. Required fields are marked *