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!