# Easing thumbnails action on the xml gallery

**URL:** https://forum.kirupa.com/t/easing-thumbnails-action-on-the-xml-gallery/275262
**Category:** Uncategorized
**Created:** [November 11, 2008, 10:15pm UTC](https://forum.kirupa.com/t/easing-thumbnails-action-on-the-xml-gallery/275262 "2008-11-11T22:15:28Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![max999](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@max999](https://forum.kirupa.com/u/max999)
#### Post date: [November 11, 2008, 10:15pm UTC](https://forum.kirupa.com/t/easing-thumbnails-action-on-the-xml-gallery/275262/1 "2008-11-11T22:15:28Z")

</div>

Hi guys i finally got my gallery to work(using tutorial and many different threads), and it’s an autoplay cross fading xml gallery with thumbs and 4 buttons(for,prev,play, pause), no i would like to add an easing in/out effects on the thumbnails, they are not smooth at all, also they don’t load(the thumbs) in order…how do i put a preloader for the thumbs??  
I have no clue how to start, i know i need to call prototype and easing.mx function but i have no idea how to implement this to my code.  
I do this once in a blue moon, usually just when i want to change my site(i am a photographer) so on top of the fact that i am not that good i also forget a lots of things, so i apologize if i am asking something stupid.  
thanks a lot  
This is the code:

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);  
}  
id = setInterval(preloadPic, 100);  
} else {  
content = “file not loaded!”;  
}  
}  
xmlData = new XML();  
xmlData.ignoreWhite = true;  
xmlData.onLoad = loadXML;  
xmlData.load(“portfolio.xml”);  
var id, current;  
var kb = 0, p = 0;  
var slide = 1;

function preloadPic() {  
//kb == 0 ? (desc\_txt.text=description[p], picture\_num()) : null; //

```
clearInterval(id);
var con = picture.duplicateMovieClip("con"+kb, 9984+kb);

con.loadMovie(image[p]);
preloader._visible = 1;
preloader.swapDepths(con.getDepth()+3);

con._alpha = 0;
var temp = _root.createEmptyMovieClip("temp"+kb, 99+kb);
kb++;
temp.onEnterFrame = function() {
	var total = con.getBytesTotal();
	var loaded = con.getBytesLoaded();
	
	trace (loaded);
	percent = Math.round(loaded/total*100);
	trace (percent);
	
	preloader.preload_bar._xscale = percent;
	trace(preloader.preload_bar._xscale);
	
	if (con._width) {
		preloader._visible = 0;
		con.onEnterFrame = fadeIn;
		
		if (slide) {
			id = setInterval(nextImage, 4000);
		}
		delete this.onEnterFrame;
	}
};

```

}

MovieClip.prototype.fadeIn = function() {  
if (this.\_alpha\<100) {  
current.\_alpha -= 10;  
this.\_alpha += 10;  
} else {  
current.\_visible = 0;  
current = this;  
delete this.onEnterFrame;  
}  
};  
function nextImage() {  
p\<total-1 ? p++ : p=0;

```
desc_txt.text = description[p];
picture_num();
preloadPic();

```

}  
function prevImage() {  
p\>0 ? p-- : p=total-1;  
desc\_txt.text = description[p];  
picture\_num();  
preloadPic();  
}  
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;  
this._  
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);  
}

previous\_btn.onRelease = function() {  
slide = 0;  
prevImage();  
};  
next\_btn.onRelease = function() {  
slide = 0;  
nextImage();  
};  
play\_btn.onRelease = function() {  
slide = 1;  
nextImage();  
};  
pause\_btn.onRelease = function() {  
slide = 0;  
clearInterval(id);  
};  
preloadPic();