1 Reply Latest reply on Oct 9, 2009 3:21 PM by Chet Haase

    Tween a HSlider on TextInput change?

    saveth Level 1

      I'm trying to figure out how to get a tween to happen instead of a snap when you have a TextInput updating the HSlider position. One example that comes to mind is TurboTaxes TaxCaster tool. Any ideas would be greatly appreciated.

       

      http://turbotax.intuit.com/tax-tools/

       

      Current Code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
       <fx:Script>
       <![CDATA[
       import spark.events.TextOperationEvent;
      
       protected function wagesTextInput_changeHandler(event:TextOperationEvent):void
       {
       wagesHSlider.value = Number(wagesTextInput.text);
       }
      
      
       protected function wagesHSlider_changeHandler(event:Event):void
       {
       wagesTextInput.text = String(wagesHSlider.value);
       }
      
       ]]>
       </fx:Script>
       <fx:Declarations>
       <!-- Place non-visual elements (e.g., services, value objects) here -->
       </fx:Declarations>
       <s:layout>
       <s:VerticalLayout />
       </s:layout>
       <s:HSlider change="wagesHSlider_changeHandler(event)" id="wagesHSlider" maximum="150000" minimum="0" snapInterval="1000" />
       <s:TextInput change="wagesTextInput_changeHandler(event)" id="wagesTextInput" />
      </s:Application>
      

       

      Thanks,

      Brian

        • 1. Re: Tween a HSlider on TextInput change?
          Chet Haase Level 3

          Hi Brian,

           

          Slider has animations running on it through user interaction (like clicking on the track), but if you want it to animate based on programmatically changing it, you'll need to set up a simple animation to change the value over time.

           

          Here's a quick take on it. Note that I set the event handler for the TextInput to 'enter' to avoid spawning the animation with each keystroke ('change' fires with every change, not just when you're done entering a number). There are various ways to go about this, including using the lower-level Animation class to calculate values, but using Animate like this seems like a pretty easy way to do what you want. You'd probably want to add some niceties to this like stop()'ing the currently-playing animation when starting a new one (in case there's already one running) and having a smaller duration (or one based on distance instead of just a static value), but this should get you started.

           

          Chet.

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
              <fx:Declarations>
                  <s:Animate id="sliderAnim" target="{wagesHSlider}"/>
              </fx:Declarations>
              <fx:Script>
                  <![CDATA[
                      import spark.effects.animation.MotionPath;
                      import spark.effects.animation.SimpleMotionPath;
                      private function wagesTextInput_changeHandler(event:Event):void
                      {
                          var valueTo:Number = Number(wagesTextInput.text);
                          var motionPath:SimpleMotionPath = new SimpleMotionPath("value", null, valueTo);
                          sliderAnim.motionPaths = new <MotionPath>[motionPath];
                          sliderAnim.play();
                      }
                  ]]>
              </fx:Script>
              <s:VGroup>
              <s:HSlider id="wagesHSlider" maximum="100" minimum="0" snapInterval="1" value="50"/>
              <s:TextInput enter="wagesTextInput_changeHandler(event)" id="wagesTextInput" text="50"/>
              </s:VGroup> </s:Application>