Flash AS3-Kaydırma Çubuğu ScrollBar Yapımı

Bu yazıda herhangi bir flash componenti kullanmadan basit bir scrollbar(kaydırma çubuğu) hazırlamaya çalışacağız. Önce bir scrollbar oluşturmak için sahneye biri diğerinin üzerinde iki çubuk ve scrollbar hareketlerine göre konumu değişecek nesneyi çiziyoruz. Bunlara kodlarla işlem yaptırmak için “cbk_ust”, “cbk_alt” ve “alan” instance name’lerini veriyoruz.
Şimdi kodlamalarda ilk adım olarak üst çubuğun(cbk_ust) boyunu “alan”ın boyuna göre orantılamamız gerekiyor. Böylece alanın boyu(height) ne kadar uzun olursa cbk_ust’un boyu da cbk_alt’a oranla o kadar küçülecektir.

cbk_ust.height=cbk_alt.height/alan.height*cbk_alt.height

Bu kodda cbk_alt’ın(alan’ın sahnedeki görünecek kısmının) uzunluğun alan’ın tamamına oranını bir değer olarak kabul edip bunu cbk_ust’un cbk_alt’a oranına atıyoruz. Böylece alan’ın boyuna göre cbk_ust’un boyu değişiyor.
Şimdi de cbk_ust’u taşınabilir yapmamız gerekiyor.

var rect:Rectangle = new Rectangle(cbk_alt.x, cbk_alt.y, 0, cbk_alt.height-cbk_ust.height);
cbk_ust.addEventListener(MouseEvent.MOUSE_DOWN,tasi)
function tasi(e:MouseEvent){
 cbk_ust.startDrag(false,rect)
 }
cbk_ust.addEventListener(MouseEvent.MOUSE_UP,birak)
stage.addEventListener(MouseEvent.MOUSE_UP,birak)
function birak(e:MouseEvent){
 cbk_ust.stopDrag()
 }

Bu kodda önce startDrag yapacağımız cbk_ust için bir rectangle tanımladık. Rectangle taşıdığımız objenin hareket sınırlarını bildiren bir dikdörtgendir, bunu kodlarla belirttik. Daha sonra startDrag ile taşımayı başlattık. startDrag’ın ilk parametresi lockcenter’dır. Cismi tutunca, cismin merkezinin mouse’a kilitlenmesini istemediğimiz için lockcenter parametresini false yaptık. startDrag’ın ikinci parametresi ise daha önce tanımladığımız rectangle’dır.
Şimdi de alan ismini verdiğimiz nesneyi cb_ust’un hareketlerine göre kaydırmamız gerekiyor. Sürekli çalışacak bir fonksiyon yazıyoruz:

stage.addEventListener(Event.ENTER_FRAME,cls)
function cls(e:Event){
 alan.y=cbk_alt.y+(cbk_ust.y-cbk_alt.y)*(alan.height-cbk_alt.height)/(cbk_ust.height-cbk_alt.height)
 }

Bu kodda alan’ın y koordinatını bir değere eşitledik. Bu değer, cbk_ust’un hareket ettiği mesafenin tüm hareket mesafesine oranı ve alanın hareket ettiği mesafenin tüm hareket mesafesine oranı karşılaştırarak bulunur. Bu şekilde kabaca bir scrollbar yapmış olduk. Bu kodları kullandığımızda ve son olarak da alan dediğimiz nesneye bir mask uyguladığımızda çalışmanın son hali şu şekilde olacaktır:
(scrollbar’ı kaydırın)






Son Hali:

http://www.flashdersleri.net/wp-content/uploads/2010/07/basit_scroll.swf

İndir:

http://www.flashdersleri.net/wp-content/uploads/2010/07/basit_scrollbar.zip