ActionScript 3.0 ile XML dosyadan veri çekmek konulu derslerimize devam ediyoruz. Bir önceki derste (ActionScript 3.0 ve XML -2-) gelen istek üzerine, birden fazla veriyi xml dosyadan nasıl çekeceğimizi göstermiştim. Bu sefer aynı konu üzerinden giderek, işi biraz daha pratik bir şekilde çözmeye çalışacağız. Ayrıca, oluşturacağımız yapıya çeşitli efekler de ekleyeceğiz.

Dersin bitmiş halini buradan görebilirsiniz.

Sahneye yine, dinamik text alanları ve bir adet mc(Movie Clip) ekleyeceğim. Dinamik text alanlarına, xml dosyadan yazı çekerken, oluşturacağım boş mc ile de resim dosyamı yine xml’den alacağım. Aslında olay basit… Bir önceki derste oluşturduğum yapıyı kullanacağım (tekrar anlatmakta fayda var tabi). Farklı olarak, oluşturduğum bu yapıyı tek bir mc içerisinde toplayıp, çoğaltacağım.

İlk iş olarak, içeriğimizi tutacak container isimli movie clip ‘i oluşturalım(Insert/New Symbol../Movie clip yada F8 kısayol tuşu). Şimdi bu mc’nin içerisinde, XML veriyi çekeceğimiz alanlarımızı oluşturacağız.

Sahnede 3 adet dinamik text alanı oluşturuyorum. Başlık, tarih ve yazı için… Bunların örnek isimlerini sırasıyla; baslik_txt, tarih_txt, yazi_txt olarak verdim. Resim için de bir tane boş mc oluşturdum. Bunun örnek ismini de resim_mc olarak veriyorum. Son olarak, bir tane de background (arkaplan) oluşturucağım. Ben arkaplan için köşeleri oval bir dikdörtgen çizdim (Rectangle Primitive Tool ile). Movie Clip yaptım ve buna da background_mc örnek ismini verdim.

Aşağıdaki resimde sahnemin en son halini ve objelerin yerleşimini gösterdim. Siz istediğiniz gibi yerleşim yapabilirsiniz.

NOT : Dinamik text alanlarınız için türkçe karakterleri embed etmeniz gerekiyor. Buradaki derste anlatmıştım.

Evet neredeyse herşey tamam. Şimdi en üst sahneye çıkalım. Oluşturduğumuz container isimli, genel yapıyı barındıran movie clip, kütüphane (library)’ye eklendi. Kütüphaneyi açıyorum ve container isimli mc’mize sağ tıklıyorum. Açılan menuden Linkage ‘e tıklıyorum ve Linkage Properties penceresini açıyorum. Burada Export for ActionScript kutucuğunu işaretli hale getirince, Export in first frame kutusu da işaretli hale geldi. Class ismine Container yazıyorum. Base class kısmına dokunmuyorum. Okeyledik.. Burada bir uyarı penceresi gelecek onuda okeyleyip geçiyorum. İşlem tamam..

Şimdi XML dosyamızı oluşturalım. Aşağıdaki xml yapısını oluşturdum ve ex.xml ismiyle .fla dosyam ile aynı yere kaydediyorum.

Code block

<data>
   <baslik name="Burası Birinci Başlık">
     <tarih>01.03.2010</tarih>
     <yazi>Buraya birinci içerik geliyor.</yazi>
     <resim>images/resim1.jpg</resim>
   </baslik>
   <baslik name="Burası İkinci Başlık">
     <tarih>02.03.2010</tarih>
     <yazi>Buraya ikinci içerik geliyor.</yazi>
     <resim>images/resim2.jpg</resim>
   </baslik>
   <baslik name="Burası Üçüncü Başlık">
     <tarih>03.03.2010</tarih>
     <yazi>Buraya üçüncü içerik geliyor.</yazi>
     <resim>images/resim3.jpg</resim>
   </baslik>
   <baslik name="Burası Dördüncü Başlık">
     <tarih>04.03.2010</tarih>
     <yazi>Buraya dördüncü içerik geliyor.</yazi>
     <resim>images/resim4.jpg</resim>
   </baslik>
   <baslik name="Burası Beşinci Başlık">
     <tarih>05.03.2010</tarih>
     <yazi>Buraya beşinci içerik geliyor.</yazi>
     <resim>images/resim5.jpg</resim>
   </baslik>
   <baslik name="Burası Altıncı Başlık">
     <tarih>06.03.2010</tarih>
     <yazi>Buraya altıncı içerik geliyor.</yazi>
     <resim>images/resim6.jpg</resim>
   </baslik>
</data>

Şimdi sıra geldi ActionScript 3.0 kodumuzu eklemeye.. Sahnede henüz boş bir katmanımız var.. İlk frame’e tıklayıp F9 kısayolu ile actions panelini açıyorum ve aşağıdaki kodu ekliyorum..

NOT : Kodları parça parça ekleyeceğim ve anlatacağım ki anlaşılsın..

Code block

import gs.*;

İlk iş olarak TweenMax’i import ediyoruz.

NOT : TweenMax’i buradan indirebilirsiniz. İçerisindeki gs klasörünü, .fla dosyanızla aynı yere kopyalayın.

Code block

var loader:URLLoader = new URLLoader()
loader.dataFormat =  URLLoaderDataFormat.TEXT
loader.addEventListener(Event.COMPLETE,  onLoadXML)
loader.load(new URLRequest("ex.xml"))

Daha sonra, XML dosyamı yüklemek için URLLoader sınıfı bir değişken yarattım. Veriyi text formatında alacağım. Yükleme tamamlandığında onLoadXML isimli fonksiyonu çağırıyorum.

Code block

var myXML = XML
function onLoadXML(e:Event):void {
  if ((e.target as URLLoader) != null ) {
    myXML = new XML(loader.data);
    myXML.ignoreWhitespace = true;
    createXmlContainer();
  }
}

Fonksiyon çalıştığında gelen veriyi kontrol ediyorum. Yarattığım myXML isimli değişkene atıyorum. Son olarak ta ana yapıyı oluşturacak fonksiyonu çağırıyorum (createXmlContainer()).

Code block

var containerHolder:MovieClip = new MovieClip();
addChild(containerHolder);

Bütün container yapısını içerisinde tuttacak yeni bir mc yarattım ve sahneye atadım. Bu yeni mc kayma hareketini oluşturmak için gerekli..

Code block

function createXmlContainer():void {
 
var list:XMLList = myXML.baslik
 for(var i:uint=0; i<list.length(); i++){
 var container:Container = new Container();
 container.baslik_txt.text = list[i].@name;
 container.tarih_txt.text = list[i].tarih;
 container.yazi_txt.text = list[i].yazi;
 var imgLoader:Loader = new Loader()
 container.resim_mc.addChild(imgLoader)
 imgLoader.load(new URLRequest(list[i].resim))
 
 container.x = 20;
 container.y = 20 + i*120;
 
 container.mouseChildren = false;
 
 container.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
 container.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
 
 containerHolder.addChild (container);
 }
 
addContainerListeners();
 
}

Bu fonksiyon ana yapıyı oluşturuyor. İlk iş olarak; xml dosyamda tekrarlayan başlık nodunu döngüye sokuyorum.

İlk başta, linkage yaparken yazdığımız yeni class ismini burada kullanıyorum. Yani container isminde, Container sınıfı bir değişkenim var; text alanları ve boş mc bunun içerisinde.. Bende i değişkenini başlık sayısına göre arttırarak, xml veriyi node isimlerine göre çekiyorum.

Daha sonra container yapılarını sahnede konumlandırıyorum ve aralarındaki mesafeyi ayarladım.

Mouse yapısını kısıtladım.

Mouse hareketlerini dinleyecek olan olay dinleyicilerini ekledim. MOUSE_OVER ve MOUSE_OUT olaylarını dinliyorum. Ona göre de gerekli fonksiyonları çağırıyorum. Burası renk değişimini sağlamak için..

contağiner yapısını, daha önce yaratmış olduğumuz; containerHolder isimli mc içerisine ekledim.

ve son olarakta kayma hareketi için ayrı bir fonksiyon daha çağırıyorum.

Code block

function mouseOverHandler(e:Event):void {
  var bck:Container = e.target as Container;
  TweenMax.to(bck.background_mc, 1, {tint: 0x333333});
}
function mouseOutHandler(e:Event):void {
  var bck:Container = e.target as Container;
  TweenMax.to(bck.background_mc, 1, {tint: 0x000000});
}

Bu fonksiyonlar ile, TweenMax’i kullanarak background(arkaplan) rengini değiştiriyorum. (bir önceki kısımda eklediğim olay dinleyicileri tarafından çalıştırılıyorlar.)

Code block

function addContainerListeners():void {
  containerHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHolder);
  containerHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHolder);
  addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

Bu fonksiyonu yukarıda kayma hareketi için çağırmıştık. Olay dinleyicilerini, bu sefer containerHolder isimli, başta yarattığımız ve bütün container yapılarını içerisinde tutan mc’ye ekliyorum. Yine mouse hareketini dinliyoruz.

Ancak bir de her frame(kare)’yi dinleyeceğiz ki, mouse hareketine göre kayma hareketi gerçekleşsin.

Code block

var mouseOverCont:Boolean = false;
 
function  mouseOverHolder(e:Event):void {
 mouseOverCont = true;
}
function  mouseOutHolder(e:Event):void {
 mouseOverCont = false;
}

Mouse’ un containerHolder üzerinde olup olamdığını bilmemiz gerekiyor. Üzerindeyse true, yok değilse false değeri atıyorum.

Code block

function enterFrameHandler(e:Event):void {
 if (mouseOverCont) {
   var distance:Number = mouseY;
   var percentage:Number = distance / stage.stageHeight;
   var targetY:Number = -((containerHolder.height + 40 -  stage.stageHeight) * percentage);
   TweenMax.to(containerHolder, 0.5, {y: Math.round(targetY)});
 }
}

Son olarak ta yukarıdaki fonksiyonu çalıştırarak kayma hareketini gerçekleştiriyorum. (bu fonksiyon her karede çalışıyor) Eğer mouse containerHolder üzerindeyse, yani mouseOverCont değeri true ise;

Sahnenin en üst kısmı ile, mouse’un o an bulunduğu mesafeyi dikeyde hesaplıyorum. Daha sonra da kayma hareketini, her seferinde tekrar blirlenen kordinata göre oluşturuyorum. Burada da TweenMax kullandım.

Son olarak bütün kodu baştan tekrar yazarsak;

Code block

import gs.*;
 
var loader:URLLoader = new URLLoader()
loader.dataFormat  =  URLLoaderDataFormat.TEXT
loader.addEventListener(Event.COMPLETE,   onLoadXML)
loader.load(new URLRequest("ex.xml"))
 
var myXML =  XML
 
function onLoadXML(e:Event):void {
  if ((e.target as  URLLoader) != null ) {
    myXML = new XML(loader.data);
    myXML.ignoreWhitespace = true;
    createXmlContainer();
  }
}
 
var  containerHolder:MovieClip = new MovieClip();
addChild(containerHolder);
 
function  createXmlContainer():void {
  var list:XMLList = myXML.baslik
  for(var i:uint=0; i<list.length(); i++){
    var container:Container =  new Container();
    container.baslik_txt.text = list[i].@name;
    container.tarih_txt.text = list[i].tarih;
    container.yazi_txt.text =  list[i].yazi;
    var imgLoader:Loader = new Loader()
    container.resim_mc.addChild(imgLoader)
    imgLoader.load(new  URLRequest(list[i].resim))
    container.x = 20;
    container.y = 20 +  i*120;
    container.mouseChildren = false;
    container.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
    container.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
    containerHolder.addChild (container);
  }
  addContainerListeners();
}
 
function mouseOverHandler(e:Event):void  {
  var bck:Container = e.target as Container;
  TweenMax.to(bck.background_mc, 1, {tint: 0x333333});
}
function  mouseOutHandler(e:Event):void {
  var bck:Container = e.target as  Container;
  TweenMax.to(bck.background_mc, 1, {tint: 0x000000});
}
 
function  addContainerListeners():void {
  containerHolder.addEventListener(MouseEvent.MOUSE_OVER,  mouseOverHolder);
  containerHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHolder);
  addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
 
var  mouseOverCont:Boolean = false;
 
function mouseOverHolder(e:Event):void  {
  mouseOverCont = true;
}
function  mouseOutHolder(e:Event):void {
  mouseOverCont = false;
}
 
function  enterFrameHandler(e:Event):void {
  if (mouseOverCont) {
    var  distance:Number = mouseY;
    var percentage:Number = distance /  stage.stageHeight;
    var targetY:Number = -((containerHolder.height +  40 - stage.stageHeight) * percentage);
    TweenMax.to(containerHolder,  0.5, {y: Math.round(targetY)});
  }
}

Evet ActionScript 3.0 kodumuzu da eklemiş olduk. Şimdi CTRL+ENTER yaparak animasyonu kontrol edebilirsiniz. Ben ekstradan çerçeve falan ekledim. Siz istediğiniz düzenlemeleri yapabilirsiniz.

Şimdilik bu kadar. Kaynak dosyayı buradan indirebilirsiniz. Teşekkürler.