TimeSlider - getting observations to fade in and out

Question

I have a time layer with slider - what I want to do is fade in and out the observations so it is a smooth animation - can anyone help me out with this? I need each time extent to represent one time instance, but to fade in and out nicely. (I have played around with TemporalRenderers but can't seem to get the effect I need.) Any help much appreciated! Cheers, Inga protected function featurelayer1_loadHandler(event:LayerEvent):void { var ti:TimeInfo = FeatureLayer(event.layer).layerDetails.timeInfo; myTimeSlider.createTimeStopsByTimeInterval(ti.timeExtent, ti.timeInterval, ti.timeIntervalUnits);} . . . ...

ChristopherBlinn1 · Answer

This is great! You answered all of the quirky things I could not figure out.  Thank you!!

GregoryKramida · Answer

Okay guys, it's not going to be very easy, but here's one way to do it:

There's a TimeExtentEvent.TIME_EXTENT_CHANGE event that your Map will trigger every time the extent changes.

Now, my way of doing the fading would be, instead of using TemporalRenderer, to extend the Symbol class (if your data is lines, the LineSymbol, if your data is points, the PointSymbol, etc.).

Inside my custom symbol I would then override the draw function:override public function draw(sprite:Sprite, geometry:Geometry, attributes:Object, map:Map):void {...}

In this function, I would get the current timeExtent from the map (it has this as a public property, which is updated if there's a slider associated with the map) and, based on the passed-in attributes, one of which is the time-field of your object, determine whether to render it or not at this point.

To make the transition points, you have to check whether the object has been previously visible. I think you can do this by checking the sprite.visible property and updating it's value if it needs to be changed, but I'm not sure.

If the object is at a transition point (i.e. from hidden to visible), I would do the following:* set sprite.alpha to the proper value (for the example case, 0)
* set sprite.visible to true
* draw the sprite using the super.draw(...) function of your Symbol object with the same arguments,
* create a Timer object with a certain repeat count, whose "timer" event triggers the sprite.alpha to change (in this case, to grow) by some delta every 50 or so milliseconds. You'll have to pass the sprite as a token into your callback function so it knows which sprite to fade in or out.

This should make your symbols fade in and out smoothly with time slider changes. Hope this helps...

Finally, you'll need to find a way to trigger your symbol's dispatchEventChange() function to the Map's TimeExtentEvent.TIME_EXTENT_CHANGE event. I believe you can do it by adding an event listener to your symbol upon construction, but I'm not entirely certain. I'll get back to you on that because I'm actually doing something like that right now in my app.

P.S. Okay, yes, you can do it, but you have to add the event listener to the map. What I did was, I used a HashTable of maps, and, inside my draw function, I added the map if it wasn't already in the HashTable, and I added an event listener to the map like this:
if (!maps.contains(map)) {
 maps.addItem(map);
 map.addEventListener(TimeExtentEvent.TIME_EXTENT_CHANGE, this.refresh);
}

where the refresh function of my Symbol class is:

protected function refresh(event:Event = null):void {
 this.dispatchEventChange();
}

You can go for a more lightweight solution by just adding the event listener in the overriden initialize method, where your symbol receives the map for the first time.

ChristopherBlinn1 · Answer

Hello,

I see it has been awhile since you posted, but did you have any luck with this? I too am trying to add a fading animation to my time enabled layers.

This would be a great add-in functionality for the time slider widget; different animation types...