Copy link to clipboard
Copied
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!
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
...Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
JC, you're a wizard, once again.
That works brilliantly, thank you!
Copy link to clipboard
Copied
You're welcome!
Copy link to clipboard
Copied
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);
}
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
"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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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