# Scrolling Thumbnails in MX?!?

**URL:** https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627
**Category:** flash
**Created:** [April 6, 2006, 12:52pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627 "2006-04-06T12:52:42Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 6, 2006, 12:52pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/1 "2006-04-06T12:52:42Z")

</div>

Hi everyone,

I have searched the forums for an answer to this one and have trawled through several threads and I couldn’t find an answer to my problem!

Can anyone tell me if scrolling thumbnails with the photo gallery is possible with MX?

I have done the tutorial (after the previous gallery one) and my thumbnails don’t show up, I’ve checked the XML file and everything is how it should be (as far as I know anyway). I can’t open the source files that come with the Tutorial which makes me think that it’s because they’re MX 2004 so I can’t check against anything where I’ve gone wrong. This is why I think it may be because I’ve only got MX.

Sorry if there is an answer out there somewhere, but I just couldn’t find it.

---

<div class="post-metadata">

### Author: ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)
#### Post date: [April 6, 2006, 12:53pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/2 "2006-04-06T12:53:54Z")

</div>

Post your code and it may just be a simple ammendment to get it to work.

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 6, 2006, 1:05pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/3 "2006-04-06T13:05:12Z")

</div>

Thanks Defective,

Here is the code - I don’t understand enough to make changes myself just yet to get this to work so any help is appreciated. :thumb:

```auto

function loadXML(loaded) {

if (loaded) {

xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {

image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);

}
firstImage();

} else {

content = "file not loaded!";

}

}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {

if (Key.getCode() == Key.LEFT) {

prevImage();

} else if (Key.getCode() == Key.RIGHT) {

nextImage();

}

};
Key.addListener(listen);
previous_btn.onRelease = function() {

prevImage();

};
next_btn.onRelease = function() {

nextImage();

};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {

filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {

preloader.preload_bar._xscale = 100*loaded/filesize;

} else {

preloader._visible = false;
if (picture._alpha<100) {

picture._alpha += 10;

}

}

};
function nextImage() {

if (p<(total-1)) {

p++;
if (loaded == filesize) {

picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();

}

}

}
function prevImage() {

if (p>0) {

p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();

}

}
function firstImage() {

if (loaded == filesize) {

picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();

}

}
function picture_num() {

current_pos = p+1;
pos_txt.text = current_pos+" / "+total;

}
function thumbNailScroller() {

// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {

if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {

if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {

thumbnail_mc._x -= scroll_speed;

} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {

thumbnail_mc._x += scroll_speed;

}

} else {

delete tscroller.onEnterFrame;

}

};

}
     
function thumbnails_fn(k) {

thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {

target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {

p = this.pictureValue-1;
nextImage();

};
target_mc.onRollOver = function() {

this._alpha = 50;
thumbNailScroller();

};
target_mc.onRollOut = function() {

this._alpha = 100;

};

};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);

}

```

---

<div class="post-metadata">

### Author: ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)
#### Post date: [April 6, 2006, 1:11pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/4 "2006-04-06T13:11:34Z")

</div>

That code looks like it will work fine with Flash MX, have you tried tracing?

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 6, 2006, 1:51pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/5 "2006-04-06T13:51:05Z")

</div>

I’m not too sure how to use the trace action and or what part I should be tracing. Can you help me out a bit more pleeease.

Thanks for being patient!

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 6, 2006, 2:36pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/6 "2006-04-06T14:36:49Z")

</div>

```auto
thumbnail_mc.getNextHighestDepth()

```

is mx2004 code, replace it with 9978 (or any other number)

scotty(-:

---

<div class="post-metadata">

### Author: ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)
#### Post date: [April 6, 2006, 2:38pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/7 "2006-04-06T14:38:20Z")

</div>

nice catch scotty

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 6, 2006, 2:40pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/8 "2006-04-06T14:40:31Z")

</div>

=)

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 6, 2006, 3:26pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/9 "2006-04-06T15:26:23Z")

</div>

Hi Scotty,

Thanks for helping but I am very new to AS and don’t know what I’m supposed to be changing! Can you elaborate a bit more for me please?

Thanks

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 6, 2006, 3:39pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/10 "2006-04-06T15:39:36Z")

</div>

Look in the code for this line

```auto
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());

```

and change it in

```auto
thumbnail_mc.createEmptyMovieClip("t"+k, 9978);

```

scotty(-:

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 6, 2006, 3:45pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/11 "2006-04-06T15:45:32Z")

</div>

I had tried that but there was no change. Any other ideas?

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 6, 2006, 9:36pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/12 "2006-04-06T21:36:55Z")

</div>

Oops, the moviecliploader is Flash 7 as well…

scotty(-:

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 7, 2006, 9:24am UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/13 "2006-04-07T09:24:27Z")

</div>

Hi Scotty,

I’ve done a search again and haven’t managed to find a solution to this. There are a few threads with the same problem but no solutions!! Can you give any further help?

Thanks

Dawn

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 7, 2006, 10:13am UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/14 "2006-04-07T10:13:31Z")

</div>

Try this (not tested)  
Change the loadXml function like this

```auto
function loadXML(loaded) {
	if (loaded) {
		xmlNode = this.firstChild;
		image = [];
		description = [];
		thumbnails = [];
		total = xmlNode.childNodes.length;
		for (i=0; i<total; i++) {
			image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
			description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
			thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
		}
		firstImage();
		thumbnails_fn();
	} else {
		content = "file not loaded!";
	}
}

```

And the thumbnails\_fn like this

```auto
var k = 0;
function thumbnails_fn() {
	var thumb = thumbnail_mc.createEmptyMovieClip("t"+k, 999+k);
	var temp = this.createEmptyMovieClip("temp"+k, k);
	thumb.loadMovie(thumbnails[k]);
	temp.onEnterFrame = function() {
		if (thumb._width) {
			thumb._x = hit_left._x+(thumb._width+5)*k;
			thumb.pictureValue = k;
			thumb.onRelease = function() {
				p = this.pictureValue-1;
				nextImage();
			};
			thumb.onRollOver = function() {
				this._alpha = 50;
				thumbNailScroller();
			};
			thumb.onRollOut = function() {
				this._alpha = 100;
			};
			nextThumb();
			delete this.onEnterFrame;
		}
	};
}
function nextThumb() {
	k<total-1 ? (k++, thumbNails_fn) : null;
}

```

scotty(-:

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 7, 2006, 10:56am UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/15 "2006-04-07T10:56:49Z")

</div>

Thanks Scotty, we’re getting somewhere now but not quite there yet!!! Only the first thumbnail is showing, I changed the alpha to 0 on the rollover to see if they were loading underneath and they don’t seem to be. Any ideas!!

\<creep\>Thanks so much for helping me out with this\</creep\>:)

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 7, 2006, 11:32am UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/16 "2006-04-07T11:32:06Z")

</div>

There’s a typo in my code

```auto
function nextThumb() {
    k<total-1 ? (k++, thumbnails_fn) : null;
}

```

watch the n in thumbnails\_fn 🙂

scotty(-:

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 7, 2006, 1:08pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/17 "2006-04-07T13:08:43Z")

</div>

It’s still not working;(

Is it worth me posting the code again?

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 7, 2006, 1:15pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/18 "2006-04-07T13:15:58Z")

</div>

Can you post your fla?

scotty(-:

---

<div class="post-metadata">

### Author: ![Flash\_M\_in\_X](https://avatars.discourse-cdn.com/v4/letter/f/df705f/32.png) [@Flash\_M\_in\_X](https://forum.kirupa.com/u/Flash_M_in_X)
#### Post date: [April 7, 2006, 1:48pm UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/19 "2006-04-07T13:48:28Z")

</div>

Sure, here you go.

---

<div class="post-metadata">

### Author: ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)
#### Post date: [April 8, 2006, 7:34am UTC](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627/20 "2006-04-08T07:34:42Z")

</div>

My bad, I’ve forgotten the two brackets ‘()’ behind the function, the nextThumb function should look like this

```auto
function nextThumb() {
    k<total-1 ? (k++, thumbnails_fn()) : null;
}

```

scotty(-:

[Next page](https://forum.kirupa.com/t/scrolling-thumbnails-in-mx/184627.md?page=2)