Time Slider Widget Question

[TimHayes]

Is there a way to allow the user to manually use the Time Slider. Currently, it appears to be set to automatic, hit the play button and it goes. I am looking for a way for the user to use it like the Basemap Fader. One aerial photo fades into another.

[RobertScheitlin__GISP · Accepted solution]

Tim,

   You can just grab the slider and start dragging. But you have to release the slider thumb before the map update is done (liveDragging).

[RobertScheitlin__GISP]

Tim,

   Actually you can add LiveDragging with a simple Skin Change. Do you work with the source code?

[TimHayes]

Yes, I work with Source Code. What is your idea?

[RobertScheitlin__GISP]

Tim,

   It is a simple mod. In the TimeWidget set the skinClass on the TimeSlider component to this modified skin:

<?xml version="1.0" encoding="utf-8"?>
<!--
    Copyright (c) 2010 ESRI

    All rights reserved under the copyright laws of the United States
    and applicable international laws, treaties, and conventions.

    You may freely redistribute and use this sample code, with or
    without modification, provided you include the original copyright
    notice and use restrictions.

    See use restrictions in use_restrictions.txt.
-->
<!---
    The default skin class for the TimeSlider component.
    <p><b>Since:</b> ArcGIS API for Flex 2.0</p>
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <!-- host component -->
    <fx:Metadata>
        /**
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("com.esri.ags.components.TimeSlider")]
    </fx:Metadata>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>

    <fx:Declarations>
        <!--- @private -->
        <mx:DateFormatter id="dateFormatter" formatString="{resourceManager.getString('ESRIMessages', 'timeSliderDateFormatString')}"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            private function dataTipFormatter(value:Number):String
            {
                return dateFormatter.format(hostComponent.timeStops[value]);
            }
        ]]>
    </fx:Script>

    <!--
         <s:Button id="playButton"
         enabled.disabled="false"
         label="{resourceManager.getString('ESRIMessages','timeSliderPlay')}"/>

         <s:Button id="pauseButton"
         enabled.disabled="false"
         label="{resourceManager.getString('ESRIMessages','timeSliderPause')}"/>
    -->

    <!--- ToggleButton to toggle between play pause modes. -->
    <s:ToggleButton id="playPauseButton"
                    enabled.disabled="false"
                    skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin"/>

    <!--- The HSlider control to select a time stop by moving the slider thumb(s) between the end points of the slider track. -->
    <mx:HSlider id="slider"
                width="100%" liveDragging="true"
                dataTipFormatFunction="dataTipFormatter"
                enabled.disabled="false"
                showDataTip="{hostComponent.timeStops != null}"
                showTrackHighlight="{!(hostComponent.thumbCount == 1 &amp;&amp; hostComponent.singleThumbAsTimeInstant)}"
                tickInterval="1"/>

    <!--- Button to go to the previous time stop. -->
    <s:Button id="previousButton"
              enabled.disabled="false"
              skinClass="com.esri.ags.skins.TimeSliderPreviousButtonSkin"/>

    <!--- Button to go to the next time stop. -->
    <s:Button id="nextButton"
              enabled.disabled="false"
              skinClass="com.esri.ags.skins.TimeSliderNextButtonSkin"/>

</s:Skin>