An infinite scrolling panel in AS3

Question

Hi everyone,

I'm trying to create a infinite scrolling panel containing diagonal stripes in ActionScript 3. As the panel is dragged to the right or left, the program populates it with more stripes, to create the appearance of an infinitely scrolling panel. The stripe graphic itself is an MC in my library with the class name of Stripe.

When the movie loads, the program creates the entire panel as a MC whose children are the stripes, then populates it with just enough stripes to fill the screen horizontally. When the whole panel is dragged to the left, the program creates new stripes to the right of the rightmost stripe and vice-versa.

Everything works well except that I'd like to also remove stripes from the opposite side that I'm creating them; I feel like this would help free up memory--correct me if I'm wrong. But I don't know how to do this. Check out my code below.

var allStripes:MovieClip = new MovieClip();
addChild(allStripes);
var myArray:Array = new Array();
var lastStripe:Stripe = new Stripe();
var firstStripe:Stripe = new Stripe();

//var rect:Rectangle = new Rectangle(widthPlus141*-1, 0, widthPlus141, 0);

for (var i:int = 0; i < 1141; i += 30) {
 var eachStripe:Stripe = new Stripe();
 myArray[i] = eachStripe;
 eachStripe.x = i;
 eachStripe.y = 0;
 allStripes.addChild(myArray[i]);

}

allStripes.addEventListener(MouseEvent.MOUSE_DOWN, myStartDrag);
allStripes.addEventListener(MouseEvent.MOUSE_UP, myStopDrag);

function myStartDrag(evt:MouseEvent):void {
 evt.currentTarget.startDrag();
}
function myStopDrag(evt:MouseEvent):void {
 evt.currentTarget.stopDrag();
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, moreStripes);
 function moreStripes(evt:MouseEvent):void {
   firstStripe = myArray[0];
   lastStripe = myArray[myArray.length-1];
   var newStripe:Stripe = new Stripe();

   if (allStripes.x < 0) {
    allStripes.addChild(newStripe);
    myArray.push(newStripe); 

// Here's where the problem is. I've tried different things here to remove stripes...

//    allStripes.removeChild(0);
//    myArray.shift();

// I also tried:

//    allStripes.removeChild(firstStripe); AND
//    allStripes.removeChild(Array[0]); 


    newStripe.x = lastStripe.x + 30;;
    newStripe.y = 0;
            }

   if (allStripes.x > 0) {
    allStripes.addChild(newStripe);
    myArray.unshift(newStripe); 
    newStripe.x = firstStripe.x - 30;;
    newStripe.y = 0;
            }

 }

Finally, if you could offer extra help--check out the rectangle in Line 7. It's a rectangle I'd like to use to constrain the dragging to the horizontal axis. It should allow infinite dragging horizontally and zero dragging vertically. What parameters should I use?

Thanks in advance!!