2 Replies Latest reply on Sep 10, 2011 12:26 PM by Shongrunden

    Animate in custom layout.

    Nathan108

      Hi,

       

      I would like some help regarding the following code please:

       

       

      package

      {

      import flash.events.Event;

      import flash.events.MouseEvent;

      import mx.graphics.SolidColor;

      import spark.components.BorderContainer;

      import spark.components.Button;

      import spark.components.Group;

      import spark.effects.Animate;

      import spark.effects.animation.MotionPath;

      import spark.effects.animation.SimpleMotionPath;

       

       

      public class TestGroup extends Group

      {

      private var anim:Animate;

      private var bc1:BorderContainer;

      private var bc2:BorderContainer;

      private var btn:Button;

       

      public function TestGroup()

      {

      super();

      }

       

      override protected function createChildren():void

      {

      super.createChildren();

       

      bc1 = new BorderContainer();

      bc1.backgroundFill = new SolidColor(0);

      this.addElement(bc1);

       

      btn = new Button();

      btn.label = "test";

      btn.addEventListener(MouseEvent.CLICK, test_clickHandler, false, 0, true);

      bc1.addElement(btn);

       

      bc2 = new BorderContainer();

      bc2.backgroundFill = new SolidColor(0x7A7A7A);

      this.addElement(bc2);

      }

       

      override protected function updateDisplayList(unscaledWidth:Number,

      unscaledHeight:Number):void

      {

      super.updateDisplayList(unscaledWidth, unscaledHeight);

       

      this.width = unscaledWidth;

      this.height = unscaledHeight;

       

      // Size everything.

      bc1.setActualSize(this.width, 50);

      bc2.setActualSize(this.width, this.height);

       

      // Move everything.

      btn.x = 100;

      bc1.move(0, 0);

      bc2.move(0, bc1.height);

      }

       

      private function test_clickHandler(event:Event = null):void

      {

      anim = new Animate(bc2);

      anim.disableLayout = true;

       

      var xSMP:SimpleMotionPath = new SimpleMotionPath("y", bc2.y, 100);

      var widthSMP:SimpleMotionPath = new SimpleMotionPath("width", bc2.width, 225);

      anim.motionPaths = new <MotionPath>[xSMP, widthSMP];

      anim.play();

      }

      }

       

      }

       

       

       

      The animation "anim" does not play, from my understanding this is due to the fact I am setting the size and position of "bc2" in updateDisplayList (if the setActualSize and move of bc2 are commented the animation plays).

      What I do not understand is why is the updateDisplayList called even though disableLayout has been set to true?

      What is the best way to handle this? (set the size and position in createChildren...?)