Membangun Sebuah Kategori Galeri Gambar Menggunakkan XML dan AS3

//if the cursor is over the symbol we change its alpha to 1 

function rollOver(e:MouseEvent):void{ 

  alpha = 1; 

} 

//if the cursor just moved off the symbol, we change its alpha to 0.5 

function rollOut(e:MouseEvent):void{ 

	alpha = 0.5; 

} 

//register the event listeners to run the above functions 

addEventListener(MouseEvent.ROLL_OVER, rollOver); 

addEventListener(MouseEvent.ROLL_OUT, rollOut); 

//this guarantees that the cursor changes to the little pointing hand over the symbol 

buttonMode = true; 

useHandCursor = true; 

//set its initial alpha to 0.5 

alpha = 0.5;

package { 

	public class Gallery extends MovieClip 

	{ 

	} 

}

public function Gallery():void 

{ 

}

import flash.display.*; 

import flash.events.*; 

import flash.net.*; 

import flash.text.*; 

import flash.xml.*; 

import caurina.transitions.*;

var urlLoader:URLLoader = new URLLoader();

public function Gallery():void 

{ 

	urlLoader.load(new URLRequest("pics.xml")); 

	urlLoader.addEventListener(Event.COMPLETE, urlLoadComplete); 

}

//these are non-local variables 

var xml:XML; 

var list:XMLList;

protected function urlLoadComplete(e:Event):void 

{ 

	xml = new XML(urlLoader.data); 

	list = new XMLList(xml.children());	 

}

//these are non-local variables 

var themeButtons:Array = new Array(); 

var i:int;

for(i = 0; i< list.length(); i++) 

{ 

	//we create a new instance of the ThemeButton symbol 

	var themeButton:MovieClip = new ThemeButton(); 

	//we set the content of the textfield to the name of the theme 

	themeButton.txt.text = list[i].@name; 

	//we set the name of the textfield instance to be the same as its content 

	themeButton.name = list[i].@name; 

	//we add the click eventListener 

	themeButton.addEventListener(MouseEvent.CLICK, themeClick); 

	//we place the clips in a row with 10px padding 

	themeButton.x = i*(themeButton.width+10); 

	//we put the movieclip in the themes MC 

	themes.addChild(themeButton); 

	//...and in the themeButtons array also 

	themeButtons[i] = themeButton; 

}

//change 450 to match the width of your stage 

themes.x = 450-themes.width/2;

stage.addEventListener(MouseEvent.MOUSE_MOVE, slideTheme);

//this will help calculate the position to which the themes should slide 

var ratio:Number;

protected function slideTheme(e:MouseEvent):void 

{ 

	if(mouseY>470 && mouseY< 600)//we move the themeButtons if the cursor is the themeButtons-thumbs area 

	{ 

		ratio = themes.width/850; 

		//we move the themes MC if it is longer then the stage 

		if(themes.width > 900) 

		{ 

			//if it is longer, the position depends on the cursor's X position 

			Tweener.addTween(themes, {x: (450-themes.width/2)-(mouseX-450)*ratio, time: 1});		} 

		else 

		{ 

			//otherwise, we align it to the center of the stage 

			Tweener.addTween(themes, {x: (450-themes.width/2), time: 1}); 

		} 

	} 

}

var j:int; //another loop-variable 

//if we click on one of the theme icons, it will be contained in this variable 

var themeClicked:MovieClip = new ThemeButton(); 

//the list of the pictures in a particular theme 

var picsList:XMLList; 

var smallPicSource:Array; //the thumb's source 

var bigPicSource:Array; //the big picture's source 

//this will contain all the thumbs 

var smallPics:Array; 

//this will contain the titles of the pictures in the selected theme 

var picTitles:Array;

protected function themeClick(e:MouseEvent):void 

{ 

	//the whole function shall be executed only if the theme you selected is not the same as you selected just before 

	if (themeClicked != e.currentTarget) 

	{ 

		 //makes the smallPicsMc invisible - it's on the stage, but it contains nothing yet 

		smallPicsMc.visible = false; 

		//removes the mouseMove eventListener - added afterwards 

		stage.removeEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics);  

		j = 0; //resets the loop counter to zero

if(img.numChildren > 0) 

{ 

	img.removeChildAt(0); 

} 

titleTxt.text = "";

if (themeClicked != null){ //if it's not the first time you click on a theme 

	themeClicked.alpha = 0.5; //the previous themeButton's alpha is set to 50%					themeClicked.addEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); //its rollOut eventListener is re-added 

} 

themeClicked = MovieClip(e.currentTarget); //the content of the themeClicked MC is changed to the themeButton you've just clicked on 

themeClicked.alpha = 1; //its alpha is set to 100% 

themeClicked.removeEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); //...and its rollOut eventListener is removed

//loop goes through the themeButtons array 

for (i=0; i< themeButtons.length; i++)  

{ 

	//if the name of the themeButton you clicked on matches the current item in the array 

	if (e.currentTarget.name == themeButtons[i].name)  

	{ 

		//we make picsList contain all the <pic> elements from that theme 

		picsList = new XMLList(list[i].pic);  

	} 

}

if (smallPicsMc.numChildren != 0) 

{ 

	for(i=smallPicsMc.numChildren; i>0; i--) 

	{ 

		smallPicsMc.removeChildAt(i-1); 

	} 

}

if (picsList.length() > 0)// if the picsList XMLList has at least 1 element in it 

{ 

	//we create new arrays 

	//(if they have already been created, we clear their contents) 

	smallPicSource = new Array();  

	bigPicSource = new Array(); 

	smallPics = new Array(); 

	picTitles = new Array(); 

	//loop through picsList				 

	for(i=0; i< picsList.length(); i++) 

	{  

		//now we create the source path of the images 

		smallPicSource[i] = "pics/small/" +  e.currentTarget.name +"/" + picsList.@filename[i]; 

		bigPicSource[i] = "pics/big/" +  e.currentTarget.name +"/" + picsList.@filename[i]; 

		//put the titles in the picTitles array 

		picTitles[i] = picsList.@title[i]; 

	} 

	j = -1; 

	//this will eventually load the small pics 

	smallPicLoad(null);

else 

{ 

	//if img had a picture in it... 

	if(img.numChildren > 0)  

	{ 

		img.removeChildAt(0); //...we remove it 

	} 

	//then we write, instead of the title, that this theme is coming soon 

	titleTxt.text = "Coming soon..."; 

}

protected function slideSmallPics(e:MouseEvent):void 

{ 

	if(mouseY>470 && mouseY< 600){ 

		ratio = smallPicsMc.width/850; 

		if(smallPicsMc.width > 900) 

		{ 

			Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2)-(mouseX-450)*ratio, time: 1}); 

		} 

		else 

		{ 

			Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2), time: 1}); 

		} 

	} 

}

protected function smallPicLoad(e:Event):void 

{ 

	if (j < smallPicSource.length-1) 

	{ 

		j++; 

		//it tells the user which thumbs are loading now 

		loadTxt.text = "Loading thumbs: " + (j+1).toString() +" / " + (smallPicSource.length).toString(); 

		//creates a Loader object in the array 

		smallPics[j] = new Loader(); 

		//loads the next element of the smallPicSource array 

		smallPics[j].load(new URLRequest(smallPicSource[j])); 

		//if it's loaded, call this function again 

		smallPics[j].contentLoaderInfo.addEventListener(Event.COMPLETE, smallPicLoad); 

	} 

	else 

	{ 

		//if all of the elements of the array are loaded, call the smallPicComplete function 

		smallPicComplete(); 

	} 

}

var bigClicked:String;//the source of the big picture 

var cpi:uint;//it stands for CurrentPictureIndex: it's the index of the picture which is shown

protected function smallPicComplete(e: Event = null):void 

{ 

	bigClicked = bigPicSource[0];//sets the source of the big picture to the first one in the array 

	loadPic(bigPicSource[0]);//calls the loadPic function with the same parameter 

	cpi = 0; 

	var smallPicButtons:Array = new Array();//this will store the created smallPicButtons 

	for(i=0; i< smallPics.length; i++) 

	{ 

		smallPicButtons[i] = new SmallPicButton();//we create a new instance of the SmallPicButton object in the smallPicButtons array 

		smallPicButtons[i].addChild(smallPics[i]);//we put the matching element of the smallPics array to the smallPicButtons array 

		if (i>0) 

		{ 

			smallPicButtons[i].x = smallPicButtons[i-1].x+smallPicButtons[i-1].width+20;//beginning with the second element, we place them in a line as we did it with the themeButtons 

		} 

		smallPicButtons[i].data = bigPicSource[i]; //we set its data property to the source of the big image (so that we can use it as a link) 

		smallPicsMc.addChild(smallPicButtons[i]); //we add the button to the smallPicsMc 

		smallPicButtons[i].addEventListener(MouseEvent.CLICK, click);// we add a click eventListener to that button 

	}

	smallPicsMc.visible = true; //we set the visibility back to true 

	smallPicsMc.alpha = 0; //...but we set its alpha to 0%, so that we can do a little fade-in animation 

	Tweener.addTween(smallPicsMc, {alpha:1, time:1}); //we fade in the smallPicsMc 

	stage.addEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics); //...then add the mouseMove event listener to it 

	nextArrow.addEventListener(MouseEvent.CLICK, nextPic); //add a click event listener to the navigation arrows (nextPic, prevPic functions will be explained later) 

	prevArrow.addEventListener(MouseEvent.CLICK, prevPic); 

	prevArrow.visible = false; //since we're about to reveal the first picture there won't be a previous one, so we don't need the prevArrow yet 

	nextArrow.visible = true; //we do need the nextArrow though 

	prevArrow.buttonMode = true; 

	nextArrow.buttonMode = true;

protected function nextPic(e:Event = null):void 

{ 

	if (cpi <  bigPicSource.length-1)//if there is one more picture in the bigPicSource array 

	{ 

		cpi++; 

		loadPic(bigPicSource[cpi]); //load next pic 

	} 

}

protected function nextPic(e:Event = null):void 

{ 

	if (cpi > 0)//if it's not the first picture we want to load 

	{ 

		cpi--; 

		loadPic(bigPicSource[cpi]); //load previous pic 

	} 

}

var bigPic:String; //this will store the source path of the big image

protected function click(e:MouseEvent):void 

{	 

	//if this picture is not the same as shown already	 

	if (bigClicked != e.currentTarget.data) 

	{  

		if(img.numChildren > 0) //if there is already something in the img MC 

		{ 

			img.removeChildAt(0); //we remove it 

		} 

		titleTxt.text = ""; //we set the title text field to empty 

		//we store the source path of the big picture of the thumbnail 

		bigClicked = e.currentTarget.data;  

		bigPic = e.currentTarget.data; 

		loadPic(bigPic); //pass the source path of the big pic to loadPic() 

	} 

}

var bigLoader:Loader; //this will load the big picture

protected function loadPic(bigPic):void 

{	 

	if(img.numChildren > 0) //if this is not the first picture we load 

	{ 

		img.removeChildAt(0); //we clear the previous one 

	} 

	titleTxt.text = ""; //and clear the title too

bigLoader = new Loader(); //we create the Loader object 

bigLoader.load(new URLRequest(bigPic)); //we start to load the big picture -- remember bigPic contains the source path of the big image 

bigLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress); //call progress() whenever a bit more is loaded 

bigLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigLoadComplete); //and if the big picture is loaded we call the bigLoadComplete function

for (i=0; i< bigPicSource.length; i++) 

{ 

	if (bigPic == bigPicSource[i]) //if the source path of the images match 

	{ 

		cpi = i; //we set the cpi to that index 

	} 

}

if (cpi > 0) //if this is not the first picture 

	prevArrow.visible = true; //we show the prevArrow 

if (cpi == 0) //if this is the first picture 

	prevArrow.visible = false; //we hide it 

if (cpi == bigPicSource.length-1) //if this is the last one 

	nextArrow.visible = false; //we hide the nextArrow 

if (cpi <  bigPicSource.length-1) //if this is not the last one 

	nextArrow.visible = true; //we reveal it

protected function progress(e: ProgressEvent): void  

{ 

	//we write the percentage of the loading progress into the loadTxt dynamic textfield 

	loadTxt.text = "Loading picture: " + Math.floor((e.bytesLoaded / e.bytesTotal) * 100) + "%"; 

}

protected function bigLoadComplete(e:Event):void 

{ 

	//the loading has ended and we don't need this text till the next loading 

	loadTxt.text = ""; 

	//we use cpi to get the title that belongs to this picture 

	titleTxt.text = picTitles[cpi]; 

	//we create a new bitmap object, and we put the picture in it 

	var bitmap:Bitmap = e.target.content; 

	bitmap.smoothing = true; 

	var origWidth:Number = bitmap.width; 

	var origHeight:Number = bitmap.height;

var maxWidth = 840; //the width 

var maxHeight = 420; //and the height of the space where we want to place the picture 

// -- it depends on your layout 

//these will store the new size of the image 

var newWidth:Number; 

var newHeight:Number; 

//this variable is the ratio of the sides of the image  

//we will do the resizing with the help of this ratio 

var ratio:Number = origWidth / origHeight;

//if one of the sides of the picture is longer than the space 

if (origWidth > maxWidth || origHeight > maxHeight)  

{ 

	//if the width-difference is bigger then the height-difference (portrait) 

	if (maxWidth - origWidth > maxHeight - origHeight) 

	{ 

		newHeight = maxHeight; //we set the height to the maximum 

		newWidth = Math.round (newHeight * ratio); //then we set the length of the other side accordingly 

	} 

	else //if the orientation is landscape or shaped like a square 

	{ 

		newWidth = maxWidth; //we set the width to the maximum 

		newHeight = Math.round(newWidth / ratio); //then we set the length of the other side  

	} 

} 

else //if the picture is smaller then the space 

{ 

	//the new size will be the same as the original 

	newHeight = origHeight; 

	newWidth = origWidth; 

}

bitmap.width = newWidth; //set the resized width 

bitmap.height = newHeight; //and height of the image 

bitmap.x = -bitmap.width/2; //we set the x 

bitmap.y = -bitmap.height/2; //and y coordinates  

//(since the img MC is in the center we should align the bitmap to the center of the MC) 

img.addChild(bitmap); //we put the bitmap in the MC 

img.alpha = 0; //we set the alpha of the img MC to 0% so that we can fade it in 

Tweener.addTween(img, {alpha:1, time:1}); //we fade in the img MC

package { 

	import flash.display.*; 

   import flash.events.*; 

	import flash.net.*; 

   import flash.text.*; 

	import flash.xml.*; 

	import caurina.transitions.*; 

	public class Gallery extends MovieClip 

	{ 

		var urlLoader:URLLoader = new URLLoader(); 

		var xml:XML; 

		var list:XMLList; 

		var picsList:XMLList; 

		var themeButtons:Array = new Array(); 

		var themeClicked:MovieClip = new ThemeButton(); 

		var i:int; 

		var j:int; 

		var smallPicSource:Array; 

		var bigPicSource:Array; 

		var smallPics:Array; 

		var picTitles:Array; 

		var bigLoader:Loader; 

		var bigPic:String; 

		var bigClicked:String; 

		var cpi:uint; 

		var ratio:Number 

		public function Gallery():void 

		{ 

			urlLoader.load(new URLRequest("pics.xml")); 

			urlLoader.addEventListener(Event.COMPLETE, urlLoadComplete); 

			stage.addEventListener(MouseEvent.MOUSE_MOVE, slideTheme); 

		} 

		protected function urlLoadComplete(e:Event):void{ 

			xml = new XML(urlLoader.data); 

			list = new XMLList(xml.children());	 

			for(i = 0; i 0) 

					img.removeChildAt(0); 

				titleTxt.text = ""; 

				if (themeClicked != null){ 

					themeClicked.alpha = 0.5; 

					themeClicked.addEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); 

				} 

				themeClicked = MovieClip(e.currentTarget); 

				themeClicked.alpha = 1; 

				themeClicked.removeEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); 

				for (i=0; i0; i--) 

						smallPicsMc.removeChildAt(i-1); 

				} 

				if (picsList.length() > 0) 

				{ 

					smallPicSource = new Array(); 

					bigPicSource = new Array(); 

					smallPics = new Array(); 

					picTitles = new Array(); 

					for(i=0; i 0) 

						img.removeChildAt(0); 

					titleTxt.text = "Coming soon..."; 

				} 

			} 

		} 

		protected function smallPicLoad(e:Event):void 

		{ 

			if (j <  smallPicSource.length-1) 

			{ 

				j++; 

				loadTxt.text = "Loading thumbs: " + (j+1).toString() +" / " + (smallPicSource.length).toString(); 

				smallPics[j] = new Loader(); 

				smallPics[j].load(new URLRequest(smallPicSource[j])); 

				smallPics[j].contentLoaderInfo.addEventListener(Event.COMPLETE, smallPicLoad); 

			}else 

			{ 

				smallPicComplete(); 

			} 

		} 

		protected function smallPicComplete(e: Event = null):void{ 

			bigClicked = bigPicSource[0]; 

			loadPic(bigPicSource[0]); 

			cpi = 0; 

			var smallPicButtons:Array = new Array(); 

			for(i=0; i0) 

					smallPicButtons[i].x = smallPicButtons[i-1].x+smallPicButtons[i-1].width+20; 

				smallPicButtons[i].data = bigPicSource[i]; 

				smallPicsMc.addChild(smallPicButtons[i]); 

				smallPicButtons[i].addEventListener(MouseEvent.CLICK, click); 

			} 

			smallPicsMc.visible = true; 

			smallPicsMc.alpha = 0; 

			Tweener.addTween(smallPicsMc, {alpha:1, time:1}); 

			stage.addEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics); 

			nextArrow.addEventListener(MouseEvent.CLICK, nextPic); 

			prevArrow.addEventListener(MouseEvent.CLICK, prevPic); 

			prevArrow.visible = false; 

			nextArrow.visible = true; 

			prevArrow.buttonMode = true; 

			nextArrow.buttonMode = true; 

		} 

		protected function nextPic(e:Event = null):void 

		{ 

			if (cpi <  bigPicSource.length-1) 

			{ 

				cpi++; 

				loadPic(bigPicSource[cpi]); 

			} 

		} 

		protected function prevPic(e:Event = null):void 

		{ 

			if (cpi > 0) 

			{ 

				cpi--; 

				loadPic(bigPicSource[cpi]); 

			} 

		} 

		protected function loadPic(bigPic):void 

		{	 

			if(img.numChildren > 0) 

				img.removeChildAt(0); 

			titleTxt.text = ""; 

			bigLoader = new Loader(); 

			bigLoader.load(new URLRequest(bigPic)); 

			bigLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress); 

			bigLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigLoadComplete); 

			for (i=0; i 0) 

				prevArrow.visible = true; 

			if (cpi == 0) 

				prevArrow.visible = false; 

			if (cpi == bigPicSource.length-1) 

				nextArrow.visible = false; 

			if (cpi <  bigPicSource.length-1) 

				nextArrow.visible = true; 

		} 

		protected function progress(e: ProgressEvent): void { 

			loadTxt.text = "Loading picture: " + Math.floor((e.bytesLoaded / e.bytesTotal) * 100) + "%"; 

		} 

		protected function bigLoadComplete(e:Event):void{ 

			loadTxt.text = ""; 

			titleTxt.text = picTitles[cpi]; 

			var bitmap:Bitmap = e.target.content; 

			bitmap.smoothing = true; 

			var origWidth:Number = bitmap.width; 

			var origHeight:Number = bitmap.height; 

			var maxWidth = 840; 

			var maxHeight = 420; 

			var newWidth:Number; 

			var newHeight:Number; 

			var ratio:Number = origWidth / origHeight; 

			if (origWidth > maxWidth || origHeight > maxHeight) 

			{ 

				if (maxWidth - origWidth > maxHeight - origHeight) 

				{ 

					newHeight = maxHeight; 

					newWidth = Math.round(newHeight * ratio); 

				}else 

				{ 

					newWidth = maxWidth; 

					newHeight = Math.round(newWidth / ratio); 

				} 

			}else 

			{ 

				newHeight = origHeight; 

				newWidth = origWidth; 

			} 

			bitmap.width = newWidth; 

			bitmap.height = newHeight; 

			bitmap.x = -bitmap.width/2; 

			bitmap.y = -bitmap.height/2; 

			img.addChild(bitmap); 

			img.alpha = 0; 

			Tweener.addTween(img, {alpha:1, time:1}); 

		} 

		protected function click(e:MouseEvent):void 

		{		 

			if (bigClicked != e.currentTarget.data){ 

				if(img.numChildren > 0) 

					img.removeChildAt(0); 

				titleTxt.text = ""; 

				bigClicked = e.currentTarget.data; 

				bigPic = e.currentTarget.data; 

				loadPic(bigPic); 

			} 

		} 

		protected function slideSmallPics(e:MouseEvent):void 

		{ 

			if(mouseY>470 && mouseY< 600){ 

				ratio = smallPicsMc.width/850; 

				if(smallPicsMc.width > 900) 

				{ 

					Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2)-(mouseX-450)*ratio, time: 1}); 

				} 

				else 

				{ 

					Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2), time: 1}); 

				} 

			} 

		} 

		protected function slideTheme(e:MouseEvent):void 

		{ 

			if(mouseY>470 && mouseY< 600){ 

				ratio = themes.width/850; 

				if(themes.width > 900) 

				{ 

					Tweener.addTween(themes, {x: (450-themes.width/2)-(mouseX-450)*ratio, time: 1}); 

				} 

				else 

				{ 

					Tweener.addTween(themes, {x: (450-themes.width/2), time: 1}); 

				} 

			} 

		} 

	} 

}