Sırası ile yapacaklarımız.

• Projeye hazırlanış
• Yeni bir flash document oluşturuyoruz.
• Resimlerimizi eklemek için 110x100 boyutlarında bir movie clip oluşturuyoruz
• Bu movie Clip içerisinde yükleyeceğimiz resimler için ayar yapıyoruz. Bu moviClip her bir resmimiz için tek tek oluşturulacak.
• Yükleme işlemini bildirmek için yükleniyor yazısı.
• Bu movie clip’e resimlerin yüklenmesi için Flash Develop editöründe bir sınıf oluşturuyoruz.
• Ana sınıfımızı yani projenin oluştuğu kodların olacağı sınıfı oluşturup işlemlerimizi bu sınıfta yapıyoruz.

• Projeye Hazırlanış.
  • Öncelikle bir klasör oluşturalım. Klasörümüzün adı “ucBoyutluResimGalerisi” olsun.
  • Bu klasörün içerisinde “img” ve “efekt” adlı iki klasör oluşturuyoruz.
  • “img” klasöremize “.jpg” resimlerimzi yükleyeceğiz. Resimlerimizin kare boyutlarında ve ölçülerinin 110x110 olmasına dikkat edelim. Böylelikle ekranımızda daha şık bir görüntü elde etmiş oluruz.
  • “efekt” klasörümüzün içerisinde flash içerisinde kullanacağımız tween efektleri olacak. Bunları buradan indirebilirsiniz.
  • Ve daha sonra oluşturacağımız *.fla, *.as dosyalarımızda “ucBoyutluResimGalerisi” klasöründe bulunacaklar.
    
    
• Yeni bir flash document oluşturuyoruz.
• File -> New menüsünden yeni bir flash document oluşturalım
• Dokümanımızın büyülüğünü width=1000px height=500 px olarak ayarlayalım.
• Zemin rengini siyah yapalım.
• Dosyamızı “ucBoyutluResimGalerisi.fla” olarak kayıt edelim.
  
  
• Resimlerimizi eklemek için 110x100 boyutlarında bir movie clip oluşturuyoruz
• Oluşturduğumuz flash dokümanımızın içerisinde Araçlar menüsünden “rectangle” aracını kullanarak 110x110 boyutlarında bir kare oluşturuyoruz. Bu kare bizim her bir resmimiz için yazacağımız kodlarla yeni bir örneği oluşacak.
• Bu karenin çizgi rengini beyaz olarak ayarlıyoruz ve kalınlığını 5 yapıyoruz.
• Çizgi içerisinde kalan kısmı rengini koyu gri yapabiliriz. Bu alana resim geleceğinden rengi çok önemli değil.
• Oluşturduğumuz kareyi komple seçerek movieClip’e dönüştüroyoruz. İsmini fotoBack olarak belirliyoruz.
• Movie Clip’ dönüştürürken Registration noktasını orta nokta yapıyoruz. Bunu yapmamızın nedeni resim büyüdüğünde orta noktadan büyümenin sağlanması içindir.
• "Export for Action script" seçeneğini işaretleyip Linkage ismini FotoBack olarak belirliyoruz.
• "Enable guides for 9 –slice scaling" seçeneğini işaretliyoruz. Bunun sebebi belirlediğimiz noktalardan itibaren resmi büyütmesini istememizdir.
• Ok tuşuna basıp MovieClip oluşturuyoruz.
  
  
• Bu movie Clip içerisinde yükleyeceğimiz resimler için ayar yapıyoruz. Bu moviClip her bir resmimiz için tek tek oluşturulacak.
• Oluşturduğumuz “fotoBack”isimli movieClip mizin içerisine girip kesikli çizgileri çizgilerimizin kenarına doğru çekiyoruz.
• Ekleyeceğimiz resimleri orta alana ekleyeceğimizden bu alanı da movieClip’e dönüştürüyoruz.
• İsmini "resimPano" olarak ayarlıyoruz ve registration’u orta nokta yapıyoruz.
• resimPano movieClip’i seçip “Instance Name” ini resimPano olarak ayarlıyoruz.
  
  
• Yükleme işlemini bildirmek için yükleniyor yazısı.
• fotoBack MovieCLip’e yeni bir “layer” açıp fotoBack movieClip’ imizin üstüne gelecek şekilde “Dynamic Text” ekliyoruz.
• Bunun Instance Name’i “yuklemeYazi” olarak ayarlıyoruz.
  
  
• Bu movie clip’e resimlerin yüklenmesi için Flash Develop editöründe bir sınıf oluşturuyoruz.
• Flash develop editörümüzü açalım. File -> New -> AS3 Document’ i seçelim ve yeni bir class oluşmasını sağlayalım.
• Oluşturduğumuz sınıfı .fla dosyamızın bulunduğu klasöre kayıt edelim. İsmini "fotoBack.as" verelim. Bunun nedeni flash içerisinde oluşturduğumuz Movie Clip ‘in ismi ile aynı olmak zorundadır.
• Movie Clip içerisine fotograf yükleme işlemi yaptıracağımız kodlarımızı yazalım. Kodların içerisinde gerekli açıklamaları bulabilirsiniz.
  
  
  fotoBack.as

      package 
  {
  	import flash.display.Loader;
  	import flash.display.MovieClip;
  	import flash.events.Event;
  	import flash.events.ProgressEvent;
  	import flash.filters.BlurFilter;
  	import flash.net.URLLoader;
  	import flash.net.URLRequest;
  	
  	/**
  	$(CBI)* ...
  	$(CBI)* @author ...
  	$(CBI)*/
  	public class fotoBack extends MovieClip
  	{
  		private var path:String; //yükleyeceğimiz resim dosyalarımızın yolunu belirtmek için kullanacağız.
  		private var ldr:Loader; //resim yüklemek için Loader nesnesi tanıtıyoruz.
  		
  		//yapıcı sınıfımız "constructor" bu sınıfın bir örneği oluştuğunda
  		//direkt olarak yapıcı sınıf çalışacaktır. 
  		//Bu sınıftan örnek oluşturulurken bizden path bilgisi bekleyecektir.
  		
  		public function fotoBack(path:String):void
  		{
  			this.path = path; //yukarıda tanımladığımız path değişkenimize dışarıdan gelen path' i atıyoruz.
  			ldr = new Loader (); //Loader nesnesinin örneğini oluşturuyoruz.
  			ldr.load (new URLRequest(path)); //URLrequest ile path bilgisi bekliyoruz. Ve gelen adrsteki resmi yüklediyoruz.
  			
  			ldr.contentLoaderInfo.addEventListener (Event.COMPLETE, resimYukle);//Resim yükleme olayı tamamlandığında resimYukle fonsksiyonunu çalıştıryruz.
  			ldr.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, resimYukleniyor); //resim yüklenirken nekadarının yüklendiğini oluşturduğum dynamic
  			//text dosyamızda gösteriyoruz.
  			
  			
  			
  		}
  		private function resimYukleniyor (evt:ProgressEvent):void
  		{
  			//Resimlerimiz yüklenirken ekrana nekadar yüklendiği bilgisini gösteriyoruz.
  			yuklemeYazi.text = String(  Math.round ((evt.bytesLoaded / evt.bytesTotal) * 100));
  			
  		}
  		
  		private function resimYukle (evt:Event):void
  		{
  			//yükleme işlemi bitince ekrandaki yazıyı kaldırıyoruz.
  			yuklemeYazi.visible = false;
  			
  			ldr.x = -55; //Oluşturduğumuz fotoBack MovieClip mizin registration noktası ortası olduğundan
  			ldr.y = -55; //yüklenen resmimizi 0 noktasına almasını sağlıyoruz.
  			ldr.width = 110; //fotoback nesnemiz in boyutları 110 olduğundan yüklediğimiz resmin
  			ldr.height = 110; //110 height ve width ölçülerinde olmasını sağlıyoruz.
  			resimPano.addChild (ldr); //resmizi resimPano instance name'li nesnemizin içerisine yüklüyoruz.
  			
  		}
  	}
  	
  }
  

• Ana sınıfımızı yani projenin oluştuğu kodların olacağı sınıfı oluşturup işlemlerimizi bu sınıfta yapıyoruz.
• Yeni bir as3 document oluşturuyoruz. Bu dükümanımızda artık resim yükleme ve Mouse yönüne göre hareketlerimizi yapıyoruz.
• Oluşturduğumuz sınıfı “ucBoyutluResim.as” olarak .fla doyamızın bulunduğu klasöre kayıt ediyoruz.
• Flash Dokümanımızın class ismini "ucBoyutluResim.as" olarak belirliyoruz.
  
  ucBoyutluResim.as

  package 
  {
  	
  	import flash.display.MovieClip;
  	import efekt.*;
  	import efekt.easing.*;
  	import flash.events.*;
  	
  	
  	/**
  	$(CBI)* ...
  	$(CBI)* @author ...
  	$(CBI)*/
  	public class  ucBoyutluResim extends MovieClip
  	{
  		var container:MovieClip; //21 adet resmimiz olacağından bu resimleri bir movie clip içerisine eklemek için 
  		//container movie clibi tanımlıyoruz.
  		
  		var count: Number = 0; //Bu sayac resimlerimizin ilk satırda 7 adet yüklendikten sonra sıfırlaması için tanımlıyoruz.
  		var tiklanan:MovieClip; //tıklanan movieClip'i daha sonra bulunmasını sağlama için tanımlıyoruz.
  		
  		public function ucBoyutluResim ():void
  		{
  			container = new MovieClip();
  			container.x = 100;
  			container.y = 100;
  			
  			addChild(container);
  			
  			
  			for (var i:int = 1; i <21 ; i++) //resimlerimizi eklemek için for döngüsünden yararlanıyoruz.
  			{
  				var mc:fotoBack = new fotoBack("imgucBoyut/" + i + ".jpg");//fotoBack nesnemizin örneğini oluşturduk.
  				//Böylelikle her bir i değeri için fotoBack nesnemiz oluşturulacak ve resimlerimizi container nesnemize eklemiş olcağız.
  				
  				mc.x = 125 * count; //count değişkeninin modunu aldık. Yani 7'nin katıysa sıfırladık. Buda x ekseninin 7 satırdan oluacağını belirlemiş oluyoruz.
  				mc.y = 125 * Math.floor (i / 8); //y eksenide 7 satır dolduktan sonra aşağı geçmesi için i nin değerine 8'i böldürüyoruz.
  				
  				
  				container.addChild (mc);
  				
  				
  				
  				if (i % 7 == 0)
  				{
  					count = 0;
  				}
  				else
  				{
  					++ count;
  					
  				}
  				
  				mc.addEventListener (MouseEvent.ROLL_OVER, mouseUstunde);
  				mc.addEventListener(MouseEvent.ROLL_OUT, mouseDisinda);
  				mc.addEventListener(MouseEvent.CLICK, tiklandi);
  			}
  			
  			addEventListener (MouseEvent.MOUSE_MOVE , mouseOynuyor);
  		}
  		
  		private function mouseOynuyor(evt:MouseEvent):void
  		{
  			var yerX:Number = mouseX / 1000;
  			var yerY:Number = mouseY / 500;
  			trace (yerX, yerY);
  			
  			TweenLite.to (container, 2, {rotationY:(-60+(125*yerY)), rotationX : (60 -(125*yerX)),ease:Expo.easeOut } );
  			
  		}
  		
  		private function mouseUstunde(evt:MouseEvent):void
  		{
  			
  			var mc:MovieClip = evt.currentTarget as MovieClip;
  			if (tiklanan != mc)
  			{
  				mc.alpha = 0.2;		
  			}	
  			
  		}
  		
  		private function mouseDisinda(evt:MouseEvent):void
  		{
  			var mc:MovieClip = evt.currentTarget as MovieClip;
  			if (tiklanan != mc)
  			{
  				mc.alpha = 1;
  			}
  		}
  		
  		private function tiklandi(evt:MouseEvent):void
  		{
  			var mc:MovieClip = evt.currentTarget as MovieClip;
  			mc.alpha = 1;
  			
  			if (tiklanan == null)
  			{
  				container.addChild (mc);
  			
  			TweenLite.to (mc, 0.5, { scaleX:5, scaleY:5,ease:Expo.easeInOut} );
  			tiklanan = mc;
  				
  			}
  			else if (tiklanan == mc)
  			{
  				TweenLite.to (mc, 0.5, { scaleX:1, scaleY:1, ease:Expo.easeInOut } );
  				tiklanan = null;
  			}
  			else
  			{
  				TweenLite.to (tiklanan, 0.5, { scaleX:1, scaleY:1, ease:Expo.easeInOut } );
  				container.addChild(mc);
  				TweenLite.to (mc, 0.5, { scaleX:5, scaleY:5, ease:Expo.easeInOut } );
  				tiklanan = mc;
  				
  				
  			}
  			
  		
  			
  		}
  	}
  	
  }