adding crossfade transitions to image gallery?
Hi everyone! I have an XML image gallery that works great, but I'm not satisfied with how the images transition. I'd like the old image to fade out while the new one is fading in whenever the viewer hits the previous or next button, so that way there's no blank background space between the transitions while the new image is being loaded. Below is my code. Any help or suggestions would be much appreciated! ![]()
________________________________________
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
//
//define link variable
//
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;
//
//adding links
//
link = xmlNode.childNodes.childNodes[2].firstChild.nodeValue;
//
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("image_and_link.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = false;
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
, "_blank");
};
//
};
function nextImage() {
p<total-1 ? p++ : p=0;
picture._alpha = 0;
picture.loadMovie(image
, 1);
}
function prevImage() {
p>0 ? p-- : p=total-1;
picture._alpha = 0;
picture.loadMovie(image
, 1);
}
function firstImage() {
p = Math.floor(Math.random()*total);
picture._alpha = 0;
picture.loadMovie(image
, 1);
}
previous_btn.onRelease = function() {
slide = 0;
prevImage();
};
next_btn.onRelease = function() {
slide = 0;
nextImage();
};
________________________________________
