Flash AS3: ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller

Question

I'm trying to create a slideshow style presentation, where each slide/page is a movieclip and they transition via a sliding animation. The problem I have is that I don't want all the movieclips on stage at once to prevent lag issues, an example of what I'm trying to achieve:

• Current page is Page A, next button is clicked
• Page B is placed on the stage using addChild (but placed out of view)
• Page A slides off the visible stage
• Page B slides into the visible stage
• Page A is removed from stage using removeChild - this is where I am having problems.

//greensock stuff
import com.greensock.*;
import com.greensock.easing.*;

//buttons that navigate to next and previous slides
prevBtn.addEventListener(MouseEvent.CLICK,prevClicked,false,0,true);
nextBtn.addEventListener(MouseEvent.CLICK,nextClicked,false,0,true);

//setting up array of all the pages
var pageArray:Array = [page1, page2, page3, page4, page5];
var currentArray:Number = 0;

//defining the first page and placing it on the stage
var currentPage:MovieClip = new pageArray[currentArray];
addChild(currentPage);



function nextClicked(event:MouseEvent):void{
    //check to ensure it is not the last page
    if (currentArray < pageArray.length - 1){
            //define the current slide as oldPage
            var oldPage:MovieClip = new pageArray[currentArray];
            currentArray++;
            //define the next slide as currentPage and place on stage
            var currentPage:MovieClip = new pageArray[currentArray];
            addChild(currentPage);
            currentPage.x = 1024;
            TweenMax.to(currentPage, 1, {x:0});
            TweenMax.to(oldPage, 1, {x:-1024,onComplete:removeChild,onCompleteParams:[oldPage]});
    }
}



function prevClicked(event:MouseEvent):void{
    //check to ensure it is not the first page
    if (currentArray > 0){
            //define the current slide as oldPage
            var oldPage:MovieClip = new pageArray[currentArray];
            currentArray--;
            //define the next slide as currentPage and place on stage
            var currentPage:MovieClip = new pageArray[currentArray];
            addChild(currentPage);
            currentPage.x = -1024;
            TweenMax.to(currentPage, 1, {x:0});
            TweenMax.to(oldPage, 1, {x:1024,onComplete:removeChild,onCompleteParams:[oldPage]});    }
}

Answer 1

It is likely your "oldPage" is not yet added to the stage/movieClip at some point, like right at the beggining.

So instead of:

TweenMax.to(oldPage, 1, {x:-1024,onComplete:removeChild,onCompleteParams:[oldPage]});

Consider to first check if the child still exists before removing it. This would require calling a new function, something like:

(untested code)

TweenMax.to(oldPage, 1, {x:-1024,onComplete:tryRemoveChild,onCompleteParams:[oldPage]});

function tryRemoveChild(page:MovieClip):void {
   if(contains(page)){ //Check if child is still there
       removeChild(page); //It is, so remove
   } //Otherwise there is no child to currently remove
}

Answer 2

When you instantiate oldPage, you're creating a new instance of that Class (or at least that's what it looks like to me). That page is not the same one that is on stage.

In your constructor, set the variable currentPage to the instance variable of the page that is on the stage ( whatever you called it in the object properties). Then, in your nextClicked, store currentPage in oldPage before you reset it to the new page that gets added.

FWIW, the convention is that Class names are always capitalized. If you had done this, it would be easier to know for sure that page1, page2, etc. are Classes your are instantiating.

Also note that you're probably not saving much by not having the instances on stage at startup, because they are compiled into the movie before Frame 1. Even if you unchecked the "embed on Frame 1" button, by referencing them in your Class file, which is compiled on Frame 1, you force them to compile on Frame 1.

======================================= edited to answer question about setting variable to instance

If you click the object on the stage in the fla file, then look at the instance name in the properties panel. That is the name of your instance on stage. If it doesn't have a name, give it one. If you have 'declare stage instances automatically' on, you're all set. If not, you'll need to add a variable declaration at the top of the file to make that instance name available as a variable.

Now, in the Document Class for your fla file (which I assume is what the code you have pasted above):

public function YourDocumentClassName() {
    super();
    currentPage = theNameofThatInstance;
}

nextClicked would change to look like this:

function nextClicked(event:MouseEvent):void{
     //check to ensure it is not the last page
     if (currentArray < pageArray.length - 1){
             //define the current slide as oldPage
             var oldPage:MovieClip = currentPage;
             currentArray++;//may also want to consider checking for past the end of the array and starting at the beginning
             //define the next slide as currentPage and place on stage
             var currentPage:MovieClip = new pageArray[currentArray];
             addChild(currentPage);
             currentPage.x = 1024;
             TweenMax.to(currentPage, 1, {x:0});
             TweenMax.to(oldPage, 1, {x:-1024,onComplete:removeChild,onCompleteParams:[oldPage]});
     }
 }

I guess if your graphics are large or they move, you might run into performance problems having more than one on stage, but I assumed you were trying to get around loading issues.