Skip Navigation LinksAna sayfa : Flash yazılarım
Kategorilerim

En son beş flash AS3 notum...

Planlanan yazılarım...

Bu kategoride planlanan bir yazı yok...

flash AS3 yazilarim...

21.01.2010
Flash AS3 ile XML den veri çekme.

Flash'da dinamik veri oluşturmak mümkündür. Dinamik veri derken gösterilecek bilginin sürekli güncel kalması ve bu güncellemeninde otomatik olarak bir dosyadan yapılmasının sağlanması olayıdır.


Birlikte bir uygulama yapacağız ve bu uygulamayla XML dosyadan resimleri çektireceğiz.

Flash' da kod yazmak için kolaylık olması açısında flash develop editörünü kullanıyorum. Fikir sahibi olmak isterseniz Buradan bakabilirsiniz.

Örnek projemiz:

Projeye hazırlık.

  • Flash dosyasının hazırlanışı
  • Flash Develop dosyasının hazırlanışı
  • XML dosyamızı hazırlanışı
  • Resimlerin ayarlanışı
  • Kodlamaya geçiş
  • Flash dosyasının hazırlanışı

    Öncelikle flash programımızı açıyoruz. Yeni bir document oluşturuyoruz. Bu dosyayı xmlVeriCekme.fla olarak kayıt ediyoruz.

    Not:Kayıt ettiğimiz dosyanın bulunduğu klasörde XML, .as, .fla dosyalarımız olacak.

  • Flash Develop dosyasının hazırlanışı

    • Flash develop editörümüzü açıyoruz.
    • File -> New -> AS3 Document seçiyoruz. Gördüğünüz gibi yeni bir as3 dosyası oluşturuldu.
    • public class'ımızı public class xmlVeriCekme extends MovieClip şeklinde ayarlıyoruz.
    • Akışı başlatacak fonksiyonumuzu oluşturuyoruz. public function xmlVeriCekme ():void
    • dosyamızı .fla dosyamızın bulunduğu klasöre kayıt ediyoruz.
    • flash dökümanımıza gelerek class ismini as dosyamızın ismini veriyoruz. Yani xmlVeriCekme olarak tanıtıyoruz.

    Gördüğünüz gibi .fla ve .as dosyalarımızı oluşturduk.

  • XML dosyamızın hazırlanışı

    XML dosyamızı hazırlamak için notepad editörünü kullanabiliriz. Yapıyı aşağıdaki gibi hazırlayalım.

    XML dosyamız :
    
    
       
       
       
       
    
    
    

    Dosyamızı .as, .fla dosyalarımızın yanına xmlVeriCekme.xml olarak kayıtedelim. Ben burada sadece 4 adet resim için XML dosyası hazırladım dilerseniz bu sayıyı artabilirsiniz. Hiç problem olmayacaktır.

  • ayarladığımız 4 adet resmi dosyalarımızı koyduğumuz klasörün altında img klasörü açalım ve buraya atalım. Resimlerimizin aynı boyutta olması daha iyi olacaktır.

  • klasör yapımız aşağıdaki gibi olacaktır.

  • Sıra geldi kodlamaya geçiş.

    • Özetle bunları yapacağız;
      • XML dosyamızı yükleyeceğiz
      • XML dosyamızın içerisindeki dosya yolunu kullanarak loader nesnesi ile image dosyalarımızı çekicez
      • Bunları teker teker sahnemize eklyeceğiz.
      • Ve animasyon yapacağız.
    • Flash develop editörümüze gelelim. Aşağıdaki kodlamayı yapalım. Kod' ların yanında açıklamalarını yazdım.
    • 
          package 
      {
      	import flash.display.Loader;
      	import flash.display.MovieClip;
      	import flash.events.Event;
      	import flash.net.URLLoader;
      	import flash.net.URLRequest;
      	import fl.transitions.Tween;
      	import fl.transitions.TweenEvent;
      	import fl.transitions.easing.*;
      	
      	
      	public class xmlVeriCekme extends MovieClip
      	{
      		public var xmlResim:XML; //genel kullanım için öncelikle bir xmlResim Değişkeni tanımlıyoruz.
      		public var xmlResimUzunlugu:int; //xmlResim nesnemizin uzunluğunu tutmak için tanımlama yaptık.
      		public var frame:uint = 0; //frame' i dinlemek için "frame" değişkeni tanımlıyoruz ve 0' ıncı kareden başlamasını istiyoruz.
      		public var resimLoader:Loader; //Resim yükleme için Loader nesnesi tanımlıyoruz.
      		public var a:uint = 0; //Bu değişken ile kaçıncı resimde olduğumuzu tespit edeceğiz.
      		public var rootPath:String; //XML dosyamızdaki resimlerin hangi klasörden çekileceğini bulmak için tanımlanan string değişkeni.
      		
      		public function xmlVeriCekme ():void
      		{
      			//xml dosyamızı çağırmak için URLLoader nesnesi tanımlıyoruz.
      			//URLLoader : text tabanlı dosyaları çağırmak amaçlı kullanılır.
      			//Loader : resim içerikli dosyaları (.jpg, .png) gibi çağırmak için kullanılır.
      			//URLLoader dosyasına request nesnesini atıyoruz.
      			//URLRequest içeriğindeki dosyamızı URLLoader nesnesine taşır.
      			
      			var xmlLoader:URLLoader = new URLLoader (new URLRequest("image/ornekler/xmlVeriCekme.xml"))
      			
      			//xmlLoader nesnemiz yüklendiğinde ilgili fonksiyonu çalıştırıyoruz
      			xmlLoader.addEventListener(Event.COMPLETE, 	xmlLoaderYuklendi);
      			
      			
      		}
      		
      		public function xmlLoaderYuklendi (evt:Event):void
      		{
      			//Tanımladığımız xml nesnesine xmlLoader'a yüklenen dosya içeriğini atıyoruz. 
      			//Bunun için yeni bir XML nesnesi oluşturduk (new XML)
      			//Şu andan itibaran xmlResim nesnemizin içerisinde bizim XML dosyamızın içeriği bulunmakta.
      			xmlResim = new XML (evt.target.data);
      			//XmlResim dosyamızın içindeki node' ların uzunluğunu xmlResimUzunlugu değişkenimize atıyoruz.
      			xmlResimUzunlugu = xmlResim.node.length();
      			
      			//Resim klasörüne erişiyoruz.
      			rootPath = xmlResim.@rootPath;
      			
      			//Bu aşamda resimlerimize animasyon vermiyeceksek for döngüsü ile sahnemize eklyebiliriz. 
      			//Fakat bu örnekte animasyon kullanacağımızdan Yani resimleri teker teker görmek istediğimizden dolayı 
      			//ENTER_FRAME Event' ından yararlanacağız.
      			
      			//Sahneye EnterFrame Event tanımlıyoruz.
      			addEventListener(Event.ENTER_FRAME, resimleriEkle)
      			
      			
      		}
      		
      		function resimleriEkle(evt:Event):void
      		{
      			frame += 1; //sahnemiz hareket halinde iken her seferinde frame değişkenimizi 1 arttıryoruz.
      			
      			if (frame == 1) //frame bir de dosya yüklemesi yapacağız.
      			{
      				//Tanımladığımız resimLoader nesnesinden yeni bir tane oluşturup dosyamızın yolunu bildiriyoruz.
      				// dosyamızın yolu resimXML nesnemizde kayıtlı.
      				resimLoader = new Loader () ;
      				resimLoader.load(new URLRequest(rootPath + xmlResim.node[a].@path));
      				
      				//yüklenen resmi sahneye eklemek için resimYuklemeTamam fonksiyonundan yararlanıyoruz.
      				resimLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, resimYuklemeTamam);
      				
      				
      				
      			}
      			if (frame == 120) //yani 5 sn. sonra yüklediğimiz dosyayı kaldıracağız.
      			{
      				//Yüklenen resmi sahneden kaldırıyoruzki yeni resim geldiğinde üstüne binmesin.
      				removeChildAt(0) 
      				//Bir sonraki resmi yüklemek için a değişkenini 1 arttırıyoruz.
      				a += 1;
      				
      				//frame' i sıfırlıyoruz ki olaylar tekrarlansın.
      				frame = 0;
      				
      				//eğer a değişkeni xmlResim dosyamızın node uzunluğuna geldiyse.
      				//yani resimler bittiyse. Tekrar baştan başlatıyoruz.
      				if (a == xmlResimUzunlugu) 
      				{
      					
      					a = 0;
      					
      				}
      			}
      		}
      		
      		function resimYuklemeTamam (evt:Event):void
      		{
      			//Resim taşmasını engellemek için resim yüklendikten sonra boyutlarını
      			//sahne boyutuna göre ayarlıyoruz.
      			resimLoader.width = stage.stageWidth;
      			resimLoader.height = stage.stageHeight;
      			
      			//animasyon yapacağımızdan dolayı sahnede gözükmeyen bir yere ekliyoruz. Yani soltaraftan -700 uzaklıkta.
      			resimLoader.x=-700;
      
      			//sahneye ekliyoruz. Ama şu an gözükmüyor. Çünkü x=-700 verdik.
      			addChild (resimLoader)
      			
      			//animasyon fonksiyonuna yönlendiriyoruz.
      			animasyonYap();
      		}
      
      	function animasyonYap():void
      		{
      			//Yeni bir tween tanımlıyoruz. Bu tween resimLoader' ın x pozisyonunu -700'den 0'a getirecek ve 
      			//bunları 2 saniyede yapacak. Bunları yaparken Bounce.easeOut efekti uygulayacak. Yani çarpıp geri gelme.
      			var tw1:Tween = new Tween (resimLoader,"x",Bounce.easeOut,-700,0,2,true);
      			
      			//Animasyon bittiğinde animasyonBitti fonksiyonunu çalıştıracağız.
      			tw1.addEventListener(TweenEvent.MOTION_FINISH,animasyonBitti)
      			
      		}
      		
      		public function animasyonBitti(evt:TweenEvent):void
      		{
      			//Bu fonksiyonda resimLoader nesnemizi sahneden sağ taraftan çıkartacaktır.
      			//Bütün bunlar 4 sn. içinde olacak. Beşinci saniyede olaylar tekrarlanmaya başlayacak.
      			//EnterFrame Event 'den dolayı.
      			var tw2:Tween = new Tween (resimLoader,"x",Bounce.easeIn,0,700,2,true);
      		
      		}
      		
      	}
      	
      }
      
      

Flash AS3 ile XML' den veri çekme olayını tamamlamış olduk.



Bebeğimize isim seçiyoruz.


25 Nisan 2010 rüzgarlı bir Pazar akşamı saat 20:00 civarlarında Bebeğimiz FURKAN dünyaya merhaba dedi.

Ankete katılan tüm arkadaşlara Teşekkür ediyoruz.


FURKAN isminin anlamı