Sencha Inc. | HTML5 Apps

Blog

Introducing Sencha Animator: The CSS3 Alternative to Flash

October 26, 2010 | Michael Mullany

Introducing Sencha Animator: The HTML5-CSS3 Alternative to FlashToday we’re thrilled to announce the developer preview release of Sencha Animator, a new GUI-based desktop application that enables interactive designers to easily create rich media animations for HTML5-capable devices. With Apple's decision to exclude Flash from their iOS, interactive designers have been searching for a way to bring the power of web animation to iOS devices without hand-coding hundreds, if not thousands of lines of CSS3. Well, the search is over. Check out our demos, then download Sencha Animator and give it a whirl (you'll need to get a forum account if you don't already have one.)

An Animation Power Tool

Sencha Animator allows you simply place objects (text, shapes, and images) onto a re-sizable stage area, configure their properties and then animate to bring them to life. You can move, scale, skew and rotate objects singly or at various levels of nesting, in 2D or 3D space. With Sencha Animator, you can also take advantage of CSS3 capabilities like gradients, blurs, reflections and shadows. You can create basic animations quickly and easily. But Animator is also designed to be a CSS3 power-tool. So when you need to add HTML or custom CSS, it’s easy to do that too. Best of all, Sencha Animator outputs pure CSS3 animation code, so it’s hardware accelerated on Apple iOS, which creates incredibly smooth animations. This also means it’s ready to work with any JavaScript library, not just Sencha.

Web Animations & CSS3 Ads

There are two editions of Sencha Animator— Standard Edition and Ad Builder Edition. The Standard Edition (today’s preview release) includes all the capabilities you need for normal web app animations. CSS Animations can replace Flash in many areas where it was once used: splash screens, educational content, motion graphics, kinetic typography, instructions, and more. Mobile designers and developers should be particularly thrilled since CSS3 animations are the only animation technology that works on the major mobile platforms- iOS, Android and Blackberry OS6. (Android lacks SVG and the BlackBerry Torch is not high powered enough to run Canvas). However by license, the Standard Edition may not be used to create advertising, so if you’re an advertising agency, you’ll need to use our Ad Builder edition. If you’re interested in this edition, contact us directly and we’ll add you to a forthcoming private beta.

How Much Does It Cost

We’re pricing standard edition like a traditional design tool: on a per user basis in the low hundreds of dollars.

What’s Coming Next

Today’s release is very much a preview release, and there are rough edges that will be sanded down before release. In our in-house usability testing, we’ve identified several areas for improvement that we want to tackle. And of course, there are lots of CSS3 properties that we will bring into the application before we ship the final release: a better color picker, a gradient maker, more complete backgrounds support and more complete text formatting properties are just a few of the obvious features that you can expect. If you’re a user of Sencha Touch or Sencha Designer, you can also expect some nice integration features. We also hope to expand support to non-Webkit browsers as they add appropriate support for the CSS3 Animation spec.

And One Last Thing…

For those of you wondering what Sencha Animator is written in, the answer is… Ext JS of course! Ext JS provided an enormous short-cut in development time and allowed us to deliver the product on multiple platforms without worrying about Objective-C or Windows APIs.

There are 37 responses. Add yours.

Alex

3 years ago

Speechless… Sencha FTW

Camilo Lopez

3 years ago

nice one!!!

Andrea Cammarata

3 years ago

That is a great news! Sencha never stops to surprise me!

No'am

3 years ago

Fantastic, can’t wait to try it

antimatter15

3 years ago

Awesome! Three years ago, I made a project powered by Ext and SVG/VML as an alternative to flash. http://antimatter15.com/ajaxanimator Nice to see that the idea is picking up.

Though it strikes me as sort of missing the point to force it’s installation as if it were a desktop app even though it’s made with web technologies. Also, it’s a little weird how the animations are exported as html files filled with css/border-radius rules.

David Kaneda

3 years ago

@antimatter15 — We’ve been big fans of your original animator for some time, was a great Ext JS app. Our Animator is embedded in a native shell (though still powered by Ext JS) simply to provide some native functionality, like File I/O, etc. Thanks-

Asa Dotzler

3 years ago

What specifically is missing from Gecko-based browsers like Firefox 4 that caused you to build this for only Webkit?

Jay Robinson

3 years ago

Asa, Firefox does not yet support CSS3 @keyframe Animations. Though they’re coming along with CSS3 Transitions!

ONEBOYS

3 years ago

help!
what happens when i run it
—————————
JavaScript Problem -
—————————
The script on this page appears to have a problem. Do you want to stop the script?
—————————
&Yes &No
—————————

Michael Mullany

3 years ago

ONEBOYS - can you log that on the forum - along with details of your OS & system config.

Brad Neuberg

3 years ago

This is hot!

It might be cool to be able to have sprites that are done in SVG and then animate the entire sprite using CSS3 to get hardware acceleration. To get Android support, have the SVG draw to a Canvas using one of the various SVG to Canvas libraries out there (such as http://code.google.com/p/canvg/), then animate the entire sprite using CSS3.

Here’s a cool demo that uses HTML Img tages pointing to SVG files that are then animated using CSS3: http://www.anthonycalzadilla.com/i-twitty-the-fool/

Here’s why this matters; a designer can use Adobe Illustrator with the new HTML5 pack (http://labs.adobe.com/technologies/illustrator_html5/) to efficiently create sprites and animatable objects and export them to SVG (and even have these be parameterizable to change the sprites through script themselves, such as reusable buttons). Then, they could use your tool to create the animation.

Best,
  Brad Neuberg

mycoding

3 years ago

Super, but in Windows XP it is run an error and doesn’t run at all.

mycoding

3 years ago

It writes me.
Javascript Problem
The script on this page appers to have a proble.
Do you want to stop the script?

Stju

3 years ago

Marvelous!
This will be the perfect tool to make iAd’s for iOS devices!

Mark Anders

3 years ago

It’s good that none of the demo ads work in internet explorer. I think it’s more important for advertisers to make sure the 2% of page views on ios devices get to see an ad than the 50% of views in explorer, and even though this means ad revenue will fall drastically its best not to use flash

Dipish

3 years ago

Amazing! Lets beat that Flash!
Also dying to see improved animation in ExtJS 4!

John Naho

3 years ago

They don’t seem to work on Android. The cogs example doesn’t look anything like it does on the desktop and the kinetic text doesn’t do half of the transitions or effects (scaling, flipping, glow). Seems we can only use this for very simple transitions on some devices, not exactly Flash.

Immobilier

3 years ago

Wow,

This can be a great alternative of Adobe’s “Edge” new product.

But I thought it was using ExtJs for animations, it only uses css3…

mycoding

3 years ago

I like ExtJS))))
How I want to work in such company but not enough knoweledge I have.

Kenneth Christiansen

3 years ago

Unfortunately I cannot get it running on our network at work. Neither on Mac or Linux (64 bit).

I have proxies set, so maybe it is just not reading it.

It takes forever to start and then I see a while box for around 5 seconds before I come to the log in screen.

jordan arscott

3 years ago

Very interested to give this a whirl. I’d like to see just how powerful this tool is.

Michael Mullany

3 years ago

Animator can’t log in through a proxy - we’re going to post a new version with this fixed. But please post technical problems on the forum, the team is on there.

scarsick

3 years ago

Stunning!

John Robins

3 years ago

Looks like Adobe is working on the same kind of product.

http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/

SwamBala

3 years ago

Amazing Amazing Amazing.
Speechless…You guys are doing great job.

Andreas Näf

3 years ago

It’s amazing… great job!

But I’m getting a bit concerned about the direction you are going. It seems, that you are heading very much to development for mobile devices.

I’m asking me what happens with ExtJS for the simple desktop browser? Does it get enough attention?

HTML5, CSS3, Sencha Touch and this animator are really cool, but the most I use ExtJS, PHP, ExtDesigner to create webapplications for the simple pc browsers.

ParaElspam

3 years ago

Hello. Are you testing this with Palm/HP WebOS devices?

Thanks.

davidvb

3 years ago

as an ui/ux designer with experience in motion graphics ( did 2 coca cola gigs and made vj material for my old vj crew as well as DJ Tiesto) I was very excited about this announcement. But when i tried the developers preview i was kinda disappointed in the workflow of the app at this stage. I would strongly suggest taking a good look at how After Effects works. Learning from that workflow (and their shortcuts) would make it so much more fun to work with for people with animation experience.

Michael Mullany

3 years ago

Hi David - the workflow definitely needs work - there will be a solid revamp of the interface before we ship to enable faster creation. That said, if we want to output readable CSS3 code (and that’s one of our goals, so people can hook in whatever they want to the work product)—there will be some new things that people coming from After Effects or 3DSMax or wherever will have to learn.

Ed Spencer

3 years ago

@Andreas don’t worry - Ext JS is getting a lot of attention behind the scenes; stay tuned for some mindblowing stuff to come

davidvb

3 years ago

@mmullany thats great to hear! i’ll be looking forward to seeing the progress!

Kai

3 years ago

Looks very promising.

Everybody who’s looking for some server side support for a graphics enginge should also check out Intermedia Fotoficient.

As it’s based on server-side JavaScript and provides a variety of image operations on-the-fly, scaling image ressources to a very low and appropriate file size is as easy as it goes with Intermedia Fotofcient.

And it’s faaaaaaaaaaaaaast!

SwamBala

3 years ago

@ Ed Spencer
Good to hear about that.

ExtJS + Sencha Touch + Sencha Animator + ???
I guess the Product Strategist in Sencha is doing a great job.
You guys predicted the future huh!

See everyone including Apple, Google and yesterday Microsoft all moving towards HTML5 and CSS3

Check this out
http://bit.ly/bVAHQi

Alexander Savelev

3 years ago

Hello
Will this product will be released on Russian Language?
Can I help you translate interface of program to Russian?

Totti Anh Nguyen

3 years ago

This is cool stuff.. can’t wait to try out.
However I wonder how complicated the animations could go ? smile

Deepesh Fagna

3 years ago

Marvelous!
It really nice post thanks.

Cassie

3 years ago

Wait, I caonnt fathom it being so straightforward.

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

Commenting is not available in this channel entry.