FMX - Interactive Gallery Problems

Basically I’m trying to build an image gallery that will display 9 thumbnails & clicking on a thumbnail has to load a larger version of that image & some text into a display holding area. I have gotten it so it appears as a slideshow (which is useless to me but gave me a good starting point to test the XML infeed - which works on that baisis) & am trying to build the individual thumbnail click functions & having no luck whatsoever. I’ve also been trying to pre-populate the thumbnails from the XML feed using a variable called imagePaths but I can’t even get them to preload - all I get are greyed thumbholders that when I click on them clear the display areas from the slideshow function. I have a fried head at this stage & am looking for any advice or tips that can help point me in the right direction. This is what I built so far…

slides_xml = new XML();
slides_xml.onLoad = startSlideShow;
slides_xml.load(“pictures.xml”);
slides_xml.ignoreWhite = true;

function startSlideShow(success) {
if (success == true) {
rootNode = slides_xml.firstChild;
totalSlides = rootNode.childNodes.length; firstSlideNode = rootNode.firstChild; currentSlideNode = firstSlideNode; currentIndex = 1;
updateSlide(firstSlideNode);

}
}
//
function updateSlide(newSlideNode) { imagePaths = newSlideNode.attributes.jpegURLs;
imagePathl = newSlideNode.attributes.jpegURLl;
slideText = newSlideNode.firstChild.nodeValue;
loadMovie(imagePathl, targetClip); loadMovie(imagePaths, thumbClip);
}
//
next_btn.onRelease = function() { nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
break;
} else {
currentIndex++;
element ‘currentIndex’
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
};
//
back_btn.onRelease = function() { previousSlideNode = currentSlideNode.previousSibling;
if (previousSlideNode == null) {
break;
} else {
currentIndex–;
currentSlideNode = previousSlideNode;
updateSlide(previousSlideNode);
}
};
//

// Event handler for ‘Thumbnail Selector slide’ button
story_btn1.onRelease = function(){
imagePathl = newSlideNode[0].attributes.jpegURLl; //index into slideNode array to [0] to set array access point
slideText = newSlideNode[0].attributes.nodeValue; //takes text from image tag in xml sheet defintion into container ‘slideText’ from array element [0]
slideText = eval (newSlideNode[0].attributes.nodeValue);
loadMovie(imagePathl, targetClip); //loads large picture from array access point above into container ‘targetClip’
}
//

I’ve used some basics from a Macromedia Slideshow tutorial for this & basically have been using Flash for 4 days now & have used Director before with some intermediate lingo which has given me some idea as to what is going on - but I could really do with another pair of eyes or someone else grey matter who understands this better to even give me a hint or point me in the right direction on something to read to help me here

In advance - I am much obliged to anyone who reads this or takes the time to give me any assistance or advice… I’m fairly new to action scripting & Colin Moock’s book has been a great help thus far - but I can’t seem to get my head around this?? Any ideas?? Anyone???

You could try this link: there’s an XML driven portfolio example on there that may help. Thank senocular for the link, it’s from his website…

http://www.umbc.edu/interactive/fla/

thank you sooooooo much for that one - any ideas how you remove the usage of the txt files & instead use an XML node element instead of referring to the text files???

also - How can I contact Senocular??

Thanks

  • Ian

Try sending Senocular a Private Message.

thank you guys sooooo much - you guys are WAAAAYYYY nice & helpful… will be sure to post a thankyou & links on my site when I’m done…

Thanks again guys…

  • Ian
    aka ‘StreetRacerX’

I’ve just TWO questions really in relation to senocular’s interactive xml drive portfolio if ANYONE can answer them for me;

(1) IF I am using NINE thumbnails, how do I get it to display the thumbnails in a NEAT 3x3x3 display

&

(2) Instead of using the txt files with the displayText= tags, is there a way I can include what the txt files do inside the XML nodes instead to make it neater & easier for updating instead of updating like 9 files???

Any answers or help with this will see me sorted…

Ian
aka ‘StreetRacerX’

any suggestions??? [bump]

I’ve tried breaking the for loop into three to place 3 thumbnails (out of the 9 I wanna use) onto three lines - but the thumbnaisl end up staggered on each line - any ideas how to get them to display as a perfect 3x3 grid???

here’s the for loops I redid:

lineOne = 3;

for (child = 0; child < lineOne; child++){
	currentPicture = portfolioTag.childNodes[child];
	currentThumb = menu_mc1.createEmptyMovieClip("thumbnail"+child,child);
	currentThumb._x = child * 38;
	// create image clip in currentThumb:
	image = currentThumb.createEmptyMovieClip("thumbnail_image",0);
	image.loadMovie(currentPicture.attributes.THUMB);
	currentThumb.NAME = currentPicture.attributes.NAME;
	currentThumb.IMAGE = currentPicture.attributes.IMAGE;
	currentThumb.TEXT = currentPicture.attributes.TEXT;
	currentThumb.onRollOver = currentThumb.onDragOver = function(){
		showName_txt.text = this.NAME;
	}

	currentThumb.onRollOut = currentThumb.onDragOut = function(){
		// set the text to an empty string (clearing it)
		showName_txt.text = "";
	}

	currentThumb.onPress = currentThumb.onDragOver = function(){

		image_mc.loadMovie(this.IMAGE);

		info_txt.text = "Loading...";
		timeline.loadVariables(this.TEXT);
	}
}

lineTwo = 6;

for (child = 3; child < lineTwo; child++){
	currentPicture = portfolioTag.childNodes[child];
	currentThumb = menu_mc2.createEmptyMovieClip("thumbnail"+child,child);
	currentThumb._x = child * 38;
	// create image clip in currentThumb:
	image = currentThumb.createEmptyMovieClip("thumbnail_image",0);
	image.loadMovie(currentPicture.attributes.THUMB);
	currentThumb.NAME = currentPicture.attributes.NAME;
	currentThumb.IMAGE = currentPicture.attributes.IMAGE;
	currentThumb.TEXT = currentPicture.attributes.TEXT;
	currentThumb.onRollOver = currentThumb.onDragOver = function(){
		showName_txt.text = this.NAME;
	}

	currentThumb.onRollOut = currentThumb.onDragOut = function(){
		// set the text to an empty string (clearing it)
		showName_txt.text = "";
	}

	currentThumb.onPress = currentThumb.onDragOver = function(){

		image_mc.loadMovie(this.IMAGE);

		info_txt.text = "Loading...";
		timeline.loadVariables(this.TEXT);
	}
}


lineThree = 9;

for (child = 6; child < lineThree; child++){
	currentPicture = portfolioTag.childNodes[child];
	currentThumb = menu_mc3.createEmptyMovieClip("thumbnail"+child,child);
	currentThumb._x = child * 38;
	// create image clip in currentThumb:
	image = currentThumb.createEmptyMovieClip("thumbnail_image",0);
	image.loadMovie(currentPicture.attributes.THUMB);
	currentThumb.NAME = currentPicture.attributes.NAME;
	currentThumb.IMAGE = currentPicture.attributes.IMAGE;
	currentThumb.TEXT = currentPicture.attributes.TEXT;
	currentThumb.onRollOver = currentThumb.onDragOver = function(){
		showName_txt.text = this.NAME;
	}

	currentThumb.onRollOut = currentThumb.onDragOut = function(){
		// set the text to an empty string (clearing it)
		showName_txt.text = "";
	}

	currentThumb.onPress = currentThumb.onDragOver = function(){

		image_mc.loadMovie(this.IMAGE);

		info_txt.text = "Loading...";
		timeline.loadVariables(this.TEXT);
	}
}

ANYONE have ANY ideas???

also - if ANYONE has ANY ideas about how to take the displayText variable OUT of the txt files & instead use it within the XML sheet instead I’d be REALLY REALLY greatful!!!

Thanks

– StreetRacerX –

ok - managed to cop on WHAT I was doing wrong here in relation to the arrangement of the images within the menu_mcx containers on the seond & third thumbnail presentation lines - forgot to add in a reset valuable for the x position on each line - which I resolved like so, using the 3rd line’s code as an example - the bolded items are the nw additions to correct the positioning problem:

lineThree = 9;
thumb_xpos_init = 0;

for (child = 6; child < lineThree; child++){
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc3.createEmptyMovieClip(“thumbnail”+child,child);
currentThumb._x = thumb_xpos_init * 38;
thumb_xpos_init++;
// create image clip in currentThumb:
image = currentThumb.createEmptyMovieClip(“thumbnail_image”,0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver = function(){
showName_txt.text = this.NAME;
}

currentThumb.onRollOut = currentThumb.onDragOut = function(){
// set the text to an empty string (clearing it)
showName_txt.text = “”;
}

works like a DREAM now in terms of displaying the thumbnails…only problem I have left is the one relating to moving the contents of the displayText variable within the .txt files into the XML sheet - senocular - anyone??? even a hint in the right direction would do at this stage