Bu yazıda herhangi bir flash componenti kullanmadan basit bir scrollbar(kaydırma çubuğu) hazırlamaya çalışacağız. Önce scrollbar oluşturmak için sahneye biri diğerinin üzerinde iki çubuk ve scrollbar hareketlerine göre konumu değişecek nesneyi çizelim. Bunlara “cbk_ust”, “cbk_alt” ve “alan” instance name’lerini verelim.
Şimdi kodlamalarda ilk adım olarak üst çubuğun(cbk_ust) boyunu alan’ın boyuna göre orantılamamız gerekiyor, bu şekilde alanın boyu(height) ne kadar uzun olursa cbk_ust’un boyu da ocbk_alt’a oranla küçülecektir.
cbk_ust.height=cbk_alt.height/alan.height*cbk_alt.height
Bu kodda cbk_alt’ın(yani alan’ın sahnedeki-görünecek kısmının uzunluğu) alan’ın tamamına oranını bir değer olarak kabu 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, bu taşıdığımız objenin sınırlarını bildiren bir dikdörtgendir. Daha sonra startDrag ile taşıdık. startDrag’ın ilk parametresi lockcenter’dır merkeze kitlenmesini istemediğimzi için bunu false yaptık, ikinci parametresi ise tanımlanan 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ının alanın hareket ettiği mesafenin tüm hareket mesafesine oranıyla 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)
Bu şekilde kaydırılacak alanın uzunluğuyla bu alanın gösterilecek kısmının uzunluğu oranını kaydırma çubuklarına orantı olarak atadık ve basitçe bir scrollbar elde ettik. Bir sonraki yazı, bu scrollbar’a mouse orta tuşuyla kaydırma, tıklama ile kaydırma ve textlere uygulama gibi özellikler eklenip tam gelişmiş bir scrollbar uygulaması ile ilgili olabilir, olmaya da bilir =). Çalışmanın kaynak dosyasını aşağıdaki linkten indirebilirsiniz.
—
Kaynak Dosya:
basit_scrollbar.fla
Takip Edin (Fullusi):
Tüm Yazılar | Tüm Yazılar RSS | Twitter
——————————————————————————————-
fullusi her zamanki gibi kalite kokuyor
sağol ali, idare ediyor işte