Actuate multiple tweens on the same item

is it possible to apply multiple tweens to the same DisplayObject?
An example, I’d like to:

  • apply a 3 seconds tween to item1.scaleX
  • apply a X seconds tween to item1.scaleY, 0.5 seconds later without deleting the first tween
  • apply tweens to other properties at any time while keeping the previous tweens
  • apply a new tween to an already tweened property at any time while keeping the previous tweens

I’d like to avoid the “chinese box” technique.

You can build a scheduler permit to launch all tween you need at scheduled time.
You need create also a system permit you to postpone an action for a certain time.


Ok, but the problem is that when I set a new tween I lose the running ones.

Not in my experience. I’m working using a scheduler class permit me to launch many commands included many actuate/tweens features and I can launch more than one tween without lose anything. Software I’m using is proprietary and in develop so I can’t give you code but only my experience advices.


Aren’t you using Actuate?

It depends on if the tweens conflict.

This should work:

Actuate.tween (object, 1, { x: 100 });
Actuate.tween (object, 1, { y: 100 });

However, if the previous tween has a conflicting property, it will be canceled, for example

Actuate.tween (object, 1, { x: 100, y: 100 });
Actuate.tween (object, 1, { y: 100 }); // cancels the above tween, since both define y

Mind you, canceled tweens are canceled entirely, not partially, so the above sample will only tween on the y property, as the x/y tween was canceled

If you use a delay or other mechanism where you know the tweens won’t conflict, you can use false to not override previous tweens

Actuate.tween (object, 1, { x: 100, y: 100 });
Actuate.tween (object, 1, { y: 200 }, false).delay (1);

Ah! So if I am using delays for non-conflicting tweens I have to specify override-false anyway?! This looks a bit odd and unexpected to me… it looks like Actuate scheduler ignores the delay when a tween is defined and compares tweened properties only, searching for conflicting ones, isn’t it?

But, what happens if I define a delay and the tweens are conflicting? Does the first tween is interrupted and replaced by the second one instantly? If it works like this I think that the override-false behavior should be the default one, as it is more natural to add tweens and interrupt the previous ones only when they are effectively executed (and not when scheduling them). It would be even more intuitive if the conflicting tweens only caused the conflicting properties to be interrupted, as if I had a separate tween for each property.

But this changes would lead to a pretty different tween library.

Yes. Let’s break this down:

Actuate.tween (object, 1, { y: 200 }).delay (1);

This line contains two function calls: tween (object, 1, { y: 200 }) and delay (1), and they’re called in that order.

Why that order? If we look at the definition, we find that tween() returns a GenericActuator, and the GenericActuator class defines delay(). This means that the only way we can call delay() is if we already have a GenericActuator instance.

In short, the tween() function has to be completely done before you can specify a delay. Since the tween() function checks for conflicts, there’s no way to take the delay into account.

Also potentially slower. If you check for conflicts during the tween() function, you have to check the new tween against each of the old ones. If you check for conflicts when the tweens update, you have to check every tween against every other tween, every single frame.

Uh oh, the scheduler looks pretty rigid, now I understand why, why it is so efficient but limitative.
Actuate would need timelines, in order to define preventively the life of all tweens.