Controlling X & Y of Thumbnails w/ XML

I’ve gone through multiple threads and forums to put together this project but can seem to conquer this one part. Can anyone help?

I’m using a modified version of the Thumbnail Photo Gallery. What I need to do is to be able to control the X & Y of each thumbnail based on the numbers in an XML document.

Here’s my code:


function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;
thumbnails = [];
thumbnail2 = [];
bigshirt = [];
boothnumber = [];
description = [];
xpos = [];
ypos = [];

total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {

thumbnails* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
thumbnail2* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
bigshirt* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
boothnumber* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[4].firstChild.nodeValue;
xpos* = xmlNode.childNodes*.childNodes[5].firstChild.nodeValue;
ypos* = xmlNode.childNodes*.childNodes[6].firstChild.nodeValue;
thumbnails_fn(i);
thumbnail2_fn(i);

}
firstImage();

} else {

content = "file not loaded!";

}

}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("grid.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;
cols = 10; //the number of columns you want ------------------------------------
this.onEnterFrame = function() {

filesize = picture_mc.getBytesTotal();
loaded = picture_mc.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;
if (picture_mc._alpha<100) {

picture_mc._alpha += 10;

}

}

};
function nextImage() {

if (p<(total-1)) {

p++;
if (loaded == filesize) {

bigshirt_mc.loadMovie(bigshirt[p], 1);

description_mc.loadMovie(description[p], 1);

picture_num();

}

}

}
function nextImage2() {

if (p<(total-1)) {

p++;
if (loaded == filesize) {


tie_mc.loadMovie(tie[p], 1);

picture_num();

}

}

}
function prevImage() {

if (p>0) {

p--;

bigshirt_mc.loadMovie(bigshirt[p], 1);
tie_mc.loadMovie(tie[p], 1);
description_mc.loadMovie(description[p], 1);

picture_num();

}

}
function firstImage() {

if (loaded == filesize) {

bigshirt_mc.loadMovie(bigshirt[p], 1);
tie_mc.loadMovie(tie[p], 1);
description_mc.loadMovie(description[p], 1);

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<=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) {
// the below positions the thumbs in columns; this needs to be changed
target_mc._x = hit_left._x + ((k%cols)*(target_mc._width+45));
target_mc._y = Math.floor(k/cols)*(target_mc._height+5);
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);

}

// thumbnail2 scroller ////////////////////////////////////////

function thumbNailScroller2() {

// thumbnail code!
this.createEmptyMovieClip("tscroller2", 1000);
scroll_speed = 10;
tscroller2.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail2_mc._y) && (_root._ymouse<=thumbnail2_mc._y+thumbnail2_mc._height)) {
if ((_root._xmouse>=(hit_right2._x-40)) && (thumbnail2_mc.hitTest(hit_right2))) {
thumbnail2_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail2_mc.hitTest(hit_left2))) {
thumbnail2_mc._x += scroll_speed;
}
} else {
delete tscroller2.onEnterFrame;
}
};
}
     
function thumbnail2_fn(k) {

thumbnail2_mc.createEmptyMovieClip("t"+k, thumbnail2_mc.getNextHighestDepth());
tlistener2 = new Object();
tlistener2.onLoadInit = function(target2_mc) {
target_mc._x = hit_left._x + ((k%cols)*(target_mc._width+10));
target_mc._y = Math.floor(k/cols)*(target_mc._height+10);
target2_mc._x = hit_left2._x+(eval("thumbnail2_mc.t"+k)._width+25)*k;
target2_mc.pictureValue = k;
target2_mc.onRelease = function() {

p = this.pictureValue-1;
nextImage2();

};
target2_mc.onRollOver = function() {

this._alpha = 50;
thumbNailScroller2();

};
target2_mc.onRollOut = function() {

this._alpha = 100;

};

};
image2_mcl = new MovieClipLoader();
image2_mcl.addListener(tlistener2);
image2_mcl.loadClip(thumbnail2[k], "thumbnail2_mc.t"+k);

};

If I understand it right then I should be able to control each individual thumbnail like this:

thumbnail_mc.t0. something

Because the individual thumbnails are being assigned the name t(n) inside the thumbnail_mc movie clip. Right?

So what I need to do is figure out the syntax and placement to control the x and y of each thumbnail with xml.

I’ve tried something like:

thumbnail_mc.t0.[COLOR=#0000ff]_x[/COLOR] = [COLOR=#0000ff]xmlNode.childNodes*.childNodes[6].firstChild.nodeValue[/COLOR];
       thumbnail_mc.t0.[COLOR=#0000ff]_y[/COLOR]  = [COLOR=#0000ff]xmlNode.childNodes*.childNodes[6].firstChild.nodeValue;[/COLOR]

but I’m not sure if that’s the proper syntax or where exactly in the code to place it.

Here’s a portion of the XML:

<images>
    <pic>
        <thumbnail>landscape/assets/swatch_6.png</thumbnail>
        <thumbnail2>landscape/assets/swatch_1.png</thumbnail2>
        <bigshirt>landscape/assets/shirt1.png</bigshirt>
        <boothnumber>106</boothnumber>
        <description>landscape/assets/sample_text1.jpg</description>
        <xpos>100</xpos>
        <ypos>300</ypos>
        
    </pic>

It’s driving me crazy!!! Please help!

Or if I change the thumbnail line in my XML to something like this:

<thumbnail xpos=“100” ypos=“500”>landscape/assets/swatch_6.png</thumbnail>

How do I retrieve the information stored in xpos and ypos?

something like this into the 1st frame:

var myIcons:Array = new Array();
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(success) {
if (success) {
var xmlNode = this.firstChild;
var total = xmlNode.childNodes.length;
for (var i = 0; i<total; i++) {
_root.myIcons* = new Object();
_root.myIcons*.xpos = xmlNode.childNodes*.attributes.xpos;
_root.myIcons*.ypos = xmlNode.childNodes*.attributes.ypos;
_root.myIcons*.pic = xmlNode.childNodes*.firstChild;
}
loadIcon();
} else {
trace(“Failed xml loading!”);
}
};
xml.load(“myXML.xml”);
function loadIcon() {
for (var i = 0; i<myIcons.length; i++) {
_root.createEmptyMovieClip(“mc”+i, this.getNextHighestDepth());
_root[“mc”+i].loadMovie(myIcons*.pic);
_root[“mc”+i]._x = myIcons*.xpos;
_root[“mc”+i]._y = myIcons*.ypos;
}
}

this would be the xml:

<images>
<icon xpos=“100” ypos=“100”>1.jpg</icon>
<icon xpos=“200” ypos=“200”>2.jpg</icon>
<icon xpos=“300” ypos=“300”>3.jpg</icon>
</images>

should work !

Thanks so much for responding. I really appreciate the help. The only problem is that that code does work on its own, I saw it in another thread similar to what I’m trying to do, but I need it to work with the way I’ve got it set up. What I’m trying to do is a combination of the code you have shown here and the much beloved XML Photogallery tutorial. I need to control the X and Y of those thumbnails by using XML. I can’t get it right.

Well how are you looking to control their x and y values? Because if you want them to make new rows after a while thats pretty easy, i’m just not sure as to how you’re lookng to control them.

I want each thumbnail’s X and Y position to be controlled by the values in the XML document.

No one has any suggestions or solutions?