How to position all the thumbs around the main image.

[AniMi]

Hi there. It's again me and my problems

Well I have done tutorial by Zync. It's cool ar actually not so hard to understand. The thing I want to do is to position all my thumbs around the main image. And I want that when the gallery is opened it shows the first image in the mainHolder already. It's so uncool to see that space, before you pressed a thumb. so here is the code

 

package  
{	import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.TweenMax;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;


/**
 * ...
 * @author 
 */
public class main extends Sprite
{

	public var thumbHolder:MovieClip;
	public var mainHolder:MovieClip;
	private var xImgList:XMLList;

	public function main() 
	{
		//Load XML
		var xPhotography:XMLLoader = new XMLLoader("photography.xml");
		xPhotography.addEventListener(LoaderEvent.COMPLETE, xmlLoaded);
		xPhotography.load();
	}

	private function xmlLoaded(e:LoaderEvent):void 
	{
		var xData:XML = e.target.content;
		xImgList = new XMLList(xData.img);

		//setup loaderMax object
		var thumbLoader:LoaderMax = new LoaderMax( { name:"thumbLoader" } );
		thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);

		//setup variables for ImageLoaderVars
		var nImgWidth:Number = 120;
		var nImgHeight:Number = 100;
		var nMaxCols:Number = 2; 

		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var iLoad:ImageLoader = new ImageLoader("images/thumbs/" + xImgList[i].@url, new ImageLoaderVars()
			.name(xImgList[i].@name)
			.width(nImgWidth)
			.height(nImgHeight)
			.smoothing(true)
			.container(thumbHolder)
			.x((i % nMaxCols) * nImgWidth)
			.y(int(i / nMaxCols) * nImgHeight)
			.scaleMode("proportionalOutside")
			.crop(true)
			.prop("index", i)
			.prop("url", xImgList[i].@url)
			.alpha(0)


			)

			thumbLoader.append(iLoad);
		}

		thumbLoader.load();
	}

	private function thumbsLoaded(e:LoaderEvent):void
	{
		//Setup Click Events
		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var cdImg:ContentDisplay = LoaderMax.getContent("p" + (i + 1));
			cdImg.buttonMode = true;

			cdImg.addEventListener(MouseEvent.CLICK, thumbClick);
			TweenMax.to(cdImg, 1, { autoAlpha:1, delay:(i * 0.2) } );

		}

	}

	private function thumbClick(e:MouseEvent):void 
	{
		var vars:Object = ImageLoader(e.currentTarget.loader).vars;

		checkOldImage(vars.index)
	}

	private function checkOldImage(index:Number):void 
	{
		//check if there is already an image
		if (mainHolder.numChildren > 0)
		{
			var oldClip:Sprite = Sprite(mainHolder.getChildAt(0));
			TweenMax.to(oldClip, 0.5, { autoAlpha:0, onComplete:function() { mainHolder.removeChildAt(0); loadImage(index) }} )
		} else
		{
			loadImage(index);
		}
	}

	private function loadImage(index:Number):void 
	{
		//Get filename
		var file:String = xImgList[index].@url;
		//Setup main Image loader
		var mainLoad:ImageLoader = new ImageLoader("images/main/" + file, new ImageLoaderVars()
		.width(500)
		.height(500)
		.y(300)
		.scaleMode("proportionalInside")
		.container(mainHolder)
		.smoothing(true)
		.alpha(50)
		)
		//setup EventListeners
		mainLoad.addEventListener(LoaderEvent.COMPLETE, imageLoaded);

		mainLoad.load();
	}

	private function imageLoaded(e:LoaderEvent):void 
	{
		var imgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
		TweenMax.to(imgClip, 0, { colorTransform: { exposure:2 }} );
		TweenMax.to(imgClip, 1.5, { colorTransform: { exposure:1 },autoAlpha:1} );
	}



}

}