2 Replies Latest reply on Jan 6, 2011 2:04 PM by learner_doug

    Modify Elastic parameters

    learner_doug

      I'm useing "Elastic" as a easer for a Move animation.  The elastic bounces a bit too much for my taste.  Is there a failry easy way to modify the amount of "bouncing" it does?  (I'm going to post this as another question as well, regarding the public variables)

       

      mxml CODE to define animation/effect:

       

      <fx:Declarations>

       

      <s:Move id="moveRight"

      target="

      {blackBox}"

      duration="

      1200"

      xTo="

      {changeX}"

      yTo="

      {changeY}"

      easer="

      {stretchIt}" />

       

      <s:Elastic id="stretchIt" />

       

       

      </fx:Declarations>

       

      AS CODE:

      // incrementor variable to keep track of where the infoBox is currently

      [

      Bindable] public var currMS:uint = 1;

      [

      Bindable] public var changeX:Number = 0;

      [

      Bindable] public var changeY:Number = 0;

       

      // Keeps track of the current MileStone

       

      // main function including case statements

      public

       

       

      function chooseMS(event:MouseEvent):

      void

      {

       

       

      switch(currMS)

      {

       

      case 1: // to Milestone 2

       

      //blackBox.move(50,130);

      currMS++;

      changeX = 50;

      changeY = 130;

      wgText.text = ebs_newMS2;

      ow2.visible =

      true;

      wh2.visible =

      true;

       

      moveRight.end();

      moveRight.play();

       

       

      break;

       

      ...  the rest of the switched cases are here...

      }

      }

        • 1. Re: Modify Elastic parameters
          Gregory Lafrance Level 6

          I extended Elastic and override the ease() function.

           

          To achieve the effect you see in the sample code, I changed the amplitude to 1 and the period to .6.

           

          If this post answers your question or helps, please mark it as such. Thanks!

          http://www.stardustsystems.com
          Adobe Flex Development and Support Services

           

          ------------- myComponents/MyElastic.mxml -------------

          <?xml version="1.0" encoding="utf-8"?>
          <s:Elastic xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx">
            <fx:Script>
              <![CDATA[
                import mx.effects.easing.Elastic;
                
                private var totalChange:Number = 1;
                private var duration:Number = 1;
                private var amplitude:Number = 1;
                private var period:Number = .6;
                
                override public function ease(fraction:Number):Number
                {
                  return mx.effects.easing.Elastic.easeOut(fraction, 0, 
                    totalChange, duration, amplitude, period);
                }
              ]]>
            </fx:Script>
          </s:Elastic>
          


          ------------- test.mxml (main app) -----------------

          <?xml version="1.0"?>
          <s:Application
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:comp="myComponents.*">  
            <fx:Declarations>
              <s:Bounce id="bounceEasing"/>
              <comp:MyElastic id="elasticEasing"/>
              <s:Move id="moveRight" target="{myImage}"
                xBy="500" duration="2000" easer="{elasticEasing}"/>
              <s:Move id="moveLeft" target="{myImage}" xBy="-500"
                duration="2000" easer="{bounceEasing}"/>
            </fx:Declarations>  
            <s:Panel id="examplePanel"
              title="Bounce and Elastic Effect Example"
              width="800" height="75%">
              <s:HGroup id="detailsBox" width="50%" top="5" left="5">
                <s:Label width="99%" color="blue"
                         text="Click the buttons to watch the effect."/>
                <s:Button label="Move Right" bottom="10" left="5" 
                          click="moveRight.end();moveRight.play();"/>      
                <s:Button label="Move Left" bottom="10" left="100" 
                          click="moveLeft.end();moveLeft.play();"/>
              </s:HGroup>    
              <mx:Image id="myImage" top="40" width="200"
                        source="@Embed(source='assets/logo.jpg')"/>    
            </s:Panel>
          </s:Application>
          
          • 2. Re: Modify Elastic parameters
            learner_doug Level 1

            Took me a while to digest this.  Thanks very much - very nice material.