EaselJS tween 'frame'

[schwabencode 0 Likes (Newbie)]

is it possible with the use of Easel plugin to tween a MovieClip's currentFrame ? 

Easel docs only know about gotoAndStop() etc., but its much nicer to move the timeline by using a tween. (and easel uses it's own tweens internally, but I prefer one - the greensock - tweening platform.

At the moment I'm using this quite dirty approach:

tweenMovieClip = function(from,to,target) {
	target.gotoAndStop(from);
	var obj = {frame:from};
	var dur = Math.abs( (to-from)/24 );
	TweenMax.to(obj,dur,{frame:to,roundProps:'frame',
		ease:'Linear.easeNone',onUpdate:function() {
		target.gotoAndStop(obj.frame);
	}});
}

[Carl 9,765 Likes (Superhero)]

Hi,

 

 

Right now your way seems quite good.

 

Currently frame tweening is not built into the EaselPlugin.

It looks like Easel MovieClips have a currentFrame property which would have been great to use but apparently it is read-only. Perhaps its worth asking the Easel devs to make that writable or provide currentFrame getter/setter methods. 

 

We have a number of tools / projects we are working on currently so we will have to see how likely it is that we add features to EaselPlugin. If it looks like something we can easily accommodate we will post back here.

[GreenSock 12,928 Likes (Superhero)]

This may be relatively trivial to add to the existing EaselPlugin - would you mind creating a super simple demo file with your solution in place so that I can have a solid starting point to swap in the plugin solution? Even a codepen is great. I can't promise anything at this point, but I'd be happy to take a peek at what you send over and see if we can quickly get something working. 

[schwabencode 0 Likes (Newbie)]

here we go:

See the Pen ILipw by oemueller (@oemueller) on CodePen

[GreenSock 12,928 Likes (Superhero)]

Thanks for the demo. Pretty shocking how much code Flash spits out for that simple animation (I assume that was exported from Flash - right?)

 

Anyway, I've attached an updated version of EaselPlugin that recognizes a "frame" special property. So to tween to frame 35, for example, you'd do:

TweenLite.to(yourMovieClip, 2, {easel:{frame:35}, ease:Linear.easeNone});

Does that work well for you? 

EaselPlugin_0.1.5_preview.zip

[schwabencode 0 Likes (Newbie)]

I traced the bitmap into many vector shapes- I think that causes many lines of cryptic drawing instructions

 

I just tested the 'frame' feature - works good for me. 

 

During my current development I recognized the need of a easel "scale" property and also something like "transformAroundPoint: {x:10,y:50}".

What do you think? Any Example needed?

 

cheers,
Oliver