Add tweens to timeline with interval

[Wiplash]

Hi there,

 

I am trying to make a little game whereby you can spray blobs all over the screen. When the time runs out I want the whole animation to play in reverse. Each time a blob is fired it adds it to the timeline and then at the end I have a timeline.reverse() command but it is working really bizarrely.

 

import com.greensock.*;
import com.greensock.easing.*

myRoot = this;

genSpeed = 3000;
flySpeed = 0.5;
cP = 1;

var mouseListener:Object = new Object();

mouseListener.onMouseDown = function() {
genParticle();
genTimer = setInterval(genParticle, genSpeed);
}

mouseListener.onMouseUp = function() {
//clearInterval(genTimer);
}

mouseListener.onMouseMove = function() {
distanceToFly = Math.floor(Math.sqrt((emitter._x - end_point._x) * (emitter._x - end_point._x) + (emitter._y - end_point._y) * (emitter._y - end_point._y)));
flySpeed = distanceToFly / 150
end_point._x = _xmouse;
end_point._y = _ymouse;
}

Mouse.addListener(mouseListener);

var myTimeline:TimelineMax = new TimelineMax();

function genParticle(){
particle_holder.attachMovie("particle", "particle" + cP, cP+1)
particle_holder["particle" + cP]._x = emitter._x;
particle_holder["particle" + cP]._y = emitter._y;
myTimeline.insert(new TweenMax(particle_holder["particle" + cP], flySpeed, {_x:end_point._x, _y: end_point._y}));
cP++;
}

gameOverTimer = setInterval(gameOver, 10000);

function gameOver(){
trace("game over");
Mouse.removeListener(mouseListener);
clearInterval(genTimer);
clearInterval(gameOverTimer);
myTimeline.reverse();
}

 

Please help. I tried using append but that isn't right either. I think maybe I can't add this many tweens to a timeline this fast. I would like the tweens to reverse with the same timing as they are fired.

 

You can see how it works with this code here:-

 

http://www.ourtestsite.org/test/particle_test.html

 

Thanks

 

Will

[GreenSock]

You're inserting all your tweens at the same spot on the timeline - the very beginning. So for example, let's say you create a TimelineMax instance and then immediately insert() a 5-second tween. Great. Then 1-second later, you insert() another 5-second tween without defining the insertion point (the default is always 0 which is the beginning). Now the TimelineMax is currently rendering at the 1-second point which means both of your tweens will render their 1-second position. It sounds like you were expecting that when you insert() a tween it will automatically force the insertion point to be whatever the currentTime is in the TimelineMax. Not so. Another thing to watch out for is that currentTime can NEVER exceed the duration of the TimelineMax (it shouldn't because that would be illogical). So if you insert() a 5-second tween and then check the currentTime 10 seconds later, it will be 5 since that's the end of the TimelineMax.

 

The solution is pretty simple, though, once you understand how things work. Just use getTimer() to figure out your insertion points in the timeline and make sure you play() after you insert each time in case you're inserting AFTER the entire timeline had finished. Like:

 

var tl:TimelineMax = new TimelineMax({paused:true});
var startTime:Number; 

mouseListener.onMouseDown = function():Void {
  startTime = getTimer();
  genParticle();
  genTimer = setInterval(genParticle, genSpeed);
}

function genParticle():Void {
  var insertTime:Number = (getTimer() - startTime) / 1000;
  tl.insert(new TweenMax(...), insertTime);
  tl.play(); 
}

 

If you haven't watched the TimelineLite/Max Basics video, please do so: http://www.greensock.com/timeline-basics/

[Wiplash]

Hi there,

 

Thats absolutely brilliant thank you. It's true I was assuming that insert would add the tween at whatever time had expired already. I'm glad that tweenLite can do this it is as amazing as I had hoped. I'll have to figure out how this goes in my code properly later but initial tests looked good.

 

Thanks again

 

Will

 

http://www.williamjane.com

[Wiplash]

Hello there,

 

I have been trying to get your code to work for over 3 weeks now on and off and I'm really starting to pull my hair out. I tried the code above and it didn't work so I tried to work out what it is I had to do and then implimented it myself but now I get completely unpredictable results. The code I have now is as follows.

 

import com.greensock.*;
import com.greensock.easing.*

var tl:TimelineMax = new TimelineMax({paused:true});
var	startTime:Number = (getTimer() / 1000);

var myRoot = this;

var genSpeed:Number = 300;
var flySpeed:Number = 0.5;
var lag:Number = 0.5;
var cP:Number = 0;

var mouseListener:Object = new Object();

mouseListener.onMouseDown = function() {
genParticle();
genTimer = setInterval(genParticle, genSpeed);
}

mouseListener.onMouseUp = function() {
clearInterval(genTimer);
}

mouseListener.onMouseMove = function() {
distanceToFly = Math.floor(Math.sqrt((emitter._x - end_point._x) * (emitter._x - end_point._x) + (emitter._y - end_point._y) * (emitter._y - end_point._y)));
flySpeed = distanceToFly / 150
end_point._x = _xmouse;
end_point._y = _ymouse;
}

Mouse.addListener(mouseListener);

function genParticle(){
particle_holder.attachMovie("particle", "particle" + cP, cP+1)
particle_holder["particle" + cP]._x = emitter._x;
particle_holder["particle" + cP]._y = emitter._y;
var insertTime:Number = (getTimer() / 1000) - startTime;
tl.insert(new TweenMax(particle_holder["particle" + cP], flySpeed, {_x:end_point._x, _y: end_point._y}), insertTime);
tl.play();
cP++;
}

gameOverTimer = setInterval(gameOver, 10000);

function gameOver(){
trace("game over");
Mouse.removeListener(mouseListener);
clearInterval(genTimer);
clearInterval(gameOverTimer);
tl.reverse();
}

 

Example

http://www.ourtestsite.org/test/particle_test_v2.html

 

Fla to download

http://www.ourtestsite.org/test/particle_test_v2.fla

 

I really appreciate your help as once I know this it will help with every other project I do. I also signed up as a paid member after last time because the response was so quick.

 

Thanks again

 

Will

[GreenSock]

You were setting the startTime in the wrong place and there were a few other tweaks necessary. Here's the fixed code:

 

import com.greensock.*;
import com.greensock.easing.*

var tl:TimelineMax;
var	startTime:Number;
var gameRunning:Boolean;

var myRoot = this;

var genSpeed:Number = 300;
var flySpeed:Number = 0.5;
var lag:Number = 0.5;
var cP:Number = 0;

function startGame():Void {
tl = new TimelineMax();
startTime = getTimer() / 1000;
gameRunning = true;
}

var mouseListener:Object = new Object();

mouseListener.onMouseDown = function() {
if (!gameRunning) {
	startGame();
}
genParticle();
genTimer = setInterval(genParticle, genSpeed);
}

mouseListener.onMouseUp = function() {
clearInterval(genTimer);
}

mouseListener.onMouseMove = function() {
distanceToFly = Math.floor(Math.sqrt((emitter._x - end_point._x) * (emitter._x - end_point._x) + (emitter._y - end_point._y) * (emitter._y - end_point._y)));
flySpeed = distanceToFly / 150
end_point._x = _xmouse;
end_point._y = _ymouse;
}

Mouse.addListener(mouseListener);

function genParticle(){
particle_holder.attachMovie("particle", "particle" + cP, cP+1)
particle_holder["particle" + cP]._x = emitter._x;
particle_holder["particle" + cP]._y = emitter._y;
var insertTime:Number = (getTimer() / 1000) - startTime;
tl.insert(new TweenMax(particle_holder["particle" + cP], flySpeed, {_x:end_point._x, _y: end_point._y}), insertTime);
cP++;
}

gameOverTimer = setInterval(gameOver, 10000);

function gameOver(){
trace("game over");
Mouse.removeListener(mouseListener);
clearInterval(genTimer);
clearInterval(gameOverTimer);
gameRunning = false;
tl.reverse();
}