package{
	import flash.display.Sprite;
	import fl.containers.UILoader;
	import caurina.transitions.*;
	import flash.events.MouseEvent;
 
	public class Thumbnail extends Sprite {
		private var nume:String;
		private var url:String;
		private var id:int;
		private var loader:UILoader;
 
		function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
			url = source;
			id = itemNr;
			this.nume = numeThumb;
			drawLoader();
			addEventListener(MouseEvent.MOUSE_OVER,onOver);
			addEventListener(MouseEvent.MOUSE_OUT,onOut);
			scaleThumb();
		}
		private function drawLoader():void {
			loader = new UILoader();
			loader.source = url;
			loader.mouseEnabled = false;
			loader.x = -50;
			loader.y = -50;
			addChild(loader);
 
		}
		private function onOver(event:MouseEvent):void {
			Tweener.addTween(this, {scaleX:1,scaleY:1, time:1, transition:"easeoutelastic"});
			Tweener.addTween(this, {alpha:1, time:1, transition:"easeoutelastic"});
		}
		private function onOut(event:MouseEvent):void {
			Tweener.addTween(this, {scaleX:.9,scaleY:.9, time:1, transition:"easeoutelastic"});
			Tweener.addTween(this, {alpha:.5, time:1, transition:"easeoutelastic"});
		}
		private function scaleThumb():void {
			this.scaleX = .9;
			this.scaleY = .9;
			this.alpha = .5;
		}
	}
}

import fl.containers.UILoader;
import caurina.transitions.*;
 
//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
loaderHolder.x = 1000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.y = 5;
photoLoader.x = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis */
function fileLoaded(event:Event):void {
	myXML = XML(event.target.data);
	xmlList = myXML.children();
	for (var i:int=0; i< xmlList.length(); i  ) {
		var picURL:String = xmlList[ i ].url;
		var picName:String = xmlList[ i ].big_url;
		arrayURL.push(picURL);
		arrayName.push(picName);
		holderArray[ i ] = new Thumbnail(arrayURL[ i ],i,arrayName[ i ]);
		holderArray[ i ].addEventListener(MouseEvent.CLICK,onClick);
		holderArray[ i ].name = arrayName[ i ];
		holderArray[ i ].buttonMode = true;
		if (i < nrColumns) {
			holderArray[ i ].y = 65;
			holderArray[ i ].x = i*110 65;
		} else {
			holderArray[ i ].y = holderArray[ i-nrColumns].y 110;
			holderArray[ i ].x = holderArray[ i-nrColumns].x;
		}
		thumbsHolder.addChild(holderArray[ i ]);
	}
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
	photoLoader.source = event.currentTarget.name;
	Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
	Tweener.addTween(loaderHolder, {x:10, time:1, transition:"easeInElastic"});
	Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
	Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
	Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
	Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
	Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
	Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
}

<?xml version="1.0" encoding="utf-8"?>

    
        pics/img_1.png
        big_pics/img_1.png
    
    
        pics/img_2.png

        big_pics/img_2.png