[CS3][AS2] Flash and XML gallery. How make thumbnails clickable?

[irkev]

Hi all,

I'm making a flash gallery with XML, the thumbnails loads just fine but i cant figure out how to make the thumbnails clickable so that they can load the correct Image..

Here is the code i have so far:

var galleryXML:XML = new XML();
galleryXML.ignoreWhite = true;
this.createEmptyMovieClip("container_mc",this.getNextHighestDepth());//Container for the thumbs
this.createEmptyMovieClip("theImage_mc",this.getNextHighestDepth()); //Movie Clip to hold larger Images

theImage_mc._x = 0;
theImage_mc._y = 0;

container_mc._x = 0;
container_mc._y = 481;

//************* ONLOAD EVENT FOR THE XML DATA*******\\
galleryXML.onLoad = function(success){
	if(success)
	{
		var myImages:Array = galleryXML.firstChild.childNodes;
		//trace(myImages);
		
		for(i=0;i<myImages.length;i++){
			thumb_mc = container_mc.createEmptyMovieClip("thumb_mc" + i,i);
			clipLoader.loadClip("thumb/" + myImages[i].attributes.thumb_url,thumb_mc);
			thumb_mc.loadMovie("thumb/" + myImages[i].attributes.thumb_url);
			thumb_mc._x = 105*i;
			imgURL = "images/" + myImages[i].attributes.full_url;
			theImage_mc.loadMovie(imgURL);
		}
		
	}//end if
	else
	{
		trace("I'm dead");
	}//end else
}
galleryXML.load("gallery2.xml");

Can someone help me out with this? I can write AS, but I'm not a real pro.

Thanks in advance

[vinchenzison]

have you tried adding something like this in the for loop??

thumb_mc.onRelease = function () {
theImage_mc.loadMovie(imgURL) 
} 

[vinchenzison]

or

thumb_mc.imgURL = "images/" + myImages[i].attributes.full_url;
thumb_mc.onRelease = function () {
theImage_mc.loadMovie(this.imgURL)
} 

Might be completely wrong - I still new to AS

[irkev]

Yeah i've tried but the thumbnails remains non clickable

[irkev]

still not working

[vinchenzison]

odd. So does the arrow not change to a finger at all when hovering over the thumbs after using the thumb_mc.onRelease....

I did something like this before but was using attachMovie instead of creating a new movieclip and had it working.
Do you have a fla file I can look at?

[irkev]

yeah sure.. here it is

[vinchenzison]

have you got a snippet of the xml?

[vinchenzison]

Also, in the fla, you have the line...

thumb_mc = container_mc.attachMovie("thumb_mc","thumb_mc" + i,i); 

..but in your library there is no linkage identifier setup on the thumb mc so flash doesn't know what it's attaching.
Could that be one of the problems?

[irkev]

no this one was just a test i made, but didnt work either.. i dont use the one in the library

[irkev]

how would i do this using attachMovie?

[vinchenzison]

On the centreforvoice.co.uk site I did, I have a map and the red dots are added dynamically from an xml file generated from an sql database.
I have a reddot mc in the library and that has a linkage name of dotpos. (right click on library file and choose export for actionscript and give it its name)

I then use this code

function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        Name = [];
        xPos = [];
        yPos = [];
        Info = [];
        total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
            Name[i] = xmlNode.childNodes[i].attributes.name;
            xPos[i] = xmlNode.childNodes[i].attributes.x;
            yPos[i] = xmlNode.childNodes[i].attributes.y;
            Info[i] = xmlNode.childNodes[i].firstChild.nodeValue;
            ico = _root.map.attachMovie("dotpos", "dot"+i, i);
            ico._x = xPos[i];
            ico._y = yPos[i];
            ico.Name = Name[i];
            ico.Info = Info[i];
            ///////////////////////////
            ico.onRelease = function() {
                bla bla bla
            };
}
}
} 

But I think your createEmptyMovieClip should work. Am not sure if using attachMovieClip is best for what you want.

Can you post your xml so I can test the movie?

[irkev]

yeah here it is

[irkev]

still one to give an idea?

[vinchenzison]

right - I've been trying loads of stuff and managed to get something to work using the attachMovie method.

I think that as the jpgs are loading, they are actually replacing the created movie clip therefore making them no longer a movieclip and just an image.

What I did was to create another movieclip inside of the thumb_mc and load the image into this.

Have a look at the attached fla file to understand what I mean.

hope this helps!

[irkev]

i cant get it to show on the stage.. I mean, the width and height of my flash file should be 500 by 500 !!

And how do it load the specific big image?

[vinchenzison]

OK - Check the new file - still based on the attachMovie method but has clickable images to show larger image.

The only problem now is I think the scroll part isn't working so may need some adjusting to get going but I'm short on time at the mo and have to catch up on my work!

This is part of the code I've used

for(i=0;i<4;i++){
            thumb = container_mc.attachMovie("thumb_mc","thumb_mc" + i,i);
            loadMovie(myImages[i].attributes.thumb_url, thumb.img);
            thumb._x = 105*i;
            thumb.large = myImages[i].attributes.full_url;
            thumb.onRelease = function (){
                loadMovie(thumb.large, theImage_mc);
            }
        } 

Will try take a look at the scroll part if I find a spare moment - unless someone else wants to take a look

Cheers

[vinchenzison]

Sorry, it does work, just change the

for(i=0;i<4;i++){ 

to

for(i=0;i<myImages.length;i++){ 

[vinchenzison]

Again, sorry, another mistake - Notice it's loading the same image with every click.
THis bit

thumb.onRelease = function (){
                loadMovie(thumb.large, theImage_mc);
            } 

Should be

thumb.onRelease = function (){
                loadMovie(this.large, theImage_mc);
            } 

[irkev]

it does load the big image but it only loads the first big image. even when i click on another thumbnail, the first big image appears instead of the other one