Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dominggi

TimelineMax with +500 tweens stops rendering when going back

Recommended Posts

im currently creating an interactive infographic about all flights from and to Amsterdam Airport (schiphol).

 

data i'm using is coming from

http://schiphol.dutchplanespotters.nl

 

as you can see, these are about 500 flights. This means i have around 500 TweenMax objects in my 'main' TimelineMax. (actually main timeline -> flight-timeline -> tweenLite)

 

I attached a time-slider and set this to control the main timeline.

Now, the problem is - when i let it play for about till noon (about 12seconds), and then 'slide' back in time, some airplanes (Tweens actually) are not being updated.

I already tried mainTimeline.goto, .gotoAndStop, .gotoAndPlay, with and without supressEvents set to true, but it seems to me tweens are just not being updated.

 

Could someone PLEASE help me with this??

 

you can test it your self at:

http://dominggus.nl/school/minor_vi/opdr5/

 

edit:

here's a piece of code from the for loop for creating each tween:

airplaneTimeline = new TimelineLite();
			arrivalTime = convertTimeToSeconds(airplane.flight.eta);

			airplaneTimeline.append(new TweenLite(airplane, 3, {x:gatePoint.x, y:gatePoint.y, onUpdate:airplane.faceTowards, onUpdateParams:[gatePoint.x, gatePoint.y]}));
			airplaneTimeline.append(new TweenLite(airplane, .5, {rotation:parking.rotation + 105}));
			if (isDeparture)
			{
				departurePoint = calculateMarginPointByLngLat(airplane.flight.departureLng, airplane.flight.departureLat);
				mainTimeline.insert(new TweenLite(airplane, 3, {x:departurePoint.x, y:departurePoint.y, onUpdate:airplane.faceTowards, onUpdateParams:[departurePoint.x, departurePoint.y]}), airplane.flight.etd);
			}
			else
			{
				airplaneTimeline.append(new TweenLite(airplane, .5, {alpha:0}));
			}

			mainTimeline.insert(airplaneTimeline, airplane.flight.eta);

Link to comment
Share on other sites

hmmm.

 

Have you tested with 10 tweens? does it work as expected?

 

I really don't think its the number of tweens that is the issue. I just made a quick example of a timeline that contains 5000 nested timelines and it works fine. timeline5000.fla.zip

 

I did this more out of personal curiosity than to be a smarty pants.

 

My gut tells me that it may have more to due with your slider code than the TimelineMax. It appears the slider is constantly "fighting" my dragging.

 

I have to say this is one of the most hardcore and impressive implementation of TimelineLite/Max that I have seen and I think it is incredibly cool.

I would love to see it working as planned.

 

for now I would suggest trying with just a few tweens to rule out that "too many tweens are causing the problem".

Also, can you post the code related to the slider and how it controls the timeline?

 

If you take the slider totally out of the equation and play the timeline in reverse does it work?

 

var mainTimeline:TimelineMax = new TimelineMax({repeat:1, yoyo:true}) 

 

also also, I'm wondering if you really need to change the rotation of the plane constantly with onUpdate, wouldn't just doing it once with onStart be enough? I don't think is causing your problem, but it might be more efficient.

 

----

 

the one thing that confuses me, and you really don't need to explain it, is why the majority of of your airplane animation is happening inside of airplaineTimeline YET in the case of "isDeparture" you are inserting an airplane's animation into the mainTimeline at flight.etd AND also inserting the airplaneTimeline at flight.eta. I have no idea if this is the cause of your trouble and again, you don't need to justify it, I'm very impressed that what you have is working so well. Its just hard for me to wrap my head around exactly what is happening and whether or not there is some conflict in what might be happening inside or each airplaneTimeline and the mainTimeline.

Link to comment
Share on other sites

Yeah, it seems like there's something else going on in your code that might be causing the issue - very tough to troubleshoot without seeing all the code in context and being able to publish your FLA. I wonder if you're creating overlapping tweens somewhere in your code too that might be causing things to get killed because of overwriting. Totally a guess. Feel free to post your FLA (or PM it to me or Carl) so we can tinker.

 

I've had thousands of tweens in nested timelines too and was able to go forwards/backwards without any problems at all, so 500 should be a piece of cake :)

 

Your slider definitely seems to have problems. It doesn't want to cooperate with me when I try dragging.

Link to comment
Share on other sites

wow, this is interesting. I yoyo it now, and it happens too when yoyoing!

http://dominggus.nl/school/minor_vi/opdr5/yoyo/

 

the one thing that confuses me, and you really don't need to explain it, is why the majority of of your airplane animation is happening inside of airplaineTimeline YET in the case of "isDeparture" you are inserting an airplane's animation into the mainTimeline at flight.etd AND also inserting the airplaneTimeline at flight.eta. I have no idea if this is the cause of your trouble and again, you don't need to justify it, I'm very impressed that what you have is working so well. Its just hard for me to wrap my head around exactly what is happening and whether or not there is some conflict in what might be happening inside or each airplaneTimeline and the mainTimeline.

 

before this forloop, i create (24 + 12) * 60 labels for every 'minute, so that i can do

mainTimeline.insert(tween, flight.eta)

with flight.eta being the estimated time of arrival (a String i.e. "11:35")

because ALL flights are arrivals, but some will depart again too. I wanted those to departing flights to tween back off screen, it was easier to insert it in mainTimeline to a label with the flight's etd (est. time of depart) than to calculate the delay (arrivingTime - departTime)in seconds and putting this in the subtimeline (airplaneTimeline).

could be the issue though...

 

It actually isn't a fla, I'm using assets.fla to compile as an SWC, and am embedding it in a FDT Flex 4.5 project.

 

i'm currently thinking how to get this workingly in a fla...

Link to comment
Share on other sites

backpain-1292835351.jpg

 

IT WORKS!

 

Its just hard for me to wrap my head around exactly what is happening and whether or not there is some conflict in what might be happening inside or each airplaneTimeline and the mainTimeline.

I now calculate the delayTime and append the departing tween to the subTimeline and it works PERFECTLY!

 

departureDelay = flyingToGatesTimeline.getLabelTime(airplane.flight.etd) - flyingToGatesTimeline.getLabelTime(airplane.flight.eta);
airplaneTimeline.append(new TweenLite(airplane, 3, {x:departurePoint.x, y:departurePoint.y, delay:departureDelay, onUpdate:airplane.faceTowards, onUpdateParams[departurePoint.x, departurePoint.y]}));

 

http://dominggus.nl/school/minor_vi/opdr5/

 

fixed slider code now too, it works (almost)perfect - need more fps though ;)

bottomSliderGUI.timeSlider.addEventListener(SliderEvent.THUMB_DRAG, timeSliderChangeHandler);
bottomSliderGUI.timeSlider.addEventListener(SliderEvent.THUMB_PRESS, timeSliderChangeHandler);
bottomSliderGUI.timeSlider.addEventListener(SliderEvent.THUMB_RELEASE, timeSliderChangeHandler);
bottomSliderGUI.timeSlider.addEventListener(SliderEvent.CHANGE, timeSliderChangeHandler);


[..]

private function timeSliderChangeHandler(event:SliderEvent):void
{
switch(event.type)
{
	case SliderEvent.THUMB_DRAG:
		isDragging = true;
		mainTimeline.goto(event.value,false);
		break;

	case SliderEvent.THUMB_PRESS:
		isDragging = true;
		mainTimeline.gotoAndStop(event.value,false);
		break;

	case SliderEvent.THUMB_RELEASE:
		isDragging = false;
		mainTimeline.gotoAndPlay(event.value,false);
		break;

	case SliderEvent.CHANGE:
		if (isDragging)
		{
			mainTimeline.gotoAndStop(event.value,false);
		} 
		else
		{
			mainTimeline.gotoAndPlay(event.value,false);
		}
		break;
}
}

Link to comment
Share on other sites

I now calculate the delayTime and append the departing tween to the subTimeline and it works PERFECTLY!

 

Excellent! Glad to hear it. Feel free to post back here if you want to show this thing off when it launches. great work.

 

ps. got a good chuckle out of the "awwww yeeeaaahh" ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×