An AS3 message for Noobz

[dudewad]

Hey everyone!
So, as I have spent a lot of time learning AS3 and other web development languages, and as I, like many of you on here, am teaching myself with no outside help, it can often be frustrating and overwhelming to try and figure out stuff that to a lot of the guru types seems like common basic knowledge.

In all of my endeavors, I do my best to 'explain it to myself', so that I am positive that I know exactly what is going on. Because in the programming world, if you're just guessing that it's right, you're not doing a good job. Eh?

So here is a little tidbit of info that I just now figured out that would have been helpful a *long* time ago, but I never learned it because I found other ways to work around it.

My topic: registration of event listeners, and the order in which they execute.

Put bluntly, the order in which event listeners operate is the order in which they were registered. This is a hypothesis, because I do not know it for sure, but I am going to illustrate the example that I JUST went through to show you what I mean:

There is a sprite on the stage that is meant to hold content; call it

var contentSprite:Sprite = new Sprite();

Lets say that we are going to make some buttons that when you click them, they instantiate movie clips that do things in our movie, and they put these new movie clips into our content sprite. These are buttons in the library and so we don't need to create variables for them, rather reference them by name:

button1.addEventListener(MouseEvent.CLICK, addMC);
button2.addEventListener(MouseEvent.CLICK, addMC);
button3.addEventListener(MouseEvent.CLICK, addMC);

The corresponding function:

function addMC(event:MouseEvent):void
{
    if(event.target.name = 'button1'
    {
        var mcone:CustomMCOne = new CustomMCOne();
        contentSprite.addChild(mcone);
    }
    else if(event.target.name = 'button2'
    {
        var mctwo:CustomMCTwo = new CustomMCTwo();
        contentSprite.addChild(mctwo);
    }
    else if(event.target.name = 'button3'
    {
        var mcthree:CustomMCThree = new CustomMCThree();
        contentSprite.addChild(mcthree);
    }
}

The above function creates the movieclip objects and adds them to the content sprite, depending on which button was clicked. The "CustomMCOne", etc are clips that you may have previously created and added to your library/exported for actionscript. But they can be anything you want, obviously.
Now, the goal of this is to have ONE movieclip inside the sprite at a time, meaning that the previous clip needs to be deleted when the other one is created.

We therefore need a variable that will refer to the current clip that is in the content sprite so that we can know which one to remove.

var currentClip:MovieClip;

So to our addMC function above, we assign the clip that was just added to the currentClip variable, because since all of the objects we are instantiating in that function are extensions of the MovieClip class, it's okay:

function addMC(event:MouseEvent):void
{
    if(event.target.name = 'button1'
    {
        var mcone:CustomMCOne = new CustomMCOne();
        contentSprite.addChild(mcone);
        currentClip = mcone;
    }
    else if(event.target.name = 'button2'
    {
        var mctwo:CustomMCTwo = new CustomMCTwo();
        contentSprite.addChild(mctwo);
        currentClip = mctwo;
    }
    else if(event.target.name = 'button3'
    {
        var mcthree:CustomMCThree = new CustomMCThree();
        contentSprite.addChild(mcthree);
        currentClip = mcthree;
    }

}

The tricky part is adding the event listeners for removing the previous movieclip. It would be easy to call the clip by index in the sprite using

contentSprite.removeChild(contentSprite.getChildAt(0))

Which would get whichever sprite was added first and kick it out.
But, as I like to code for possible expansion of my projects, I can never gurantee that those will be the only 2 objects in the sprite, nor can I gurantee that the mc that I want to remove will be sitting at that index. Which is why we set the currentClip variable to the MC in question. My error was in not understanding the execution process of event listeners, so when I made my event listeners, I created them AFTER I created the 'addMC' listeners:

//Add clip listeners
button1.addEventListener(MouseEvent.CLICK, addMC);
button2.addEventListener(MouseEvent.CLICK, addMC);
button3.addEventListener(MouseEvent.CLICK, addMC);

//Check/remove previous clip
button1.addEventListener(MouseEvent.CLICK, removeMC);
button2.addEventListener(MouseEvent.CLICK, removeMC);
button3.addEventListener(MouseEvent.CLICK, removeMC);

And very simply, here is the remove MC code:

function removeMC(event:MouseEvent):void
{
    trace(currentClip);  //traces the NEW clip, rather than the old
    contentSprite.removeChild(currentClip);  //Whoops! Removes the new clip before we even see it!

}

Because I did not understand that the execution of listener code is indeed NOT arbitrary, what was happening was that the currentClip was actually the clip that was just added, because the currentClip variable is set to the new clip BEFORE the old clip was removed. A simple fix:

//Check/remove previous clip FIRST
button1.addEventListener(MouseEvent.CLICK, removeMC);
button2.addEventListener(MouseEvent.CLICK, removeMC);
button3.addEventListener(MouseEvent.CLICK, removeMC);

//THEN add clip listeners
button1.addEventListener(MouseEvent.CLICK, addMC);
button2.addEventListener(MouseEvent.CLICK, addMC);
button3.addEventListener(MouseEvent.CLICK, addMC);

function removeMC(event:MouseEvent):void
{
    trace(currentClip);  //now traces the OLD clip
    contentSprite.removeChild(currentClip); //Yay!  Removes the old clip!

}

This may be a no brainer for some, but it eluded me and I always came up with a stupid workaround like making a second variable called 'old clip' or something like that.
Hope this helps somebody. By the way, I am totally open to suggestions/comments on this.
Cheers!