I’ve been cobbling together bits of code from all over these forums in an attempt to create an XML driven gallery with scrollable thumbnails, a slideshow stop/start function, next/previous buttons and a natty little border re-size but I’m now hopelessly lost and desperate for help.
So far I’ve got the bulk of it but I’ve hit a snag. The gallery works fine at a high band-width but, when I view it low everything goes to pot. I think it has something to do with the timing of the images loading against the transition from one image to the next as dictated by the slideshow.
Can anyone help me please? I’d be eternally grateful.
delay = 4000;
//-----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].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.preload_bar._xscale = 100*loaded/filesize;
if (picture._width) {
picture._x = border._x-picture._width/2;
picture._y = border._y-picture._height/2;
preloader._visible = false;
border._width += (picture._width+10-border._width)/3;
border._height += (picture._height+10-border._height)/3;
if (Math.abs(border._width-picture._width-10)<5) {
border._height = picture._height+8;
border._width = picture._width+8;
border._alpha += 10;
picture._alpha += 10;
if (picture._alpha>100) {
picture._alpha += 10;
}
}
}
};
var myInterval;
function nextImage() {
p++;
p %= image.length;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
clearInterval(myInterval);
if (playing) {
slideshow();
}
}
}
function prevImage() {
clearInterval(myInterval);
if (playing) {
slideshow();
}
if (p>0) {
p--;
} else {
p = image.length-1;
}
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();
clearInterval(myInterval);
if (playing) {
slideshow();
}
}
}
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 ((_ymouse>=thumbnail_mc._y) && (_ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_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 = (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);
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
nextImage();
}
}
playing = true;
play.onPress = function() {
playing = true;
nextImage();
};
play._visible = false;
play.onRelease = play.onReleaseOutside=function () {
this._visible = false;
//may not need not sure what you are doing
stop._visible = true;
};
stop.onPress = function() {
playing = false;
//may not need not sure what you are doing
this._visible = false;
play._visible = true;
clearInterval(myInterval);
};
If you’d like to see a running demo then it’s HERE.
Once all my questions are answered I shall of course post my final code for to use.
