6 Replies Latest reply on Mar 16, 2011 1:17 AM by EricJ32

    Fade with keyframes?

    EricJ32 Level 1

      Hi,

       

      I have an animation which moves two elements on an ellipse, scaling to give an effect of one moving backwards behind the other. I've done this with keyframes:

       

              <fx:Vector id="frontToBackPaths" type="spark.effects.animation.MotionPath">
                  <s:MotionPath id="frontToBackX" property="x" />
                  <s:MotionPath id="frontToBackY" property="y" />
                  <s:MotionPath id="frontToBackScaleX" property="scaleX" />
                  <s:MotionPath id="frontToBackScaleY" property="scaleY" />
              </fx:Vector>

       

                      frontToBackX.keyframes = new Vector.<Keyframe>();
                      frontToBackY.keyframes = new Vector.<Keyframe>();
                      frontToBackScaleX.keyframes = new Vector.<Keyframe>();
                      frontToBackScaleY.keyframes = new Vector.<Keyframe>();
                     
                      //moving the front container back
                      for(i = frontDegree + 359; i>= backDegree; i--)
                      {
                         
                          frontToBackX.keyframes[frame - 1] = new Keyframe(frameTime * frame, moveXTo(i));
                          frontToBackY.keyframes[frame - 1] = new Keyframe(frameTime * frame, moveYTo(i));
                          frontToBackScaleX.keyframes[frame - 1] = new Keyframe(frameTime * frame, scaleTo(i));
                          frontToBackScaleY.keyframes[frame - 1] = new Keyframe(frameTime * frame, scaleTo(i));
                          frontToBackAlpha.keyframes[frame - 1] = new Keyframe(frameTime * frame, alphaTo(i));
                          if(i == 360)
                              timeToSwap = frameTime * frame;
                         
                          frame++;
                         
                      }

       

      //where the move and scale methods define the path of the ellipse:

                  private function moveXTo(angle:Number):Number
                  {
                      return ellipse.x + ellipseA - (containerWidth/2) + (ellipseA * Math.cos(angle * Math.PI/180));
                  }
                 
                  private function moveYTo(angle:Number):Number
                  {
                      return ellipse.y + ellipseB - (containerHeight/2) + (ellipseB * Math.sin(angle * Math.PI/180)) + (containerHeight - (scaleTo(angle) * containerHeight / 2));
                  }
                 
                  private function scaleTo(angle:Number):Number
                  {
                      return 1 - (Math.abs((ellipseA * Math.sin(angle * Math.PI/180)) - ellipseA) /  (1/scaleBack * 2 * ellipseA));
                  }

       

       

      This works fine, but I would also like to add an alpha fade which works similarly: ie it's not a linear fade, but rather uses the same maths as the scaleTo method to work out what the alpha should be at each keyframe.

       

      Is this possible?

       

      Thanks

        • 1. Re: Fade with keyframes?
          Claudiu Ursica Level 4

          Does your animation play indefinitely? If not you can precalculate alpha values

          for different time values, fill-up the vectors set the property to alpha and

          play it...

           

          C

          • 2. Re: Fade with keyframes?
            EricJ32 Level 1

            No, the animation plays once when a user clicks the back element, to bring it forward.

             

            I've tried a simple version of a fade with keyframes but clicking the button doesn't do anything...

             

                    <fx:Vector id="alphaPaths" type="spark.effects.animation.MotionPath">
                        <s:MotionPath id="alphaPath" property="alphaTo">
                            <s:Keyframe time="100" value="0.9" />
                            <s:Keyframe time="500" value="0.5" />
                            <s:Keyframe time="1000" value="0.3" />
                            <s:Keyframe time="1500" value="0" />
                        </s:MotionPath>
                    </fx:Vector>
                   
                    <s:Fade id="fade"
                            target="{fr}"
                            motionPaths="{alphaPaths}" />

             

             

                <s:Label id="fr"
                         text="This text should fade"
                         fontSize="14" click="fade.play()" />

             

            The text doesn't fade at all.

            • 3. Re: Fade with keyframes?
              Claudiu Ursica Level 4

              Should't you be fading the alpha property?

              • 4. Re: Fade with keyframes?
                EricJ32 Level 1

                I tried both "alpha" and "alphaTo" and neither work.

                • 5. Re: Fade with keyframes?
                  Claudiu Ursica Level 4

                  This is weird

                   

                  I have this in sent emails as a reply you instead of the alpha reply...

                   

                    <fx:Vector id="alphaPaths" type="spark.effects.animation.MotionPath">

                              <s:MotionPath id="alphaPath" property="alpha">

                                  <s:Keyframe time="100" value="0.9" />

                                  <s:Keyframe time="500" value="0.5" />

                                  <s:Keyframe time="1000" value="0.3" />

                                  <s:Keyframe time="1500" value="0" />

                              </s:MotionPath>

                           </fx:Vector>

                           

                          <s:Animate id="fade"

                              target=""

                              motionPaths="" />

                   

                   

                  This works, tried it earlier today and reply with it. Not sure how the other

                  thing with alpha got posted instead ...

                   

                  C

                  • 6. Re: Fade with keyframes?
                    EricJ32 Level 1

                    Excellent. The difference that worked was using <s:Animate ... instead of <s:Fade ...

                     

                    Thanks!