ScrollPane bileşenini kullanma

ScrollPane bileşenini, yükleneceği alana göre çok büyük olan içerikleri görüntülemede kullanabilirsiniz. Örneğin, büyük bir görüntünüz varsa ve uygulamanızda bu görüntü için çok küçük bir alan bulunuyorsa, görüntüyü ScrollPane öğesine yükleyebilirsiniz. ScrollPane film kliplerini, JPEG, PNG, GIF ve SWF dosyalarını kabul edebilir.

ScrollPane ve UILoader gibi bileşenler, içeriğin ne zaman yüklenmeyi bitirdiğini belirlemenize olanak sağlayan complete olayları vardır. ScrollPane veya UILoader bileşeninin özelliklerini ayarlamak istiyorsanız, complete olayını dinleyin ve olay işleyicisinde özelliği ayarlayın. Örneğin, şu kod Event öğesi için bir dinleyici oluşturur. COMPLETE olayı ve ScrollPane içeriğinin alpha özelliğini 0,5 değerine ayarlayan olay işleyicisi: 

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

ScrollPane öğesine içerik yüklerken bir konum belirtirseniz, konumu (X ve Y koordinatları) 0, 0 olarak belirtmeniz gerekir. Örneğin, kutu 0, 0 konumunda çizildiğinden, şu kod ScrollPane öğesini düzgün şekilde yükler: 

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

Daha fazla bilgi için, Adobe® Flash® Professional CS5 için ActionScript® 3.0 Başvurusu bölümündeki ScrollPane sınıfına bakın.

ScrollPane bileşeniyle kullanıcı etkileşimi

ScrollPane etkinleştirilebilir veya devre dışı bırakılabilir. Devre dışı bırakılmış ScrollPane öğesi, fare veya klavye girdisini kabul etmez. ScrollPane odağı aldığında ScrollPane öğesini denetlemek için kullanıcı şu tuşları kullanabilir:

Anahtar

Açıklama

Aşağı Ok

İçerik bir dikey satır yukarı taşınır.

Yukarı Ok

İçerik bir dikey satır aşağı taşınır.

End

İçerik ScrollPane öğesinin en alt kısmına taşınır.

Sol Ok

İçerik bir yatay satır sağa taşınır.

Sağ Ok

İçerik bir yatay satır sola taşınır.

Home

İçerik ScrollPane öğesinin en üst kısmına taşınır.

End

İçerik ScrollPane öğesinin en alt kısmına taşınır.

PageDown

İçerik bir dikey sayfa yukarı taşınır.

PageUp

İçerik bir dikey sayfa aşağı taşınır.

Kullanıcı ScrollPane öğesinin içeriğinde ve dikey ve yatay kaydırma çubuklarında ScrollPane öğesiyle etkileşim kurma için fareyi kullanabilir. scrollDrag özelliği true değerine ayarlandığında kullanıcı fareyi kullanarak içeriği sürükleyebilir. İçerikteki el işaretçisi görünümü, kullanıcının içeriği sürükleyebildiğini belirtir. Diğer denetimlerden farklı olarak, fare düğmesine basıldığında eylemler gerçekleşir ve fare düğmesi serbest bırakılıncaya kadar devam eder. İçeriğin geçerli sekme durakları yoksa, scrollDrag öğesini false değerine ayarlamanız gerekir. Aksi takdirde, içeriklerdeki tüm fare vuruşları kaydırarak sürüklemeyi çağırır.

ScrollPane bileşeni parametreleri

Özellik denetçisinde ya da Bileşen denetçisinde her ScrollPane örneği için şu parametreleri ayarlayabilirsiniz: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize ve verticalScrollPolicy . Bu parametrelerin her biri, aynı adda, karşılık gelen ActionScript özelliğine sahiptir. Bu parametrelerin olası değerleriyle ilgili bilgi için, Adobe® Flash® Professional CS5 için ActionScript® 3.0 Başvurusu bölümündeki ScrollPane sınıfına bakın.

Bunları ve ScrollPane bileşeninin ek seçeneklerini denetlemek için ScrollPane bileşeninin özelliklerini, yöntemlerini ve olaylarını kullanarak ActionScript yazabilirsiniz.

ScrollPane bileşeniyle uygulama oluşturma

Aşağıdaki prosedür, geliştirme sırasında bir uygulamaya nasıl ScrollPane bileşeni ekleneceğini açıklamaktadır. Bu örnekte, ScrollPane öğesi source özelliği tarafından belirtilen bir yoldan resim yükler.

  1. Yeni bir Flash (ActionScript 3.0) belgesi oluşturun.

  2. ScrollPane bileşenini Bileşenler panelinden Sahne Alanı'na sürükleyin ve bu bileşene aSp örnek adını verin.

  3. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve şu ActionScript kodunu girin: 

    import fl.events.ScrollEvent; 
 
aSp.setSize(300, 200); 
 
function scrollListener(event:ScrollEvent):void { 
    trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
     ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
}; 
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
 
function completeListener(event:Event):void { 
    trace(event.target.source + " has completed loading."); 
}; 
// Add listener. 
aSp.addEventListener(Event.COMPLETE, completeListener); 
 
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

  4. Uygulamayı çalıştırmak için Kontrol Et > Filmi Test Et'i seçin.

ActionScript kullanarak ScrollPane örneği oluşturma

Bu örnek bir ScrollPane öğesi oluşturur, bu öğenin boyutunu ayarlar ve source özelliğini kullanarak bu öğeye bir görüntü yükler. Ayrıca iki dinleyici oluşturur. Birinci dinleyici, scroll olayını dinler ve kullanıcı dikey veya yatay olarak kaydırma yaptıkça görüntünün konumunu görüntüler. İkinci dinleyici, complete olayını dinler ve görüntünün yüklemeyi tamamladığını bildiren bir mesajı Çıktı panelinde görüntüler.

Bu örnek, ActionScript kullanarak bir ScrollPane öğesi oluşturur ve bu öğeye 150 piksel genişliğinde ve 300 piksel uzunluğunda bir MovieClip (kırmızı bir kutu) yerleştirir.

  1. Yeni bir Flash (ActionScript 3.0) belgesi oluşturun.

  2. ScrollPane bileşenini Bileşenler panelinden Kütüphane paneline sürükleyin.

  3. DataGrid bileşenini Bileşenler panelinden Kütüphane paneline sürükleyin.

  4. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve şu ActionScript kodunu girin: 

    import fl.containers.ScrollPane; 
import fl.controls.ScrollPolicy; 
import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aSp:ScrollPane = new ScrollPane(); 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
 
aSp.source = aBox; 
aSp.setSize(150, 200); 
aSp.move(100, 100); 
 
addChild(aSp); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(0, 0, 150, 300); 
            box.graphics.endFill();         
}

  5. Uygulamayı çalıştırmak için Kontrol Et > Filmi Test Et'i seçin.