Flash AS3 - Remove Multiple addChild

Question

I am using the following to add a repeating animation.

var recC01: cube01;
function attachC1() {
    recC01 = new cube01();
    recC01.x = -158;
    recC01.y = 159;
    addChild(recC01);
    trace("cube1");
}
var myIntervalC1: uint = setInterval(attachC1, 500);

Here is the code to remove the animation:

btnBACK.addEventListener (MouseEvent.CLICK, back1);
function back1(event:MouseEvent) :void {
    gotoAndPlay(2);
var removeTimer;    
clearInterval(myIntervalC1);
recC01.parent.removeChild(recC01);
    trace ("back1") ;

}

The repeating animations are added at various keyframes with unique names. ie. recC01, recC02, etc. as well as attachC1, attachC2, etc.

During playback the user is able to click a "Back" button to rewind to the previous section. I am struggling because the button appears on the timeline before the instances so I cannot use clearInterval and Removechild for an instance that does not yet exist. I'd like to avoid creating unique var everytime a new child is added. Keeping track of that would be crazy.

The user could click the back button before any of these are loaded or in between say recC01 and recC02...

What is the best way to remove all of the child instances? Is there a method to listen for the Interval and Child and remove them all?

This a small screen capture of the animation. The boxes represent the liquid flow

UPDATES I thought I would update here instead of in comments. I"ve added this to frame 2:

var cubeContainer:Sprite = new Sprite();
addChild(cubeContainer);

Code that loads repeating animation.class

var recC01: cube01;
function attachC1() {
    recC01 = new cube01();
    recC01.x = -158;
    recC01.y = 159;
    cubeContainer.addChild(recC01);
    trace("cube1");
}
var myIntervalC1: uint = setInterval(attachC1, 500);

Code for Back button:

btnBACKp1.addEventListener(MouseEvent.CLICK, back1);
function back1(event: MouseEvent): void {
cubeContainer.removeChildren();
gotoAndPlay(2);
trace("backFrame2");    
}

Unloads for a second and then resumes loading. Could this be a result of the Interval? Previous code to unload individual instances, I had to removeInterval

Answer 1

Here are a few ways you could do this a bit cleaner:

1. Use a container

Somewhere in you code (before you do the code shown) create a container to hold all your cubes:

var cubeContainer:Sprite = new Sprite();
addChild(cubeContainer);

Then, add all your cube instances to that container:

cubeContainer.addChild(recC01);  //instead of just addChild(recC01)

Now, when you want them to all go away, you can just do:

cubeContainer.removeChildren(); //this will remove all children of the container

The only downside to this method, is if you want your cubes/shapes layered with other assets. With this method all your shapes will be grouped together as the equivalent of one layer.

2. Remove all instances of the class

Since it looks like all your cubes are instances of the same class, you can just loop through the display list and remove them like this:

function clearCubes(e:Event = null):void {   //added the e:Event = null in case you want to attach this function to an event listener
    //loop backwards through all the children (we loop backwards so the index doesn't get messed up when you remove an item)
    var i:int = numChildren;
    while(i--){  //while i is above 0
        if(getChildAt(i) is cube01){  //if this child is a cube01 instance
            removeChildAt(i); //remove it
        }
    }
}

If you have a whole bunch of classes (mentioned in the comments), you could give them all a common base class. Create a file called AnimationObject.as with the following text/code (in the same directory as your .fla file):

package {
    public class AnimationObject extends flash.display.MovieClip {

    }
}

Then, in Flash/AnimatePro add the base class to each of your shapes. This can be done by going to your symbol/movie clip properties in the library, and putting in AnimationObject as the base class (instead of flash.display.MovieClip). Then in the code example above, replace is cube01 with is AnimationObject.

3. Keep track of them in an Array

While I'd prefer the container, using an array gives you more flexibility if you need to layer your objects in a complex/custom way.

//first create an array variable to hold a reference to all your shapes
var myShapes:Array = [];

//then, whenever you create a new shape/cube, add it to the array
function attachC1() {
   recC01 = new cube01();
   recC01.x = -158;
   recC01.y = 159;
   addChild(recC01);

   myShapes.push(recC01); // <-- THIS LINE added to your function

   trace("cube1");
}

Then, when you want them all to go away, loop through the array and remove them from both the array and the display list:

function clearShapes(e:Event = null):void {   //added the e:Event = null in case you want to attach this function to an event listener
    while(myShapes.length){
        removeChild(myShapes.pop()); //pop will remove the last item in the array and return that item
    }
}