AS3 XML portfolio: Images stack on top of each other instead of being terminated

i recently started to learn AS3 and i decided to make a portfolio website with it. I am loading the information about the websites i created from an external XML file.

Everything its working well but when i load a new picture to the stage the previous picture remains there which in my understanding it shouldn't happen. As i understood from Adobe's AS3 Guide once you create a new instance of a loader, the previous one should be erased.

I've been looking all over the place for a solution but i can't find one that will work. I tried using the .unload class and i tried removeChild as well but it keeps giving me errors.

Here is the code i've been using:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.filters.*;
import flash.display.MovieClip;
import flash.events.MouseEvent; 

var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("portfolio.xml"));

function LoadXML(e:Event):void {
    xmlData = new XML(e.target.data);
    ParsePortfolio(xmlData);
}

function ParsePortfolio(siteInput:XML):void {

    var titleList:XMLList = siteInput.Site.title;
    var servicesList:XMLList = siteInput.Site.services;
    var urlList:XMLList = siteInput.Site.url;
    var picList:XMLList = siteInput.Site.picture;

    var XX:Number = 0;

    var titleElement:XML = titleList[XX];
    var servicesElement:XML = servicesList[XX];
    var urlElement:XML = urlList[XX];   
    var picElement:XML = picList[XX];

    container_mc.title_txt.text = (titleElement);
    container_mc.services_txt.text = (servicesElement);

    var pictureNumber:String = picElement;
    var my_loader:Loader = new Loader();
    my_loader.load(new URLRequest(pictureNumber));
    container_mc.pictureFrame.addChild(my_loader);  

    next.addEventListener (MouseEvent.CLICK, NbuttonClicked);
    prev.addEventListener (MouseEvent.CLICK, PbuttonClicked);

开发者_开发百科    function NbuttonClicked(e:Event):void  {

        var t1:Tween = new Tween (container_mc, "alpha", Strong.easeOut, 1, 0, .2, true);

        t1.addEventListener(TweenEvent.MOTION_FINISH, dropbomb);        

        function dropbomb() {       

            XX++;

            if (XX == titleList.length()) {
            XX = 0;
            }

            var titleElement:XML = titleList[XX];
            var servicesElement:XML = servicesList[XX];
            var urlElement:XML = urlList[XX];
            var picElement:XML = picList[XX];

            container_mc.title_txt.text = titleElement;
            container_mc.services_txt.text = servicesElement;
            var pictureNumber:String = picElement;

            trace(pictureNumber);

            var my_loader:Loader = new Loader();
            my_loader.load(new URLRequest(pictureNumber));
            container_mc.pictureFrame.addChild(my_loader);              

            visit.addEventListener (MouseEvent.CLICK, VbuttonClicked);

            function VbuttonClicked(e:Event):void  {

            navigateToURL(new URLRequest(urlElement), "_blank");

            }

            var t2:Tween = new Tween (container_mc, "alpha", Strong.easeOut, 0, 1, .2, true);
        }
    }

    function PbuttonClicked(e:Event):void  {

        var t3:Tween = new Tween (container_mc, "alpha", Strong.easeOut, 1, 0, .2, true);

        t3.addEventListener(TweenEvent.MOTION_FINISH, dropbomb);

        function dropbomb() {

            if ( XX == 0 )
            {
            XX = (titleList.length()) - 1;
            }

            else {XX--;}

            var titleElement:XML = titleList[XX];
            var servicesElement:XML = servicesList[XX];
            var urlElement:XML = urlList[XX];
            var picElement:XML = picList[XX];           

            container_mc.title_txt.text = titleElement;
            container_mc.services_txt.text = servicesElement;
            var pictureNumber:String = picElement;

            var my_loader:Loader = new Loader();
            my_loader.load(new URLRequest(pictureNumber));

            visit.addEventListener (MouseEvent.CLICK, VbuttonClicked);

            function VbuttonClicked(e:Event):void  {

            navigateToURL(new URLRequest(urlElement), "_blank");

            }           

            var t4:Tween = new Tween (container_mc, "alpha", Strong.easeOut, 0, 1, .2, true);

        }   
    }
}

The movie clips are being added to the stage manually. I don't know if this is causing the problem or if it's completely unrelated.

To be more specific while the container_mc is fading out, you can see the previous picture which shows that they are stacking rather then being replaced.

I would really appreciate some help, at least i'd like to know what i am doing wrong and to be pointed to the right direction.

I am sorry for the noobish code and for the stupid question, but i've really looked all over for the answer, i've looked for tutorials on creating XML slideshows and so far nothing helped me.

When you instantiate (and call addChild on it) a loader, it's added to the display list. It then has to be removed to cease to be in the display list. Instead of instantiating a loader over and over, you can just call Loader.load() on it with a dynamic URLRequest. That way, you're just sticking with one loader that changes every time you call it.

For example:

import flash.events.Event;
import flash.display.Loader;
import flash.net.URLRequest;

var _loader:Loader = new Loader();
var _toLoad:URLRequest = new URLRequest("path.jpg");
_loader.load(_toLoad);
addChild(_loader);

loadImage("1.jpg");

function loadImage(path:String):void
{
    _toLoad = new URLRequest(path);
    _loader.load(_toLoad);
    _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleted, false, 0, true);
}

function loadCompleted(evt:Event):void
{
    trace("load completed");
}