tryin_to_learn
10-16-2005, 06:44 PM
Hi,
I'm working on a slideshow that generates images and also thumbnails of the images from an external XML file. The next and back buttons work by going up and down nodes in the XML object; the thumbnails also access the XML file, but they target the specific node of the image, as opposed to using relative commands. The problem is that if you click on a thumbnail and then go back to using the next and back buttons, the order goes back to wherever the sequence had last stopped with the next and back buttons as opposed to giving you the image after the thumb you just clicked, which is what you would expect. Can someone point me in the right direction for how to fix this?
Here's the URL to an uploaded sample of the code below:
http://shrink-art.com/susan/school/as2/lab2/lab2.html
var rootNode:XML; // the main XML node that contains all data
var totalSlides:Number; // the number of child nodes inside rootNode
var firstSlideNode:XML; // the first node in rootNode
var lastSlideNode:XML; // the last node in rootNode
var currentSlideNode:XML; // the currently diplayed node of information
var currentIndex:Number; // the number of the current slide.
var myXML = new XML();
myXML.load("slides.xml");
myXML.ignoreWhite = true;
myXML.onLoad = function() {
rootNode = myXML.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
lastSlideNode = rootNode.lastChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
for (i=0; i<totalSlides; i++) {
makeThumb(rootNode.childNodes[i], i);
}
};
function makeThumb(newThumbNode, index) {
imagePath = newThumbNode.attributes.thumb;
this.createEmptyMovieClip("thumb_mc" + index, index);
with (this["thumb_mc" + index]) {
createTextField("slide_txt", index, 0, 40, 50, 20);
var my_fmt:TextFormat = new TextFormat();
my_fmt.font = "Verdana";
my_fmt.size = 10;
slide_txt.text = "Slide " + (index + 1);
slide_txt.setNewTextFormat(my_fmt);
_x = 220 + (35 * index);
_y = 80;
beginFill(0x996699);
lineStyle(1, 0x000000, 100);
moveTo(-1, -1);
lineTo(31, -1);
lineTo(31, 35);
lineTo(-1, 35);
lineTo(-1, -1);
endFill();
createEmptyMovieClip("holder_mc", -1);
holder_mc.loadMovie(imagePath);
}
this["thumb_mc" + index].onRelease = function() {
updateSlide(newThumbNode);
};
}
function updateSlide(newSlideNode) {
imagePath = newSlideNode.attributes.jpegURL;
slideText = newSlideNode.firstChild.nodeValue;
targetClip.loadMovie(imagePath);
}
next_btn.onRelease = function() {
nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
nextSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
} else {
currentIndex++;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
};
back_btn.onRelease = function() {
previousSlideNode = currentSlideNode.previousSibling;
if (previousSlideNode == null) {
previousSlideNode = lastSlideNode;
currentIndex = totalSlides;
currentSlideNode = previousSlideNode;
updateSlide(previousSlideNode);
} else {
currentIndex--;
currentSlideNode = previousSlideNode;
updateSlide(previousSlideNode);
}
};
var bToggle:Boolean;
switch_btn.onRelease = function() {
if (bToggle == true) {
myXML.load("slides.xml");
bToggle = false;
} else {
myXML.load("slides2.xml");
bToggle = true;
}
}
stop();
Here's slides.xml if you need that -- slides2.xml is essentially the same:
<Slides>
<slideNode jpegURL="images/image1.jpg" thumb="images/thumbs/staff1.jpg">Shannon Dammann</slideNode>
<slideNode jpegURL="images/image2.jpg" thumb="images/thumbs/staff2.jpg">Stephanie Ezust</slideNode>
<slideNode jpegURL="images/image3.jpg" thumb="images/thumbs/staff3.jpg">Henry Harsch</slideNode>
<slideNode jpegURL="images/image4.jpg" thumb="images/thumbs/staff4.jpg">Jean Harsch</slideNode>
<slideNode jpegURL="images/image5.jpg" thumb="images/thumbs/staff5.jpg">Gus Kaufman</slideNode>
<slideNode jpegURL="images/image6.jpg" thumb="images/thumbs/staff6.jpg">Jo Lewis</slideNode>
</Slides>
I'm working on a slideshow that generates images and also thumbnails of the images from an external XML file. The next and back buttons work by going up and down nodes in the XML object; the thumbnails also access the XML file, but they target the specific node of the image, as opposed to using relative commands. The problem is that if you click on a thumbnail and then go back to using the next and back buttons, the order goes back to wherever the sequence had last stopped with the next and back buttons as opposed to giving you the image after the thumb you just clicked, which is what you would expect. Can someone point me in the right direction for how to fix this?
Here's the URL to an uploaded sample of the code below:
http://shrink-art.com/susan/school/as2/lab2/lab2.html
var rootNode:XML; // the main XML node that contains all data
var totalSlides:Number; // the number of child nodes inside rootNode
var firstSlideNode:XML; // the first node in rootNode
var lastSlideNode:XML; // the last node in rootNode
var currentSlideNode:XML; // the currently diplayed node of information
var currentIndex:Number; // the number of the current slide.
var myXML = new XML();
myXML.load("slides.xml");
myXML.ignoreWhite = true;
myXML.onLoad = function() {
rootNode = myXML.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
lastSlideNode = rootNode.lastChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
for (i=0; i<totalSlides; i++) {
makeThumb(rootNode.childNodes[i], i);
}
};
function makeThumb(newThumbNode, index) {
imagePath = newThumbNode.attributes.thumb;
this.createEmptyMovieClip("thumb_mc" + index, index);
with (this["thumb_mc" + index]) {
createTextField("slide_txt", index, 0, 40, 50, 20);
var my_fmt:TextFormat = new TextFormat();
my_fmt.font = "Verdana";
my_fmt.size = 10;
slide_txt.text = "Slide " + (index + 1);
slide_txt.setNewTextFormat(my_fmt);
_x = 220 + (35 * index);
_y = 80;
beginFill(0x996699);
lineStyle(1, 0x000000, 100);
moveTo(-1, -1);
lineTo(31, -1);
lineTo(31, 35);
lineTo(-1, 35);
lineTo(-1, -1);
endFill();
createEmptyMovieClip("holder_mc", -1);
holder_mc.loadMovie(imagePath);
}
this["thumb_mc" + index].onRelease = function() {
updateSlide(newThumbNode);
};
}
function updateSlide(newSlideNode) {
imagePath = newSlideNode.attributes.jpegURL;
slideText = newSlideNode.firstChild.nodeValue;
targetClip.loadMovie(imagePath);
}
next_btn.onRelease = function() {
nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
nextSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
} else {
currentIndex++;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
};
back_btn.onRelease = function() {
previousSlideNode = currentSlideNode.previousSibling;
if (previousSlideNode == null) {
previousSlideNode = lastSlideNode;
currentIndex = totalSlides;
currentSlideNode = previousSlideNode;
updateSlide(previousSlideNode);
} else {
currentIndex--;
currentSlideNode = previousSlideNode;
updateSlide(previousSlideNode);
}
};
var bToggle:Boolean;
switch_btn.onRelease = function() {
if (bToggle == true) {
myXML.load("slides.xml");
bToggle = false;
} else {
myXML.load("slides2.xml");
bToggle = true;
}
}
stop();
Here's slides.xml if you need that -- slides2.xml is essentially the same:
<Slides>
<slideNode jpegURL="images/image1.jpg" thumb="images/thumbs/staff1.jpg">Shannon Dammann</slideNode>
<slideNode jpegURL="images/image2.jpg" thumb="images/thumbs/staff2.jpg">Stephanie Ezust</slideNode>
<slideNode jpegURL="images/image3.jpg" thumb="images/thumbs/staff3.jpg">Henry Harsch</slideNode>
<slideNode jpegURL="images/image4.jpg" thumb="images/thumbs/staff4.jpg">Jean Harsch</slideNode>
<slideNode jpegURL="images/image5.jpg" thumb="images/thumbs/staff5.jpg">Gus Kaufman</slideNode>
<slideNode jpegURL="images/image6.jpg" thumb="images/thumbs/staff6.jpg">Jo Lewis</slideNode>
</Slides>