Sencha Inc. | HTML5 Apps

Blog

Sencha Animator 1.1 Now Available

January 12, 2012 | Luca Candela

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.

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.

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.

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.

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.

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.

There are 5 responses. Add yours.

Alphonso Turner

2 years ago

Very Cool stuff..

Ildmar Almada

2 years ago

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

AwesomeBobX64

2 years ago

Ildmar, I believe the right click would be under a “contextmenu” type of event. Visit http://www.apple.com and http://www.sencha.com

prefabrik

2 years ago

Thank you for Sencha Animator

Knjigovodstvo

2 years ago

I am really happy to hear this news!

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.