actionscript 3 addchild within child and clear the first child

Question

Okay so here is the setup:

Within the main timeline I have a menu, which is a MovieClip. This menu is comprised of about 17 "buttons", each of which point to a different section of the site. When a "button" is clicked (2 examples: menu_bag_button, menu_trashbag_button), the menu will animate, moving left, and 2 library items (bag_container and close_btn) should appear to the right, both within "framecontainer".

Then, while the menu is on the left, this specific button must not repeat the menu animation, thus I did an if statement finding which frame it is on, and if it's on the left, it simply clears the framecontainer and loads the content again.

The problem is that when another link is clicked, it needs to do one of two things: if the menu is in the center with no content loaded, it needs to animate the menu to the right, and load the content/close_btn into "framecontainer"; or, if the menu is on the left, it needs to clear "framecontainer" and load the corresponding content. I've tried a lot of things but since all of these buttons are within "menu_mc", the actionscript has to point to the root, THEN to "framecontainer" and everything gets convoluted.

If there is a quick, better way to do this without me having to do hours of coding, that would be awesome... otherwise I must stick to this convoluted way for now.

Here is my current code. It functions fine, except for the fact that it doesn't clear content, so it continues loading the frames so that one is closed, there is still other content behind it:

import flash.display.*;
import fl.transitions.*;
import flash.events.MouseEvent;

//Stopping on this frame (805) so the menu will be in place to interact with
stop();

//framecontainer location/size for the content to be loaded.
//Not sure if the parameters below it are absolutely necessary.
var framecontainer:MovieClip = new MovieClip();
framecontainer.width = 450;
framecontainer.height = 450;
framecontainer.x = 450;
framecontainer.y = 0;

//adding the framecontainer so that the content can be loaded into it.
//again, not sure if this is necessary yet
MovieClip(root).addChild(framecontainer);




//FIRST MENU ITEM, "BAG"
//If we can get the framecontainer to work, I don't think I'll have to create
//a custom closeBtn for each and every link. I'll be able to just use a generic
//closeBtn and have it clear the framecontainer and continue the animation.

var closebagBtn:close_btn = new close_btn();
closebagBtn.x = 0;
closebagBtn.y = 0;

var bagFrame:MovieClip = new bag_frame_mc();
bagFrame.x = 900;
bagFrame.y = 0;


menu_bag_button.addEventListener(MouseEvent.MOUSE_UP, bagClick);
function bagClick(event:MouseEvent):void{
    if(MovieClip(root).currentFrame == 850) {
// the next line does nothing, but it's supposed to clear
MovieClip(root).framecontainer.clear();
}
//Below, I need to add bagFrame and closebagBtn into framecontainer,
//but I don't know how. Tried adding ".framecontainer" in front of addchild
//but got error saying that bagClick (function above) is undefined.
else {
MovieClip(root).addChild (bagFrame);
MovieClip(root).addChild (closebagBtn);
MovieClip(root).gotoAndPlay(806);
}
}
closebagBtn.addEventListener(MouseEvent.MOUSE_UP, bagClose);
function bagClose (event:MouseEvent):void{
MovieClip(root).removeChild(bagFrame);
MovieClip(root).removeChild(closebagBtn);
MovieClip(root).gotoAndPlay(850);
}





//SECOND MENU ITEM, "TRASHBAG"

var closetrashbagBtn:close_btn = new close_btn();
closetrashbagBtn.x = 0;
closetrashbagBtn.y = 0;

var trashbagFrame:MovieClip = new trashbag_frame_mc();
trashbagFrame.x = 900;
trashbagFrame.y = 0;

menu_trashbag_button.addEventListener(MouseEvent.MOUSE_UP, trashbagClick);
function trashbagClick(event:MouseEvent):void{
    if(MovieClip(root).currentFrame == 850) {
// the next line does nothing, but it's supposed to clear
MovieClip(root).framecontainer.clear();
}
//Below, I need to add trashbagFrame and closebagBtn into framecontainer,
//but I don't know how. Tried adding ".framecontainer" in front of addchild
//but got error saying that bagClick (function above) is undefined.
else {
}
else {
MovieClip(root).addChild (trashbagFrame);
MovieClip(root).addChild (closetrashbagBtn);
MovieClip(root).gotoAndPlay(806);
}
}
closetrashbagBtn.addEventListener(MouseEvent.MOUSE_UP, trashbagClose);
function trashbagClose (event:MouseEvent):void{
MovieClip(root).removeChild(trashbagFrame);
MovieClip(root).removeChild(closetrashbagBtn);
MovieClip(root).gotoAndPlay(850);
}

////////////////////////////////////////////////////////////// The new, functional code (need help refining):

import flash.display.*;
import fl.transitions.*;
import flash.events.MouseEvent;

stop();

var menuList:Array = [menu_bag, menu_chips, menu_coke, menu_cup, menu_deodorant, menu_fork, menu_knife, menu_lighter, menu_milk, menu_pill, menu_rings, menu_shampoo, menu_spoon, menu_straw, menu_toothbrush, menu_trashbag, menu_water];



var closeBtn:close_btn = new close_btn();
closeBtn.x = 0;
closeBtn.y = 0;

closeBtn.addEventListener(MouseEvent.MOUSE_UP, contentClose);
function contentClose (event:MouseEvent):void{
    while(MovieClip(root).numChildren > 1)
    {
        MovieClip(root).removeChild(MovieClip(root).getChildAt(MovieClip(root).numChildren - 1));
    }
MovieClip(root).gotoAndPlay(850);
}




var bagFrame:MovieClip = new bag_frame_mc();
bagFrame.x = 900;
bagFrame.y = 0;

menu_bag.addEventListener(MouseEvent.MOUSE_UP, bagClick);
function bagClick(event:MouseEvent):void{
    if(MovieClip(root).currentFrame == 850) {
    while(MovieClip(root).numChildren > 1)
    {
        MovieClip(root).removeChild(MovieClip(root).getChildAt(MovieClip(root).numChildren - 1));
    }
MovieClip(root).addChild (bagFrame);
MovieClip(root).addChild (closeBtn);
}
else {
MovieClip(root).addChild (bagFrame);
MovieClip(root).addChild (closeBtn);
MovieClip(root).gotoAndPlay(806);
}
}

var trashbagFrame:MovieClip = new trashbag_frame_mc();
trashbagFrame.x = 900;
trashbagFrame.y = 0;

menu_trashbag.addEventListener(MouseEvent.MOUSE_UP, trashbagClick);
function trashbagClick(event:MouseEvent):void{
    if(MovieClip(root).currentFrame == 850) {
    while(MovieClip(root).numChildren > 1)
    {
        MovieClip(root).removeChild(MovieClip(root).getChildAt(MovieClip(root).numChildren - 1));
    }
MovieClip(root).addChild (trashbagFrame);
MovieClip(root).addChild (closeBtn);
}
else {
MovieClip(root).addChild (trashbagFrame);
MovieClip(root).addChild (closeBtn);
MovieClip(root).gotoAndPlay(806);
}
}

Answer 1

First of all, I really hope this is not "timeline" code! I hope this code in inside a class.

Second, I really don't like the idea of using "root". And if you are going to use it more than once you can just make a new var for is, typed as a movieclip, and reference that instead of always casting it to a movieclip. e.g.

var target:MovieClip = root as MovieClip;
target.addChild(container);

If this code IS on the main timeline then you don't even need to reference root (but it doesn't seem like it is).

To answer you actual question...

There is a problem with these lines:

MovieClip(root).addchild (container);
MovieClip(root).container.addChild (bagLink);
MovieClip(root).addChild (closeBtn);
MovieClip(root).gotoAndPlay(806);

the problem is that when you say MovieClip(root).addchild(container);, you are adding the "contents" of the container variable as a child of root. The contents of the var container has no clue you have called it "container", so you can not say MovieClip(root).container.

However you can just say:

container.addChild(bagLink);

Since the var container is pointing to the container MovieClip.