Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
schwabencode

EaselJS tween 'frame'

Recommended Posts

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);
	}});
}
Link to post
Share on other sites

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.

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×