n o t e 1 9 . c o m

Flex offers a number of different animation techniques. For my Route Player application, I wanted to offer an animation speed option so that when the user clicks on the Start button, the animation starts: the Flex horizontal slider moves to the right, the time-line on the elevation chart moves accordingly, and the Google map gets updated. To see what I mean, click on the thumbnail, and when the Flex application starts, click on the Start button. To make this all work, first you need to define a Flex Sequence control, and include an AnimateProperty that specifies the duration of the animation.

<mx:Sequence id="myMove" target="{slider}">
    <mx:AnimateProperty property="value"
      fromValue="{timeMin}"
      toValue="{timeMax}"
      duration="{selectedItem.data}" />
</mx:Sequence>

Next, you’ll need to extend the HSlider control and override the set value method. See the control Note19HSlider. This extension of HSlider, includes a callback function that is set to the method sliderMove, which gets called each time the value of the slider has been updated, this in turn updated the chart and the Google Map. The code for all of this is here.

Each time the value of the Slider changes, the following function gets called:

private function sliderMove(val:String):String {
  point0["x"] = val;
  point0["y"] = 0;
  point1["x"] = val;
  point1["y"] = elevationMax;
  // timeLineData is a Bindable object; the time line
  // on the elevation chart is dependent on this object.
  timeLineData.setItemAt(point0, 0);
  timeLineData.setItemAt(point1, 1);

  // Use binary search to find the closest elevation point to the
  // value of the slider

  var index : int = binarySearch(Number(val), 0, elevationData.length-1);
  var lat : Number = elevationData[index].lat;
  var lon : Number = elevationData[index].lon;

  // Update the Google map

  var u:URLRequest =
    new URLRequest("javascript:centerMap('" + lat + "','" + lon + "')");
  navigateToURL(u,"_self");

  return "Time: " + String(val);
}

The extension to the Slider is provided as an MXML file (Note19HSlider.mxml):

<mx:Script>
<![CDATA[
	public var callback : Function = null;

	override public function set value(val:Number):void {
		super.value = val;
                // callback is initialized to be the sliderMove function.
		callback(val);
	}
]]>
</mx:Script>

This entry was posted on November 24, 2007 at 12:29 am and is filed under Flex, Google, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.