XML/ scrollPanel problem

programming flash
1

[FONT=Tahoma][SIZE=2][COLOR=Red]so i have this xml photo gallery found here: http://designlev.com/photography/photography.html

I got it from Kirupa. It’s a xml gallery and the loaded pictures are clickable and open up to fullsize photos (this is for a my photography portfolio).

But when i put in vertical pictures, it kinda freaks out and lays the thumbs over themselves. Specifically, the 7th pic (vertical), overlays the 4th pic (horizontal).

Here’s my AS(2) for the FLA…


function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        thumbnails = [];
        link = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
            description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
            link* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
            thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
            thumbnails_fn(i);
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
///////////////////////////////////// 
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};
///////////////////////////////////// 
p = 0;
this.onEnterFrame = function() {
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
        preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
        preloader._visible = false;
        if (picture._alpha<100) {
            picture._alpha += 10;
        }
    }
    //
    //getURL statement
    //
    picture.onRelease = function() {
        getURL(link[p], "_blank");
    };
    //
};
function nextImage() {
    if (p<(total-1)) {
        p++;
        if (loaded == filesize) {
            picture._alpha = 0;
            picture.loadMovie(image[p], 1);
            desc_txt.text = description[p];
            picture_num();
        }
    }
}
function prevImage() {
    if (p>0) {
        p--;
        picture._alpha = 0;
        picture.loadMovie(image[p], 1);
        desc_txt.text = description[p];
        picture_num();
    }
}
function firstImage() {
    if (loaded == filesize) {
        picture._alpha = 0;
        picture.loadMovie(image[0], 1);
        desc_txt.text = description[0];
        picture_num();
    }
}
function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
    // thumbnail code! 
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 10;
    tscroller.onEnterFrame = function() {
        if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
            if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
                thumbnail_mc._x -= scroll_speed;
            } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
                thumbnail_mc._x += scroll_speed;
            }
        } else {
            delete tscroller.onEnterFrame;
        }
    };
}
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
        target_mc._x = hit_left._x+(target_mc._width+5)*k;
        target_mc.pictureValue = k;
        target_mc.onRelease = function() {
            p = this.pictureValue-1;
            nextImage();
        };
        target_mc.onRollOver = function() {
            this._alpha = 50;
            thumbNailScroller();
        };
        target_mc.onRollOut = function() {
            this._alpha = 100;
        };
    };
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

… and here’s the xml:


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/01.jpg</image>
        <caption>Kresge</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/01.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/01.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/02.jpg</image>
        <caption>Media Lab</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/02.jpg</thumbnail>
       <link>http://www.designlev.com/photography/bigfiles/02.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/03.jpg</image>
        <caption>Stata Center</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/03.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/03.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/04.jpg</image>
        <caption>Stata Lobby</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/04.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/04.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/05.jpg</image>
        <caption>Construction</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/05.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/05.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/06.jpg</image>
        <caption>The Dome</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/06.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/06.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/07.jpg</image>
        <caption>Structure</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/07.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/07.jpg</link>
    </pic>
    <pic>
        <image>http://www.designlev.com/photography/smallfiles/08.jpg</image>
        <caption>Boston</caption>
        <thumbnail>http://www.designlev.com/photography/thumbs/08.jpg</thumbnail>
        <link>http://www.designlev.com/photography/bigfiles/08.jpg</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/glass.jpg</image>
        <caption>Glass</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/glass_sm.jpg</thumbnail>
        <link>http://www.som.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/baker.jpg</image>
        <caption>Baker House</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/baker_sm.jpg</thumbnail>
        <link>http://baker.mit.edu</link>
    </pic>
        <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/kresge.jpg</image>
        <caption>Kresge</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/kresge_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/kresge/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/medialab.jpg</image>
        <caption>Media Lab</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/medialab_sm.jpg</thumbnail>
        <link>http://www.media.mit.edu/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata.jpg</image>
        <caption>Stata Center</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/stata_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/kresge/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata_lobby.jpg</image>
        <caption>Stata Lobby</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/stata_lobby_sm.jpg</thumbnail>
        <link>http://www.eecs.mit.edu/stata-link.html</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/construction.jpg</image>
        <caption>Construction</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/construction_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/cogsci/index.html</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/dome.jpg</image>
        <caption>The Dome</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/dome_sm.jpg</thumbnail>
        <link>http://web.mit.edu/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/structure.jpg</image>
        <caption>Structure</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/structure_sm.jpg</thumbnail>
        <link>http://www.som.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/boston.jpg</image>
        <caption>Boston</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/boston_sm.jpg</thumbnail>
        <link>http://www.boston.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/glass.jpg</image>
        <caption>Glass</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/glass_sm.jpg</thumbnail>
        <link>http://www.som.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/baker.jpg</image>
        <caption>Baker House</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/baker_sm.jpg</thumbnail>
        <link>http://baker.mit.edu</link>
    </pic>
        <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/kresge.jpg</image>
        <caption>Kresge</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/kresge_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/kresge/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/medialab.jpg</image>
        <caption>Media Lab</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/medialab_sm.jpg</thumbnail>
        <link>http://www.media.mit.edu/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata.jpg</image>
        <caption>Stata Center</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/stata_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/kresge/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/stata_lobby.jpg</image>
        <caption>Stata Lobby</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/stata_lobby_sm.jpg</thumbnail>
        <link>http://www.eecs.mit.edu/stata-link.html</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/construction.jpg</image>
        <caption>Construction</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/construction_sm.jpg</thumbnail>
        <link>http://web.mit.edu/evolving/projects/cogsci/index.html</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/dome.jpg</image>
        <caption>The Dome</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/dome_sm.jpg</thumbnail>
        <link>http://web.mit.edu/</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/structure.jpg</image>
        <caption>Structure</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/structure_sm.jpg</thumbnail>
        <link>http://www.som.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/boston.jpg</image>
        <caption>Boston</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/boston_sm.jpg</thumbnail>
        <link>http://www.boston.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/glass.jpg</image>
        <caption>Glass</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/glass_sm.jpg</thumbnail>
        <link>http://www.som.com</link>
    </pic>
    <pic>
        <image>http://www.kirupa.com/developer/mx2004/pg/baker.jpg</image>
        <caption>Baker House</caption>
        <thumbnail>http://www.kirupa.com/developer/mx2004/pg/baker_sm.jpg</thumbnail>
        <link>http://baker.mit.edu</link>
    </pic>
</images>

I’m totally puzzled… I don’t get it at all.

-HoSs
[/COLOR][/SIZE][/FONT]