Canvas: Animate Movie Clip properties via TweenJS code instead of timeline tweening; How is it done?

[Jeffery.Wright]

So I have a number of MC's as UI menu items, which I would like to transition in procedurally as opposed to the usual mechanical timeline tweening which would greatly complicate what I am producing. 

I have given these pages a pretty hard look and still cannot see how their code would apply to code on a timeline frame, referring to several MC's:  TweenJS Module and Tween Class   

Here I have mc_One, mc_Two, mc_Three, etc.. that I want to cascade in when their frame is landed on. 

Or even cascading in alpha visibility would be fine, preferably both: Slide in from right to left and fade in from alpha 0 to fully visible.

I would think this was a pretty common usage for interface design in Animate, are there any source examples of this sort of procedure being used? 

Thanks!

[JoãoCésar · Accepted solution]

Hi.

You can store the instances you want to animate in an array (or usen the children property if all of them live alone in the same parent) and run the TweenJS call in a loop of your choice. For example:

var mcs = [ this.mc0, this.mc1, this.mc2, this.mc3, this.mc4, this.mc5, this.mc6, this.mc7 ];

mcs.forEach(function(mc, index)
{
	createjs.Tween
	.get(mc)
	.to({ alpha: 0, x: mc.x + 100 }, 0)
	.wait(index * 100)
	.to({ alpha: 1, x: mc.x - 100 }, 250, createjs.Ease.cubicOut);
});

I hope it helps.

Regards,

JC

[Jeffery.Wright]

JC, you're a wizard, once again.

That works brilliantly, thank you! 

[JoãoCésar]

You're welcome!

[JoãoCésar]

Or if your instances have the same base name + a numeric suffix, you could write the code like this:

var root = this;
var totalMCs = 8;
var i, mc;

for (i = 0; i < totalMCs; i++)
{
	mc = root["mc" + i];

	createjs.Tween
	.get(mc)
	.to({ alpha: 0, x: mc.x + 100 }, 0)
	.wait(i * 100)
	.to({ alpha: 1, x: mc.x - 100 }, 250, createjs.Ease.cubicOut);	
}

[Jeffery.Wright]

Very handy indeed, thanks!

Is it possible to tween from one .y value to another? I'm gonna take a crack at that, thanks again!

[ClayUUID]

"Is it possible to tween from one .y value to another?"

TweenJS can tween literally any numeric property. It doesn't even have to be a property recognized by CreateJS. It could be some variable only used by your own code.

[Jeffery.Wright]

Yep, that works a treat! 

createjs.Tween
		.get(mc)
		.to({
			alpha: 0,
			x: mc.x = 1956
		}, 0)
		.wait(index * 100)
		.to({
			alpha: 1,
			x: mc.x = 1700
		}, 250, createjs.Ease.cubicOut);

Hopefully others will find this as useful as I do.

[JoãoCésar]

Thanks for sharing.

I just like to point out that you can just set the x position directly.

So instead of :

x: mc.x = 1956

You can just write:

x: 956