I have created an image gallery that loads from an XML file using mostly previous Kirupa threads. From Scotty’s code (I think – my head is moosh now) I got numbered buttons for navigating between the images.
Each button is a movie clip with different labeled frames for “up”, “active”, “hover”, and “down” states. I’d like to have the numbered button change color when its image is on view and then change back when a different image loads, and I can’t figure out how to do that. I know part of the problem is that the onRollOut function overrides other changes, so I’m willing to give up the rollover effect if necessary.
Though this is my first post, this website has already been a huge help to me. Thanks to everybody.
Here is my code, with most relevant parts (I hope) commented:
stop();
delay = 5000;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
link = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
link* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
firstImage();
[COLOR=Red]// HERE IS WHERE THE BUTTON FUNCTION IS CALLED[/COLOR]
[COLOR=Red] makeThumbs();[/COLOR]
[COLOR=Red]//[/COLOR]
} 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();
}
};
Key.addListener(listen);
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
pct = Math.round(loaded/filesize * 100);
preloader._visible = true;
if (loaded != filesize) {
preloader.gotoAndStop(pct);
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 20;
}
}
picture.onRelease = function() {
getURL(link[p], “_self”);
};
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
slideshow();
}
//this is just a transition animation
wavesMC.gotoAndPlay(2);
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
nextImage();
}
}
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
slideshow();
}
} else {
p = 0;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
slideshow();
}
}
wavesMC.gotoAndPlay(2);
}
[COLOR=Red]// BUTTONS FUNCTION[/COLOR]
[COLOR=Red]function makeThumbs() {
thumb._visible=0;
for (var i = 0; i<image.length; i++) {
var thmb = thumb.duplicateMovieClip(“th”+i, 100+i);
thmb.id = i;
thmb._x = thumb._x+(i*25);
thmb.info.text = i+1;
thmb.onRollOver = function() {
this.gotoAndStop(“hover”);
}
thmb.onRollOut = function() {
this.gotoAndStop(“up”);
}
thmb.onPress = function() {
this.gotoAndStop(“down”);
}
thmb.onRelease = function() {
showImage(this.id);
};
}
}
function showImage(d) {
delete this.nextImage;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[d]);
p = d;
}
wavesMC.gotoAndPlay(2);
}
[/COLOR]
