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

Question

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.

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ésar17023019 · Accepted Answer

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

JoãoCésar17023019 · Answer

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);	
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded