3 Replies Latest reply on Jan 30, 2007 2:49 AM by JaeWebb

    Programmatic Animation - Question About Timers & Display List

    JaeWebb
      I'm working on an AS3 animation project in Flex Builder. You can see my progress here... The white boxes are part of a mask that reveals the letters FWS underneath, each letter in thirds. Currently it is only set to reveal the first third of each letter.

      I'm getting a runtime error when removeChild() is called.

      quote:


      ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
      at flash.display::DisplayObjectContainer/removeChild()
      at FwsLogoAnime/onAnimeTimer()
      at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
      at flash.utils::Timer/flash.utils:Timer::tick()



      I don't understand why I'm getting the error. I've only invoked one display object so far - the main application MovieClip, FwsLogoAnime(). Every item in the display list is a child of the main movie. In addition, the masks are in fact removed from the display list, though not at the speed expected...* Could you help me understand and solve this runtime error? It is probably some basic concept I haven't mastered yet.

      * Seems related to Timer; I may have to make a separate post - let me know... My function onAnimeTimer() is meant to move each mask segment a distance of 1/10 its size in pixels per each Timer event. If the value is Timer(1000), then onAnimeTimer() should 'tick' each second. Thus, the mask should take 10 seconds to slide away then disappear from the Display List. Instead, the mask doesn't appear to slide; it just disappears... What am I doing wrong?

      quote:


      package {
      import flash.display.Shape;
      import flash.display.MovieClip;
      import flash.display.Loader;
      import flash.events.Event;
      import flash.net.URLRequest;
      import flash.display.Bitmap;
      import flash.display.BitmapData;
      import flash.display.StageScaleMode;
      import flash.display.StageAlign;
      import ascb.drawing.Pen;
      import flash.utils.Timer;
      import flash.events.TimerEvent;

      public class FwsLogoAnime extends MovieClip {

      private var _loader:Loader = new Loader();
      private var _fwsMaskF1:Shape = new Shape();
      private var _fwsMaskF2:Shape = new Shape();
      private var _fwsMaskF3:Shape = new Shape();
      private var _fwsMaskW1:Shape = new Shape();
      private var _fwsMaskW2:Shape = new Shape();
      private var _fwsMaskW3:Shape = new Shape();
      private var _fwsMaskS1:Shape = new Shape();
      private var _fwsMaskS2:Shape = new Shape();
      private var _fwsMaskS3:Shape = new Shape();
      private var _animeTimer:Timer = new Timer(1000);
      private var _moveDistF:Number = _fwsMaskF1.width / 10;
      private var _moveDistW:Number = _fwsMaskW1.height / 10;
      private var _moveDistS:Number = _fwsMaskS1.width /10;
      private var _widthOfF:Number = _fwsMaskF1.width;
      private var _heightOfW:Number = _fwsMaskW1.height;
      private var _widthOfS:Number = _fwsMaskS1.width;
      private var _origXF1:Number = 0;
      private var _origXS1:Number = 0;

      public function FwsLogoAnime() {
      setStageProperties();
      drawFwsMask();
      loadFwsText();
      showFwsText();
      }

      public function setStageProperties():void {
      stage.scaleMode = StageScaleMode.NO_SCALE;
      }

      public function drawFwsMask():void {
      var penF1:Pen = new Pen(_fwsMaskF1.graphics);
      penF1.beginFill(0xFFFFFF);
      penF1.drawRect(20, 85, 116, 24);
      penF1.endFill();

      var penF2:Pen = new Pen(_fwsMaskF2.graphics);
      penF2.beginFill(0xFFFFFF);
      penF2.drawRect(20, 100, 54, 60);
      penF2.endFill();

      var penF3:Pen = new Pen(_fwsMaskF3.graphics);
      penF3.beginFill(0xFFFFFF);
      penF3.drawRect(55, 110, 80, 24);
      penF3.endFill();

      var penW1:Pen = new Pen(_fwsMaskW1.graphics);
      penW1.beginFill(0xFFFFFF);
      penW1.drawRect(138, 85, 60, 76);
      penW1.endFill();

      var penW2:Pen = new Pen(_fwsMaskW2.graphics);
      penW2.beginFill(0xFFFFFF);
      penW2.drawRect(194, 85, 28, 76);
      penW2.endFill();

      var penW3:Pen = new Pen(_fwsMaskW3.graphics);
      penW3.beginFill(0xFFFFFF);
      penW3.drawRect(225, 85, 60, 76);
      penW3.endFill();

      var penS1:Pen = new Pen(_fwsMaskS1.graphics);
      penS1.beginFill(0xFFFFFF);
      penS1.drawRect(286, 85, 116, 24);
      penS1.endFill();

      var penS2:Pen = new Pen(_fwsMaskS2.graphics);
      penS2.beginFill(0xFFFFFF);
      penS2.drawRect(286, 110, 116, 24);
      penS2.endFill();

      var penS3:Pen = new Pen(_fwsMaskS3.graphics);
      penS3.beginFill(0xFFFFFF);
      penS3.drawRect(286, 135, 116, 26);
      penS3.endFill();

      }

      public function loadFwsText():void {
      _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
      _loader.load(new URLRequest("lib/FwsText.png"));
      }

      public function onLoaderComplete(event:Event):void {
      var fwsImage:Bitmap = Bitmap(_loader.content);
      addChild(fwsImage);
      addChild(_fwsMaskF1);
      addChild(_fwsMaskF2);
      addChild(_fwsMaskF3);
      addChild(_fwsMaskW1);
      addChild(_fwsMaskW2);
      addChild(_fwsMaskW3);
      addChild(_fwsMaskS1);
      addChild(_fwsMaskS2);
      addChild(_fwsMaskS3);
      }

      public function showFwsText():void {
      _origXF1 = _fwsMaskF1.x;
      _origXS1 = _fwsMaskS1.x;
      _animeTimer.addEventListener("timer", onAnimeTimer);
      _animeTimer.start();
      }

      public function onAnimeTimer(event:TimerEvent):void {

      _fwsMaskF1.x -= _moveDistF;
      if (_fwsMaskF1.x <= ((_widthOfF * -1) + _origXF1)) {
      removeChild(_fwsMaskF1);
      }

      _fwsMaskW1.y += _moveDistW;
      if (_fwsMaskW1.y >= (_heightOfW * 2)) {
      removeChild(_fwsMaskW1);
      }

      _fwsMaskS1.width -= _moveDistS;
      if (_fwsMaskS1.x <= (_origXS1 - _widthOfS)) {
      removeChild(_fwsMaskS1);
      }

      }
      }
      }




        • 1. Re: Programmatic Animation - Question About Timers &amp; Display List
          JaeWebb Level 1
          I got the runtime error to disappear but I don't know how exactly... When I first posted I only had one third of the mask animation in place. Since then I finished the other two thirds. I decided to organize by storing the mask-movement code from onAnimeTimer() into a function called revealText(), then to pass a numeric argument into revealText() to trigger one of the three mask-moving blocks of code as appropriate.

          I compiled and ran the swf after writing each block (...W1, S1, F2, W2, S2, etc.). The runtime error came back whenever I ran the swf without finishing a round of thirds (F1-W1-S1, F2-W2-S2, etc.).

          It works just fine now but I'd still like to know what was going on. If you know, please share. I'm going to restate my question about making the masks appear to slide again, since that's where I can still use some assistance:

          My functions onAnimeTimer() and revealText() are meant to move each mask segment a distance of 1/10 its size in pixels per each Timer event. If the value is Timer(1000), then onAnimeTimer() should 'tick' each second. Thus, the mask should take a total 10 seconds to slide away then disappear from the Display List. Instead, the mask doesn't appear to slide; it just disappears... What am I doing wrong?

          quote:


          package {
          import flash.display.Shape;
          import flash.display.MovieClip;
          import flash.display.Loader;
          import flash.events.Event;
          import flash.net.URLRequest;
          import flash.display.Bitmap;
          import flash.display.BitmapData;
          import flash.display.StageScaleMode;
          import flash.display.StageAlign;
          import ascb.drawing.Pen;
          import flash.utils.Timer;
          import flash.events.TimerEvent;

          public class FwsLogoAnime extends MovieClip {

          private var _loader:Loader = new Loader();
          private var _fwsMaskF1:Shape = new Shape();
          private var _fwsMaskF2:Shape = new Shape();
          private var _fwsMaskF3:Shape = new Shape();
          private var _fwsMaskW1:Shape = new Shape();
          private var _fwsMaskW2:Shape = new Shape();
          private var _fwsMaskW3:Shape = new Shape();
          private var _fwsMaskS1:Shape = new Shape();
          private var _fwsMaskS2:Shape = new Shape();
          private var _fwsMaskS3:Shape = new Shape();
          private var _animeTimer:Timer = new Timer(1000);
          private var _moveDistF:Number = _fwsMaskF1.width / 10;
          private var _moveDistW:Number = _fwsMaskW1.height / 10;
          private var _moveDistS:Number = _fwsMaskS1.width / 10;
          private var _moveDistF2:Number = _fwsMaskF2.height / 10;
          private var _moveDistF3:Number = _fwsMaskF3.height / 10;

          private var _widthOfF:Number = _fwsMaskF1.width;
          private var _heightOfW:Number = _fwsMaskW1.height;
          private var _widthOfS:Number = _fwsMaskS1.width;

          private var _heightOfF2:Number = _fwsMaskF2.height;

          private var _widthOfF3:Number = _fwsMaskF3.width;

          private var _origXF1:Number = 0;
          private var _origXS:Number = 0;
          private var _origXF3:Number = 0;
          private var _phase:Number = 0
          private var _updateCountdown:Number = 0;

          public function FwsLogoAnime() {
          setStageProperties();
          drawFwsMask();
          loadFwsText();
          showFwsLogo();
          }

          public function setStageProperties():void {
          stage.scaleMode = StageScaleMode.NO_SCALE;
          }

          public function drawFwsMask():void {
          var penF1:Pen = new Pen(_fwsMaskF1.graphics);
          penF1.beginFill(0xFFFFFF);
          penF1.drawRect(20, 85, 116, 24);
          penF1.endFill();

          var penF2:Pen = new Pen(_fwsMaskF2.graphics);
          penF2.beginFill(0xFFFFFF);
          penF2.drawRect(20, 100, 54, 60);
          penF2.endFill();

          var penF3:Pen = new Pen(_fwsMaskF3.graphics);
          penF3.beginFill(0xFFFFFF);
          penF3.drawRect(55, 110, 80, 24);
          penF3.endFill();

          var penW1:Pen = new Pen(_fwsMaskW1.graphics);
          penW1.beginFill(0xFFFFFF);
          penW1.drawRect(138, 85, 60, 76);
          penW1.endFill();

          var penW2:Pen = new Pen(_fwsMaskW2.graphics);
          penW2.beginFill(0xFFFFFF);
          penW2.drawRect(194, 85, 28, 76);
          penW2.endFill();

          var penW3:Pen = new Pen(_fwsMaskW3.graphics);
          penW3.beginFill(0xFFFFFF);
          penW3.drawRect(225, 85, 60, 76);
          penW3.endFill();

          var penS1:Pen = new Pen(_fwsMaskS1.graphics);
          penS1.beginFill(0xFFFFFF);
          penS1.drawRect(286, 85, 116, 24);
          penS1.endFill();

          var penS2:Pen = new Pen(_fwsMaskS2.graphics);
          penS2.beginFill(0xFFFFFF);
          penS2.drawRect(286, 110, 116, 24);
          penS2.endFill();

          var penS3:Pen = new Pen(_fwsMaskS3.graphics);
          penS3.beginFill(0xFFFFFF);
          penS3.drawRect(286, 135, 116, 26);
          penS3.endFill();

          }

          public function loadFwsText():void {
          _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
          _loader.load(new URLRequest("lib/FwsText.png"));
          }

          public function onLoaderComplete(event:Event):void {
          var fwsImage:Bitmap = Bitmap(_loader.content);
          addChild(fwsImage);
          addChild(_fwsMaskF1);
          addChild(_fwsMaskF2);
          addChild(_fwsMaskF3);
          addChild(_fwsMaskW1);
          addChild(_fwsMaskW2);
          addChild(_fwsMaskW3);
          addChild(_fwsMaskS1);
          addChild(_fwsMaskS2);
          addChild(_fwsMaskS3);
          }

          public function showFwsLogo():void {
          _origXF1 = _fwsMaskF1.x;
          _origXS = _fwsMaskS1.x;
          _origXF3 = _fwsMaskF3.x;
          _animeTimer.addEventListener("timer", onAnimeTimer);
          _animeTimer.start();
          }

          public function revealText(phase:Number):void {

          if (_updateCountdown > 3) {
          _updateCountdown = 3;
          trace("Problem with updateCountown function");
          }
          switch (phase) {
          case 1:
          _fwsMaskF1.x -= _moveDistF;
          if (_fwsMaskF1.x <= ((_widthOfF * -1) + _origXF1)) {
          removeChild(_fwsMaskF1);
          _updateCountdown -= 1;
          }

          _fwsMaskW1.y += _moveDistW;
          if (_fwsMaskW1.y >= (_heightOfW * 2)) {
          removeChild(_fwsMaskW1);
          _updateCountdown -= 1;
          }

          _fwsMaskS1.x -= _moveDistS;
          if (_fwsMaskS1.x <= (_origXS - _widthOfS)) {
          removeChild(_fwsMaskS1);
          _updateCountdown -= 1;
          }
          break;

          case 2:
          _fwsMaskF2.y += _moveDistF2;
          if (_fwsMaskW1.y >= (_heightOfF2 * 2)) {
          removeChild(_fwsMaskF2);
          _updateCountdown -= 1;
          }

          _fwsMaskW2.y += _moveDistW;
          if (_fwsMaskW2.y >= (_heightOfW * 2)) {
          removeChild(_fwsMaskW2);
          _updateCountdown -= 1;
          }

          _fwsMaskS2.x += _moveDistS;
          if (_fwsMaskS2.x >= (_origXS + _widthOfS)) {
          removeChild(_fwsMaskS2);
          _updateCountdown -= 1;
          }
          break;

          case 3:
          _fwsMaskF3.x -= _moveDistF3;
          if (_fwsMaskF3.x <= ((_widthOfF3 * -1) + _origXF3)) {
          removeChild(_fwsMaskF3);
          _updateCountdown -= 1;
          }

          _fwsMaskW3.y += _moveDistW;
          if (_fwsMaskW3.y >= (_heightOfW * 2)) {
          removeChild(_fwsMaskW3);
          _updateCountdown -= 1;
          }

          _fwsMaskS3.x -= _moveDistS;
          if (_fwsMaskS3.x <= (_origXS - _widthOfS)) {
          removeChild(_fwsMaskS3);
          _updateCountdown -= 1;
          }
          break;

          default:
          trace("revealText fuction error");
          }
          }

          public function onAnimeTimer(event:TimerEvent):void {

          if (_updateCountdown == 0) {
          _phase += 1;
          _updateCountdown = 3;
          }
          revealText(_phase);

          }
          }
          }


          • 2. Re: Programmatic Animation - Question About Timers &amp; Display List
            JaeWebb Level 1
            Correction: I'm still getting the runtime error whenever the animation runs in a browser for the first time. After I refresh the browser it runs without error. I don't understand why it occurs or why it only occurs the first time it runs.

            quote:

            ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
            at flash.display::DisplayObjectContainer/removeChild()
            at FwsLogoAnime/revealText()
            at FwsLogoAnime/onAnimeTimer()
            at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
            at flash.utils::Timer/flash.utils:Timer::tick()

            • 3. Re: Programmatic Animation - Question About Timers &amp; Display List
              JaeWebb Level 1
              I changed the timer value and refreshed the browser constantly to see what would happen... I noticed that raising the timer value lessens the frequency of the error. Its as if the removeChild calls are made before the root DisplayObject exists (?!). I don't understand. This isn't good since I want the option of changing animation speed.