Sencha Inc. | HTML5 Apps

Blog

Introducing Animator 1.5

June 11, 2013 | Arne Bech and Miroslav Bojic

Sencha Animator is our powerful CSS3 Animation tool. With Animator, you simply drag and drop objects onto a canvas, and then adjust related properties and keyframes to create rich interactive animations. This versatile tool has been used to create games, ads, interactive children books, ui mockups, motion design studies, presentations, and more.

Download Sencha Animator 1.5

Screenshot

Today we’re excited to announce our biggest update yet. Sencha Animator 1.5 is more powerful and easier than ever to use. Our latest release improves core functionality in exporting, embedding, and overall browser support. It also adds often requested features such as symbols and multiple timelines. This update exponentially increases the possibilities in creating CSS3 animations. To improve productivity, we revised the interface and added several new workflow enhancements — such as the new inline text editor, the code snippet library, and an improved JS API.

For example, the animation below was created in the Sencha Animator 1.5, and relies heavily on all the new features included in this release:


Lets walk through the new features of Animator 1.5:

Symbols

In essence, you can think of symbols as animations within animation. Symbols are encapsulated objects that have their own timelines and run independently of the main timeline. They are managed by the new symbol library. Multiple instances of the same symbol can be included on the stage, and they will all update if the symbol is updated. Symbols can even be nested (i.e., you can place a symbol inside a symbol). Symbols can be used in any situation where you might require an animation that plays independently of the main timeline, such as animated buttons or characters (like the man in the demo above). Finally, Symbols are extremely useful in projects requiring multiple animated instances of the same object.

Multiple Timelines

In many projects, the contents of a scene may not change but the scene might be animated in multiple ways. In Animator 1.5, each scene can have multiple timelines, thus allowing objects to have multiple animations. This avoids the duplication of scenes, makes projects easier to maintain, and creates smaller exported files. Finally, multiple timelines are especially powerful in combination with symbols, as each symbol can have multiple timelines as well.

Custom Fonts

Sencha Animator 1.5 now supports custom font-face fonts and is integrated with Google Web Fonts. Through the Animator typography panel, you can easily manage all the fonts that are included in your project — or browse, preview, and include Google Web Fonts.

Sprites

Sprite animation — a series of images played quickly one after the other — is one of the oldest types of animations. In Sencha Animator 1.5, you can use sprite animation by utilizing a “steps easing” function for the keyframes. Take a look at our excellent tutorial on how to do this.

Flexible Layouts

Support for multiple screen sizes is nothing new, but still remains a challenge. Animator 1.5 introduces a new layout type called Flexible layout. It allows your project to be resized to fit the available space in the browser. This layout takes a minimum set of dimensions (you can also provide a maximum set) and allows the project to be resized within those constraints. To handle project resizing, an object can be anchored to other points than the default top-left corner.

Improvements

Aside from the new features, Sencha Animator 1.5 includes many overall improvements. Here are a few:

IE10 Support

Animator can now export CSS without any prefixes, which will run in IE10, or any modern browser that supports prefix-less CSS3 3D Animations.

Code Editor, Custom JS API and Code Snippets Library

The code editor can now be moved and resized and includes a code snippets library with many often-used examples that can be immediately inserted. The auto-completion has been improved and the available API extended to allow interacting with all the new features — such as timelines and symbols. Both scenes and timelines have received two new actions, init and exit, that are called before animation start and when timeline or scene is exited regardless of if the animation has finished or not, making it easier to add logic and useful actions to your projects.

Export for Embedding

The “Exporting for Embedding” feature has been significantly improved. You can now export to Sencha Touch. The existing SDK for embedding and managing exported projects has also been overhauled. It now comes with a documented and more useful API including new callbacks making it easier to embed projects the way you want and with more flexibility. The mobile export settings allow for configuring specific options for projects aimed specifically for mobile platforms.

Sencha Touch Export

When using the “Export for Embedding” feature, a sample Sencha Touch project will be exported with the Sencha Touch Animator SDK included. This allows for easy inclusion of Sencha Animator projects within a Sencha Touch app.

Inline Text Editor

By clicking on the new text icon at any stage object, the inline editor will be brought up for much easier text editing with live preview.

Performance

Performance has been significantly improved, in particular for exporting and when working on big projects. Many large projects will export up to ten times faster than before.

Documentation

Along with the latest version, we’ve thoroughly revised, reorganized and improved the Animator documentation and included many new demos for you to explore such as the Haunted Mansion demo, and the Memory Game demo (with 3D effects!). We’ll be also giving a Starting Out with Sencha Animator session at SenchaCon.

New demo icons

Start animating today! Download a free 30 day trial of Sencha Animator.

Written by Arne Bech and Miroslav Bojic
Arne Bech leads development on Sencha Animator. He is passionate about technology; in the past he has designed and built physical products as well as run his own web company in his native Norway. Arne holds a M.S in Electrical Engineering from Stanford University.
Follow Arne on Twitter

Miroslav Bojic joined Sencha in 2012 and has been working primarily on Animator. He is an engineer and interaction designer with prior experience at Philips, and in research – designing and building many experimental applications. Miroslav holds a doctorate level degree in User-System Interaction.

Share this post:
Leave a reply

There are 4 responses. Add yours.

Alex

2 years ago

This is just amazing stuff.  Very nice work.

Zakki

2 years ago

it’s amazing,

Iliyas

2 years ago

Its great to see features like symbols and ie. Could i get roadmap of sencha animator or new features planned in next major release. If you could add mask and path animation it will be really helpful.

clippingpathzone

1 year ago

Amazing, Thanks

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

Commenting is not available in this channel entry.