[SHOWCASE - Share what you've done]

an interactive infographic of all flights at Schiphol Amsterdam Airport

 

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

 

data information is realtime (!)

 

though, the time slider isn't, cpt. Obvious...

[TimelineMax with +500 tweens stops rendering when going back]

ok.

 

i'm done.

 

its now 08:35 in the morning, and i have not taken any sleep.

 

one does not simply

 

create a flawlessly working Flash-app in a day...

 

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

[Hover problem]

TweenMax is trying to tween the variable because it doesn't recognize the 'reverse' property.

 

try this:

mc.addEventListener(MouseEvent.ROLL_OVER, mcMouseHandler);
mc.addEventListener(MouseEvent.ROLL_OUT, mcMouseHandler);

 

function mcMouseHandler(event:MouseEvent):void
{
hoverTween = TweenMax.to(this, .5, {y:"-25", paused:true});
if (event.type == MouseEvent.ROLL_OUT)
{
	hoverTween.reverse(); 
} 
else
{
	hoverTween.play();
}
}

 

or a shorter if:

(event.type == MouseEvent.ROLL_OUT) ? alphaTween.reverse() : alphaTween.play();

[TimelineMax with +500 tweens stops rendering when going back]

 

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

[TimelineMax with +500 tweens stops rendering when going back]

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...

[Hover problem]

you should not do an addEventlistener each time you hover somewhere -these will all add up so this will trigger it twice/three times/4 times etc...

 

try copying those lines to outside of these functions.

[TimelineMax with +500 tweens stops rendering when going back]

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

[strange behaviour of textfield proxy]

I have extended TM so i can use Textfields that are scalable and resizable. I use a textfield IN a mc that is called through the flash library (as linkage class).

 

 

This worked fine, but i traced the displaylist and found an DisplayObject on the displaylist with name "__tmProxy3", but these are dislocated... I know these are textfield proxies that are used in TransformItem, but why aren't they removedProxy'ed? I also extended TransformItem (TextBoxTransformItems) and can override this createProxy, but I don't know when.

 

I need to get rid of these proxies, because displayobjects are dynamically loaded/saved, and I can not have any garbage on the displayList due to the zooming of the canvas.

 

When exactly are these proxies used and when can i remove them?

 

or, what is the cleanest way to use scalable AND resizable textfields in your opinion?