# Controlling X & Y of Thumbnails w/ XML

**URL:** <https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095>\
**Category:** flash\
**Created:** [March 23, 2006, 7:17pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095 "2006-03-23T19:17:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![zooey74](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zooey74](https://forum.kirupa.com/u/zooey74)\
**Post date:** [March 23, 2006, 7:17pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/1 "2006-03-23T19:17:46Z")

</div>

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:

```auto

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:

```auto
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:

```auto
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:

```auto
<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!

---

<div class="post-metadata">

**Author:** ![zooey74](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zooey74](https://forum.kirupa.com/u/zooey74)\
**Post date:** [March 23, 2006, 8:15pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/2 "2006-03-23T20:15:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ostmalm](https://avatars.discourse-cdn.com/v4/letter/o/dfb087/32.png) [@ostmalm](https://forum.kirupa.com/u/ostmalm)\
**Post date:** [March 23, 2006, 9:20pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/3 "2006-03-23T21:20:46Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![zooey74](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zooey74](https://forum.kirupa.com/u/zooey74)\
**Post date:** [March 23, 2006, 9:31pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/4 "2006-03-23T21:31:08Z")

</div>

> [@ostmalm](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![stereochris](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@stereochris](https://forum.kirupa.com/u/stereochris)\
**Post date:** [March 24, 2006, 12:30am UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/5 "2006-03-24T00:30:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zooey74](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zooey74](https://forum.kirupa.com/u/zooey74)\
**Post date:** [March 24, 2006, 1:12am UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/6 "2006-03-24T01:12:35Z")

</div>

> [@stereochris](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![zooey74](https://avatars.discourse-cdn.com/v4/letter/z/a9a28c/32.png) [@zooey74](https://forum.kirupa.com/u/zooey74)\
**Post date:** [March 24, 2006, 8:39pm UTC](https://forum.kirupa.com/t/controlling-x-y-of-thumbnails-w-xml/183095/7 "2006-03-24T20:39:00Z")

</div>

No one has any suggestions or solutions?