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.
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
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.
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”:https://www.sencha.com/products/animator/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”:https://www.sencha.com/forum/forumdisplay.php?65-Sencha-Animator-Bugs.
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”:https://www.sencha.com/products/animator/download/, and show us what you can do with it.