Anyone working on a proper component for embedding Sencha Animator scenes?

Anyone working on a proper component for embedding Sencha Animator scenes?

I am... and am wondering if anyone is already further along already. If not I'll share here when I get things working nicely.

Basically I want a way to use animations created by Sencha Animator as components in ST2 that properly respond to sizing, can be controlled by the application, and can be instantiated/destroyed multiple times smoothly.

So far I have a base component that reimplements AN.Controller and then I copy/paste the markup and scene config into each subclass.

This seems like something someone at Sencha must be working on already...

I've ported AN.Controller over to a base component that can be extended for each animation. You have to paste in the scenes array and HTML as config. With scale=true a scale3d is applied to fit the animation's first scene into the component.

I'm still having trouble though getting the animation to work again after the component has been destroyed and recreated

The produced component extends an abstract component to which I've ported all the functionality present in the AN.Controller code that comes out of animator: http://x.jarv.us/touch/AbstractAnimation.js. The output of the convert includes a line to enable autoloading this class from my server, but you may strip that in favor of a local copy if you like. Components feature an autoscaling option to scale your animation to fit the component's layout.

The main problem right now is Animator's use of static IDs. The assigned IDs are distinct enough to not collide with anything in your Sencha Touch 2 animation, but if you're deploying multiple animations in the same app they will likely collide with each other. My workaround is to give all objects in animator custom IDs or add+delete enough objects at the start of a project to push its IDs to a unique range.

If anyone finds this a helpful starting point for their own adventure, please keep us posted how it turns out! Big thanks to Arne Bech for helping solve some bugs.

Scaling doesn't work on older android devices right now as it uses scale3d which they don't support. I'm planing to implement a 2d scale fallback for these devices but I don't have high hopes for achieving reasonable performance on anything complex.

For my project I am creating pre-downscaled alternate versions of animations for the older android devices.

Hi, hope you can shed some light in my problem, im completely new here

I need a sencha touch 2 carousel, with each slide being a Sencha Animator Slide. So when the app loads, the animation of the 1st Slide should start. If I swipe down, then the Carousel should start the 2nd animation, and so on.

If tried using iframes for each item in the carousel to load individual Animations, but they all start at the same time and I cant swipe when on top of the iframe.

Have you tried using the component creator I posted in this thread? You should be able to use it to turn each animation into a component class which you can easily insert into a carousel. Then you just have to connect each slide's show event to call its .play() method

If I understant what you mean, you suggest exporting each individual slide from Sencha Animator and convert it with the component creator, and then loading them in the carousel ?

It might work, but all the controller code (AN.Controller javascript) that sencha animator creates would be repeated on each slide ?

I was trying to put the js in one file, the css in another, and then the html in each Carousel item, the problem is Sencha only loads the first two items, so the animation is constructed with only the first 2 slides