title: Custom Flex/ActionScript UIComponent Keeps Getting Painted Multiple Times During a Resize
body: <p>I've created a custom uicomponent and whenever the browser or its specific container is resized, a repaint occurs but the contents of the component get drawn again and again and again...
  So, if I move the container I'll end up with multiple circles drawn on top of each other but offset depending upon where the container is when the repaint occurs.
  My updateDisplayList code is below.
  Do I need to do some sort of clear so that it doesn't contiuously getting duplicated like this???
  Thanks so much for any help!</p>
  
  <pre><code>    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  
              super.updateDisplayList(unscaledWidth, unscaledHeight);                             
  
              trace("height: " + parent.height);
              trace("width: " + parent.width);
  
              if (parent.height &lt;= parent.width) {
                  radius = Math.round((parent.height*.95)/2);
              }
              else {
                  radius = Math.round((parent.width*.95)/2);
              }
  
              trace("radius: " + radius);
  
              outterRadius = Math.round(radius*.70);
              innerRadius = Math.round(radius*.30);
  
              trace("outterradius: " + outterRadius); 
              trace("innerradius: " + innerRadius);
  
              centerX = this.width/2;
              centerY = this.height/2;
  
              trace("centerX: " + centerX);
              trace("centerY: " + centerY);
  
              var innerCircle:Sprite = new Sprite();
              var outterCircle:Sprite = new Sprite();
              var baseCircle:Sprite = new Sprite();
  
              baseCircle.graphics.beginFill(0x000000);
              baseCircle.graphics.drawCircle(centerX, centerY, radius);               
  
              outterCircle.graphics.lineStyle(2, 0xA10303, .75);
              outterCircle.graphics.drawCircle(centerX, centerY, outterRadius);
  
  
              innerCircle.graphics.lineStyle(2, 0xA10303, .75);
              innerCircle.graphics.drawCircle(centerX, centerY, innerRadius);
  
              addChild(baseCircle);   
              addChild(outterCircle);
              addChild(innerCircle);
  
              for (var bubbleCount:int=0; bubbleCount &lt; bubbleList.length; bubbleCount++) {
                  var globalPoint:Point = this.localToGlobal(getPointInCircle(radius));
                  var radarBubble:RadarBubble = bubbleList.getItemAt(bubbleCount) as RadarBubble;
                  var bubbleLocalPoint:Point = radarBubble.globalToLocal(globalPoint);
                  radarBubble.x = bubbleLocalPoint.x;
                  radarBubble.y = bubbleLocalPoint.y;
                  trace("Add bubble: " + radarBubble.x + ", " + radarBubble.y + ", " + radarBubble.radius);
                  addChild(radarBubble);                                      
              }                           
  
              // create radar display lines to be animated
              for (var angleCount:int=0; angleCount &lt; 360; angleCount++) {
                  var tmpLine3:Sprite = new Sprite();
                  tmpLine3.graphics.lineStyle(2, 0xA10303, 1);
                  tmpLine3.graphics.moveTo(centerX, centerY);                                         
                  tmpLine3.graphics.lineTo(getEndpoint(angleCount).x, getEndpoint(angleCount).y);
                  tmpLine3.visible = false;
                  addChild(tmpLine3);
                  lineCollection.addItemAt(tmpLine3, angleCount);                             
              }
  
          }
  </code></pre>