8 Replies Latest reply on Aug 17, 2011 8:04 AM by FM_Flame

    Animate Color in Color Transform

    CrimsonBruin

      Hello,

       

      I'm trying to animate ColorTransform.color:  There is no animation and the color is not changed for me.  Has anyone used this?

       

       

       

      var animateColor:AnimateColor = new AnimateColor();

      animateColor.target = _reflection.transform.colorTransform.color;

      animateColor.colorFrom = 9868950

      animateColor.colorTo = 0;

       

      //animateColor.interpolator = RGBInterpolator.getInstance();

      animateColor.play();

       

      Thanks!

        • 1. Re: Animate Color in Color Transform
          Shongrunden Adobe Employee

          I think you might be missing setting the colorPropertyName, here is a simple example of how to use AnimateColor:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
              <fx:Script>
                  <![CDATA[
                      import spark.effects.AnimateColor;
                      protected function click():void {
                          var animateColor:AnimateColor = new AnimateColor();
                          animateColor.target = target;
                          animateColor.colorFrom = 0xFF0000;
                          animateColor.colorTo = 0x0000FF;
                          animateColor.colorPropertyName = "chromeColor";
                          animateColor.play();
                      }
                  ]]>
              </fx:Script>
             
              <s:Button id="target" label="play" click="click()" />
             
          </s:Application>
          • 2. Re: Animate Color in Color Transform
            CrimsonBruin Level 1

            Thanks, Shongrunden. I set the target as object.transform.colorTransform and then set the colorPropertyName to color and passed in hex values.  There is still no change, however.  Should I be able to animate colors in the ColorTransform object?

             

            Thanks!

            • 3. Re: Animate Color in Color Transform
              Shongrunden Adobe Employee

              I don't believe that use case is supported.  If you want to change a property of a colorTransform I believe you have to reapply the transform, see the example here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/ColorTransfo rm.html#includeExamplesSummary

              • 4. Re: Animate Color in Color Transform
                CrimsonBruin Level 1

                I can change the ColorTransform object without a problem, but I was hoping to animate the change. 

                 

                Thanks for your help, though!

                • 5. Re: Animate Color in Color Transform
                  Shongrunden Adobe Employee

                  AnimateColor won't do what you want since it's designed for convenience instead of power.  However it's possible to animate most anything with the new spark effects infrastructure.  Here is a sample application that uses a custom interpolator to animate setting the colorTransform matrix over time.

                   

                  Main.mxml:

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark">
                      <fx:Script>
                          <![CDATA[
                              import mx.core.UIComponent;
                             
                              import spark.effects.Animate;
                              import spark.effects.animation.MotionPath;
                              import spark.effects.animation.SimpleMotionPath;
                             
                              protected function animateColorTransform(target:UIComponent, colorTo:Number):void {
                                  // figure out what to animate from and to
                                  var startColorTransform:ColorTransform = target.transform.colorTransform;
                                  var endColorTransform:ColorTransform = new ColorTransform();
                                  endColorTransform.color = colorTo;
                                 
                                  // setup a simple motion path
                                  var smp:SimpleMotionPath = new SimpleMotionPath();
                                  smp.property = "colorTransform";
                                  smp.valueFrom = startColorTransform;
                                  smp.valueTo = endColorTransform;
                                 
                                  // setup + play the animation of that colorTransform property
                                  var animate:Animate = new Animate();
                                  animate.target = target.transform;
                                  animate.motionPaths = new Vector.<MotionPath>();
                                  animate.motionPaths.push(smp);
                                  animate.interpolator = new MyInterpolator();
                                  animate.play();
                              }
                          ]]>
                      </fx:Script>
                     
                      <s:Button id="myBtn" label="animate" click="animateColorTransform(myBtn, 0xFF0000)" />
                     
                  </s:Application>

                   

                  MyInterpolator.as:

                   

                  package
                  {
                      import flash.geom.ColorTransform;
                      import spark.effects.interpolation.IInterpolator;

                   

                      public class MyInterpolator implements IInterpolator {  
                          public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object {
                              // Quick test for start or end
                              if (fraction == 0)
                                  return startValue;
                              else if (fraction == 1)
                                  return endValue;

                   

                              // figure out what to return in between the start and end
                              var startColorTransform:ColorTransform = startValue as ColorTransform;
                              var endColorTransform:ColorTransform = endValue as ColorTransform;
                              var colorDiff:Number = endColorTransform.color - startColorTransform.color;

                   

                              var intermediateColorTransform:ColorTransform = new ColorTransform();
                             
                              // This just naively picks a color, you might want to look at how
                              // spark.effects.interpolation.RGBInterpolator works to get something smoother
                              intermediateColorTransform.color = colorDiff * fraction;
                             
                              return intermediateColorTransform;
                          }

                   

                          public function increment(baseValue:Object, incrementValue:Object):Object {
                              return null; // TODO: Implement to support valueBy
                          }
                         
                          public function decrement(baseValue:Object, decrementValue:Object):Object {
                              return null; // TODO: Implement to support valueBy
                          }
                      }
                  }

                  • 6. Re: Animate Color in Color Transform
                    CrimsonBruin Level 1

                    Thank you!!!  I will try this out a bit later and report back.

                    • 7. Re: Animate Color in Color Transform
                      CrimsonBruin Level 1

                      I actually needed to animate two things simultaneously... a 3D rotation and a ColorTransform on the same object.  Using the effects as they currently stand, it didn't work, because I needed to change 6 of the ColorTransform values in my animation and the effects animate on a single property.  Animating on the color property did not work because my start and end values change the multipliers and offsets for each of the R, G and B channels. 

                       

                      I was looking around in the code and found this function:

                       

                      Color.interpolateTransform

                       

                      You pass it starting and ending ColorTransform objects and the percentage of change you want.

                       

                      So, I set up a listener for ENTER_FRAME.  Every time a frame is entered, I call interpolateTransform and I set my values of rotationX and rotationY (incrementing or decrementing by 1).  When I reach my target angle I remove the listener.

                       

                      My object rotates and its ColorTransform is changed simultaneously.

                      • 8. Re: Animate Color in Color Transform
                        FM_Flame Level 1

                        Hi Shongrunden, could you please show us how to do the same thing in mxml, I am having difficulties how to set the different colorTransform for each state...