Sencha Inc. | HTML5 Apps

Blog

Sencha Animator Released: A Revolution in Mobile Animation

October 03, 2011 | Luca Candela

Sencha Animator Released: A Revolution in Mobile Animation

Introducing Sencha Animator 1.0

We spent the last few months working very hard (and very quietly) to bring you a product that we think will redefine the creation of animations on mobile devices. And now it’s here: today we’re very proud to announce the first release of Sencha Animator.

View Sencha Animator CSS3 Demos Download Sencha Animator

What is Sencha Animator?

Sencha Animator is a desktop application that enables interactive designers to easily create rich media animations based on web standards for modern mobile devices. Until recently, rich media advertising on the desktop web has been enabled by the Flash plugin. But with no Flash support on iOS, interactive designers have been looking for a way to bring animations and rich interactivity to mobile devices without hand-coding hundreds, if not thousands of lines of JavaScript, CSS3, Canvas, or native code.

Museum of Science demo advertisement
Museum of Science demo advert, tailored for iPad dimensions

Last year, we looked at the various techniques for mobile animation and decided to focus initially on CSS3 Animations. Animations built with CSS3 have a considerable advantage over any other mobile animation technique: they look, feel, and run beautifully. And on most mobile browsers CSS3 is hardware accelerated, so it consumes very little CPU power while running at high framerates. In addition, since CSS3 Animations are just styling, browsers that don’t support them can still fall back to viewing un-animated content.

For these reason, we decided to start out using CSS3 animations. We try to be as faithful as possible to the underlying technology in Animator. We’re giving designers a simpler way to build animations while making the output friendly to hand-editing and further extension.

View Museum of Science Demo video

The road to CSS3 animations

During the last year, the Animator team at Sencha has worked to bring an innovative technology in a familiar working experience to interactive designers and creative agencies. Those of you who followed the evolution of Sencha Animator will appreciate how much we’ve refined your working experience.

Every area of the product has been honed and perfected with community feedback and a fantastic group of professional designers and user experience experts contributed to the creation of a user interface that is both easy to use, yet extremely powerful.

And while the first release of Sencha Animator produces WebKit compatible animations, but now that CSS Animations are also part of Firefox, Opera and IE10, we’ll be adding support for those browsers in time as well.

Each design decision has been made with a conscious effort to help designers be as productive as possible, as quickly as possible. So let’s go over the major features of Sencha Animator 1.0:

Sleek Dark UI

A UI that gets out of your way

The Sencha Animator interface is designed using dark tones to let designers concentrate on what really matters — their own creative work — while the tool chrome fades into the background. Key actions in the UI are highlighted with accent blues to guide designers to available actions.

On top of the visual design, Animator focuses on productivity. To make it easier to work on small screens, almost every panel is collapsible so you can maximize the canvas area. Keyboard jockeys can use the arrow keys to nudge objects. Smart guides are triggered when moving objects on the canvas to help align things properly on the fly. To make it easier to see the results of edits, properties in the Property panel feature “drag to edit” and keyboard increments/decrements so designers can adjust properties to exactly the effect they want.

Intuitive timeline, multiple scene support

The timeline is the heart of any animation: it’s here where you can take a static object and bring your artwork to life. For each object on the stage, the animation track shows its visibility, the presence of keyed animations and their timing. The track is easily editable with the mouse, and can be finely customized by using one of our pre-set easing curves or with the powerful custom easing tool.

Every object, and object group, can be locked and hidden to facilitate tweaking of individual elements, and a simple but effective “scene end” marker lets you define the length of each scene.

Animator supports complex nested objects, but it’s easy to tell if anything is happening inside a collapsed nested group at a glance by using the nested animation indicator.

Nested timeline collapsed

Nested Timeline Expanded

For bigger and interactive projects, putting everything in a single timeline can become confusing and hard to manage. The Scene system allows you to split your projects into several scenes keeping the timeline free from clutter and your project better organized.

By default, when a scene is finished, the animation will go to the next scene, however this can be customized in different ways (more on this later). Scenes can even be previewed by hovering on its thumbnail, making it easy to find the right one to edit.

Multiple scenes at your fingertips

Object Library

Animator also offers an Object Library that lets you save your objects for later reuse in the same project, and for use in a different project via export. This new feature facilitates the creation of multiple animations using the same branded elements (logos, buttons, etc) and simplifies the job of maintaining a consistent look and feel across multiple projects and collaborators.

Object Library

Templates

In studios and agencies, interactive designers often find themselves working on multiple projects for the same client, or building multiple creatives for the same device. Animator makes this easy for designers, letting you save a project as a template, then start a new project from that template. Templates are simple Animator files that can easily be shared with colleagues and collaborators and used as a consistent starting point for projects.

Advanced interactivity and output options

This is the piece interactive designers are going to love the most: Animator lets you use JavaScript almost everywhere. You can add JavaScript to objects, to scenes or in the head of the exported HTML + CSS output. In a scene’s properties for example, you have the ability to add interaction at the scene’s start, at the end and on mouse/touch move. There’s a choice of pre-packaged interactions like opening a URL in the same window, skipping to another scene, or adding your own JavaScript. In addition to this, Animator output is intentionally highly human readable.

You can also choose to minify your export, or to activate ORMMA support. Designers unfamiliar with web technologies have direct access to the exported code, so they can easily understand how their creations work under the hood, while advanced users have complete control over the output, giving them the freedom to push the envelope. And pushing the envelope is not an expression we’re using lightly here. Just take a look at the demo that our beta tester agency gskinner.com created with Animator:

KickFu game demo
KickFu game demo, made with Sencha Animator by gskinner.com. View video of demo

When we saw this for the first time, the offices at Sencha were speechless with what a skilled designer can do with Sencha Animator, and we hope you will be too.

ORMMA Support

Animations are a key part of any interactive brand campaign, and Sencha Animator makes it incredibly easy to build advertising assets. Animator produces creatives that are compatible with any mobile ad network that can serve rich media ads. This is thanks to our support for an up-and-coming standard called ORMMA (Open Rich Media Mobile Advertising). All major mobile networks support it, and it eliminates the need to code an ad for a specific network, and reduces re-work that’s often required to run campaigns on multiple systems and apps.

ORMMA logo

With Sencha Animator, designers don’t have to develop for the lowest common denominator anymore, but build experiences that are designed to work on different devices, ad networks and delivery methods.

Go ahead, amaze us

As you can probably tell, we’re incredibly excited to release Sencha Animator, but we didn’t do it alone: we had the help and support of an incredible group of artists and developers from various backgrounds that were so gracious to help us test the product and helped us fine tune it. A special thanks goes to the many people that have contributed their critiques, suggestions and guidance to Animator. We should also note here that we built Sencha Animator itself using Ext JS wrapped with native packaging: this has allowed us to simultaneously ship versions for Mac, Windows and Linux.

Sencha Animator icon

We can’t wait to see what all of you will be able to do with Animator, and we are excited that you will surpass our wildest expectations. Go ahead, download the trial and we look forward to being amazed.

Pricing and availability

Sencha Animator is available today at $199 from the Sencha Store. Discount packs are also available.

There are 21 responses. Add yours.

Jay Garcia

3 years ago

Congrats guys! The UI is looking TIGHT!

mycoding

3 years ago

Wow

Ivan Jouikov

3 years ago

Looks great and fast.  Only problem I saw is non-standard zoom breaks everything (in Chrome at least).

Giulio Roggero

3 years ago

Great application!

Martialen

3 years ago

A revolution with a price tag. Way to kill the spirit of HTML5 as opposed to proprietary Flash.

NewDesigner

3 years ago

How does providing a service that requires resources (thus resources in return when used) a way of killing the spirit of HTML5?

AWesomeBob

3 years ago

LIKE!

degea9

3 years ago

time to learn sencha animator

Martialen

3 years ago

@New Designer.

They just moved from providing a service to selling a product. There’s plenty of open-source software out there that take resources and manhours to create, but that doesn’t mean they must come at a cost to the user. Beneath Sencha Animator are HTML5, CSS, and Javascript - technologies that are freely manipulable and accessible to all web developers. I guess I’d hoped Sencha would follow the business model used for Sencha Touch where only commercial operations need purchase a license. That makes sense.

Jashson

3 years ago

The wheel gets reinvent! For lucky, there will be some HTML5-Blockers to avoid annoying ads smile

Ram

3 years ago

Gaming made easy…................................

John doe

3 years ago

I find it curious that demos are *never* shown running on an actual device, but always on some I/pad/phone simulator.
Curious. Nay, suspicious even!

Of course things will run smooth on the simulator.

Michael Mullany

3 years ago

John - I’m not sure if you’re serious or trolling. In the former case - http://vimeo.com/25109950 shows an animation running on a physical iPad - you can even see the carpet underneath it.

(But it also doesn’t look very professional, so our standard practice is to screen-capture the other demos running on a simulator because they look better produced. )

jax

3 years ago

He’s probably trolling but does have a point. To be honest I think the demo running on the actual ipad is more convincing. grin

 

Arnie Keller

3 years ago

Just a point of clarification, please:

Does the javascript mean that the animations will run on browsers that don’t support css3 ( as do Hype or Edge)?

Thanks.

Michael Mullany

3 years ago

There is no support for older desktop browsers that don’t support CSS3 Animations in version 1 of Sencha Animator.

Michael Mullany

3 years ago

@martialen - you’re not quite right on needing to pay for a Sencha Touch license for commercial use. Our Sencha Touch commercial license is free. The only exclusion is that if you want to ship your OWN SDK or application builder embedding Sencha Touch, then you need to get an OEM license from us.

Jon Sloper

2 years ago

The Sencha Animator presentation at SenchaCon 2011 was brilliant. I am hooked. It seems completely intuitive and quick to use. It opens up so many possibilities…

Ali Ashraf

2 years ago

I was developing on sencha animator but the software is crashing. I tried to develop http://www.sencha.com/learn/animator-quickstart/  but when i try to “export project” the software gives an error massage saying “An error occurred in sencha animator…..”  Thus i am no able to develop using sencha animator….. KINDLY SUFFEST SOMETHING

Jase

2 years ago

What an awesome way to explain this-now I know eervythnig!

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

Commenting is not available in this channel entry.