0 Replies Latest reply on Sep 10, 2009 1:28 AM by platus2000

    Lightweight animated line

    platus2000 Level 1

      Hi all..

       

      I've been working on an application in which there are multiple (graphical) lines with sort of marching-ants animation (see screenshot)

      (The ants are actually circles). I wanted to create the effect of them moving (in either direction).

       

      Problem is, when there are many lines (more than 10) the application gets VERY VERY heavy (CPU wise)..

       

      How would you go about creating this kind of animation?

       

      Look at the (general) code below - what am I doing wrong? Perhaps I should use some of flex's built-in effects (tween) etc...?

       

      Any advice is welcome.

       

      --

       

      currently what i do is extending UIComponent with:

       

      1. on createchildren:

       

                  bmData = new BitmapData(LINE_MAX_LENGTH, this.height, true, 0xFFFFFF);
                  bm = new Bitmap(bmData);
                  this.addChild(bm);

       

      2.  I'm creating source bitmaps - which is just a line in a certain width along which im drawing circles.

       

           var tempBmData:BitmapData = new BitmapData(LINE_MAX_LENGTH, height,false, bgColor);


           var rect:Shape = new Shape();

           rect.graphics.beginFill(bgColor);
           rect.graphics.drawRect(-1 * _ellipse_radius,0, LINE_MAX_LENGTH  , height);      
           tempBmData.draw(rect);
           rect.graphics.endFill();

       

          // // SOME CODE TO DRAW CIRCLES ALONG THE LINE. I'm not gonna put the whole code here but \\

           // basically it's: \\

            for (..)

           {

                var circlebg:Sprite = new Sprite();   

                circlebg.graphics.beginFill(dotColor);                   
                circlebg.graphics.drawEllipse(pos, this.height / 2 - _ellipse_radius / 2, _ellipse_radius, _ellipse_radius);               
                tempBmData.draw(circlebg);

           }

       

      3. I set a timer to call this function, which copies a portion of the image (with an alternating offset) to create the illusion of animation:

       

              public function drawit(offset:int):void
              {   
               
                  offset = offset * dir;  // (dir = direction, 1 for ltr, -1 for rtl)  
                 
                  // get the source bit map according to speed (slow, fast, normal)           
                  // Copy with the given offset to current viewable bitmap, only to the desired width

                  var bmdata:BitmapData = getProperSourceBitmap();
                  if (bmdata != null)                   
                      bmData.copyPixels(getProperSourceBitmap(), new Rectangle(offset, 0, this.width, this.height), new Point(0,0));       
              }