4 Replies Latest reply on Dec 19, 2010 12:46 PM by Shongrunden

    using Move function in parabolic function

    Guha2000

      I am looking at moving an object as a function of a quadratic equation- y=x*x

       

      Hence, need to be able to provide more than xfrom, yfrom and xTo and yTo - else it moves the object in a straight line from initial to final path. How do I provide the linkage? I am keen on using the Move vs changing the  x,y positions incrementally as the result is much smoother

        • 1. Re: using Move function in parabolic function
          drkstr_1 Level 4

          You can create a custom effect.

           

          More info here: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fc8.html

           

          I would also try looking at the source for the Move effect, and go from there.

          1 person found this helpful
          • 2. Re: using Move function in parabolic function
            Shongrunden Adobe Employee

            You might find it useful to break out the Move effect into two Animate effects, one for x and one for y.  You could then apply a different easer to each property.  For example:

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark">

             

                <fx:Script>
                    <![CDATA[
                        import mx.graphics.SolidColor;
                        import spark.primitives.Rect;
                       
                        [Bindable] public var moveXBy:Number = 10;

             

                        private function moveHandler():void {
                            // show the path taken
                            var newRect:Rect = new Rect();
                            newRect.fill = new SolidColor(0xFF0000);
                            newRect.width = newRect.height = 1;
                            newRect.x = target.x;
                            newRect.y = target.y;
                            showPathGroup.addElement(newRect);
                           
                            trace(myEffect.playheadTime+'\t'+target.x+'\t'+target.y);
                        }

             

                    ]]>
                </fx:Script>
               
                <fx:Declarations>
                    <s:Linear id="linearEase"/>
                    <s:Power id="powerEase" easeInFraction="1" exponent="2" />
                   
                    <s:Parallel id="myEffect">
                        <s:Animate target="{target}" easer="{linearEase}">
                            <s:SimpleMotionPath property="x" valueBy="{moveXBy}" />
                        </s:Animate>
                        <s:Animate target="{target}" easer="{powerEase}">
                            <s:SimpleMotionPath property="y" valueBy="{Math.pow(moveXBy, 2)}" />
                        </s:Animate>
                    </s:Parallel>
                </fx:Declarations>
                       
                <s:Group id="showPathGroup" />
                <s:Button id="target" label="play" click="myEffect.play()" move="moveHandler()"/>
               
            </s:Application>

            1 person found this helpful
            • 3. Re: using Move function in parabolic function
              Guha2000 Level 1

              Many Thanks, Shongrunden

               

              I did the following - does the job reasonably well- still not sure whether it does my parabolic function right- I am looking for something that can do

               

              x=a*t

              y=b*t-c*t*t

               

              How do I know the underlying function behind <s:Power easeInFraction=".5" exponent="2"> to tweak it just right?

               

              <s:Linear

               

              easeInFraction="0" easeOutFraction="0" id="linear"/>

               

              <s:Power easeInFraction=".5" exponent="2" id="power"/>

               

               

              <s:Parallel id="ballmove1" target="{car}">

               

               

               

                   <s:Animate easer="{linear}" duration="2500">

               

               

                        <s:SimpleMotionPath property="x" valueFrom="10" valueTo="400"/>

               

               

                   </s:Animate>

               

               

                   <s:Animate easer="{power}" duration="2500">

               

               

                        <s:SimpleMotionPath property="y" valueFrom="500" valueTo="10"/>

               

               

                       </s:Animate>

               

               

               

               

              </s:Parallel>

               

               

               

              <s:Parallel id="ballmove2" target="{car}">

               

               

               

                       <s:Animate easer="{linear}" duration="2500">

               

               

                            <s:SimpleMotionPath property="x" valueFrom="400" valueTo="800"/>

               

               

                       </s:Animate>

               

               

                   <s:Animate easer="{power}" duration="2500">

               

               

                        <s:SimpleMotionPath property="y" valueFrom="10" valueTo="500"/>

               

               

                   </s:Animate>

               

               

               

              </s:Parallel>

              • 4. Re: using Move function in parabolic function
                Shongrunden Adobe Employee

                easeInFraction is the fraction of the duration of the effect that is spent easing in.  If you set it to 0 then you won't get any easing in, but all easing out.  If you set it to 1 you will get all easing in and no easing out.  If you set it to 0.5 you will get half and half, etc.  See the ASDoc for the easeInFraction property on spark.effects.easing.EaseInOutBase for further details.

                 

                Sounds like you might want to create your own easer class instead of using the simple Power easer.  Look at implementing spark.effects.easing.IEaser.