XML Gallery Help (code fix)

[nate51]

I am new to XML galleries in flash and I am using a tutorial I found online but I am not sure how to go about making a change.

I would like to change the thumbnails from displaying a single row horizontally to multiple lines.

Of course there is a restriction to width (limit thumbs to about 4 or 5 per row) as the thumbs will be displayed on the left of the main picture.

Does anyone have any idea or can point me in the right direction to solve this problem?


myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 60; //Spacing between thumbnails
for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing; //Up and down direction for thumbnails
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}
};
myPhoto.load("xmlphoto.xml");

Thanks,

-- Nate

[Medyman]

Hey Nate...

What you're going to want to do is set a variable that counts how many thumbs are loaded. When it gets to the limit (let's say 4 for examples sake), you'll want the following to happen:

1. The _x property is reset to the origin (whatever that is for your MC)
2. The _y property increases by the height of the thumb (plus some padding)
3. The counter variable is reset.

HTH

[nate51]

k...

Like I mentioned before I am really new to this, does anyone have any more info, a little more depth if possible?

[Medyman]

Hey Nate,

Sorry that you didn't get my logic. Your code isn't so newbie like, so I figured you knew enough to run with just the basic logic behind it. But maybe that code is from a tut or something.

Anyway, here's some ActionScript to get you going.


var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 0; // Initial _y coordinate of the first row
for (i=0; i<numimages; i++) {
// Your previous code
if (count == 4) { // if count = 4, we're at the end of the row
count = 0; // reset count to 0
yPos = yPos + 100; // incease the _y coordinate for the next row (100 = height of element plus padding)
}
this.thumbHolder._x = count*spacing // set _x coordinate
this.thumbHolder._y = yPos; // set _y coordinate
count++; // increase count by 1
}

Obviously remove the lines of code from you code that I've set alternate values for. The order of things is important so don't just copy and paste. Let me know if you have any questions.

[nate51]

I tried to look through the code and figure out how it goes in and replaces some of the values i currently have but it didn't work, the thumbs don't work anymore.

I put it in like so.

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 60;
var count:Number = 0;
var yPos:Number = 0;
for (i=0; i<numimages; i++) {
if (count == 4) {
count = 0;
yPos = yPos + 100;
}
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = count*spacing
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbHolder._y = yPos;
count++;
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}
};
myPhoto.load("xmlphoto.xml");

[Medyman]

The code I provided has nothing to do with the thumbs "working". I assume by working you mean loading the images.

Go back to a version that "worked" and try incorporating the code that I gave you again. You've deleted too much (such as the for loop) and not added things where I pointed out.

The portion below can go anywhere outside of the for loop in your onLoad function

var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 0; // Initial _y coordinate of the first row

The below should go beneath the code that you already have in your for loop but still within the loop.

if (count == 4) { // if count = 4, we're at the end of the row
count = 0; // reset count to 0
yPos = yPos + 100; // incease the _y coordinate for the next row (100 = height of element plus padding)
}
this.thumbHolder._x = count*spacing // set _x coordinate
this.thumbHolder._y = yPos; // set _y coordinate
count++; // increase count by 1

Edit: Also delete the following(highlighted) lines from your code

for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing; //Up and down direction for thumbnails
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}

[nate51]

Ok, this is what I have tried now.

myPhoto = new XML();
myPhoto.ignoreWhite = true;
var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 0; // Initial _y coordinate of the first row
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
if (count == 4) { // if count = 4, we're at the end of the row
count = 0; // reset count to 0
yPos = yPos + 100; // incease the _y coordinate for the next row (100 = height of element plus padding)
}
this.thumbHolder._x = count*spacing // set _x coordinate
this.thumbHolder._y = yPos; // set _y coordinate
count++; // increase count by 1
};
}
};
myPhoto.load("xmlphoto.xml");

Issue I am running into now is only one thumbnail appears now. I am not sure if there are variables I am supposed to drop numbers into for the code you have provided.

The tutorial I got the code from was not very descriptive on what does what and also I have no idea how to "add" to the code as I am new to this.

But thanks for the time and help with this so far.

[Medyman]

What problem with positioning are you having?

You can set the initial _y coordinate here

var yPos:Number = 0; // Initial _y coordinate of the first row

You can set the interval that _y position changes per row here

yPos = yPos + 100; // incease the _y coordinate for the next row (100 = height of element plus padding)
If this value is the same as the spacing variable, you can change the 100 to spacing.

The _x position is set here

this.thumbHolder._x = count*spacing // set _x coordinate
This assumes that spacing is the width of the movieclip + any buffer zone you wish to have.


If the 2nd row onwards is shifted to the right more than you would like, you'll need to change this:

count = 0; // reset count to 0
to

count = -1; // reset count to 0

HTH

[nate51]

Hey Medyman,

Thanks for taking the time and putting in the details for each line.

The issue I am having, I am not sure if it's a positioning thing. When I add the code you are helping me with the first 3 thumbnails disappear and the last one moves up to where the first one was. It's almost like it is cancelling out the other 3 and only counting the last thumb pic.

[Medyman]

Do you mind uploading your .fla so that I can take a look? It's probably something easy that I'm not realizing as I'm tying the code directly into the browser. It would probably be really fast to troubleshoot if I had something to test with.

[Medyman]

Hey Nate...

It ended up being just some missed function closing tags. If you'll notice, the onRelease function within the loop isn't closed.

Here is the fixed version:


myPhoto = new XML();
myPhoto.ignoreWhite = true;
var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 0; // Initial _y coordinate of the first row
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
}
if (count == 4) { // if count = 4, we're at the end of the row
count = -1; // reset count to 0
yPos = yPos + 100; // incease the _y coordinate for the next row (100 = height of element plus padding)
}

this.thumbHolder._x = count*spacing // set _x coordinate
this.thumbHolder._y = yPos; // set _y coordinate
count++; // increase count by 1
};
};
myPhoto.load("xmlphoto.xml");

[nate51]

Medyman,

Thanks for taking the time and sticking with my post, your work helped me fix the issue I was having. Also your description lines made it easy for me to understand what the functions do and how to use them.

I had to change a few variables to space out the thuumbs and to run the lines vertically instead of horizontal. But the code was easy to understand and took seconds to change.

Thanks a million!

-- Nate

[Medyman]

Awesome. Glad you got it working.