ProgressBar bileşenini kullanma

ProgressBar bileşeni, içeriğin büyük olduğu ve uygulamanın çalıştırılmasını geciktirebileceği durumlarda kullanıcının emin olmasını sağlayan yükleme içeriği ilerlemesini görüntüler. Görüntü ve uygulama parçaları yüklemesinin ilerlemesini görüntülemek için ProgressBar öğesi yararlıdır. Yükleme işlemi, belirli veya belirsiz olabilir. determinate ilerleme çubuğu, bir görevin zaman içindeki ilerlemesinin doğrusal temsilidir ve yüklenecek içeriğin miktarı bilindiğinde kullanılır. indeterminate ilerleme çubuğu, yüklenecek içeriğin miktarı bilinmediğinde kullanılır. Yükleme ilerlemesini yüzde olarak görüntülemek için de Label etiketi ekleyebilirsiniz.

ProgressBar bileşeni 9 dilimli ölçekleme kullanır ve bir çubuk kaplaması, bir yol kaplaması ve bir belirsiz kaplaması içerir.

ProgressBar bileşeniyle kullanıcı etkileşimi

ProgressBar bileşeninin kullanılacağı üç mod vardır. En yaygın kullanılan modlar, olay modu ve sorgulu moddur. Bu modlar, progress ve complete olayları yayan (olay modu ve sorgulu mod) veya bytesLoaded ve bytesTotal özelliklerini kullanıma sunan (sorgulu mod) bir yükleme işlemini belirtir. ProgressBar.setProgress() yöntemine yapılan çağrılarla birlikte maximum , minimum ve value özelliklerini ayarlayarak ProgressBar bileşenini manuel modda da kullanabilirsiniz. ProgressBar öğesinin çizgili dolgu ve bilinmeyen boyutta bir kaynak mı ( true ) yoksa düz dolgu ve bilinmeyen boyutta bir kaynak ( false ) mı içerdiğini belirtmek için belirsiz özelliğini ayarlayabilirsiniz.

Özellik denetçisinde veya Bileşen denetçisinde mode parametresi üzerinden mode özelliğini ayarlayarak ya da ActionScript kullanarak ProgressBar öğesinin modunu ayarlayabilirsiniz.

100.000 öğe ayrıştırma gibi, ilerleme durumunu göstermek için ProgressBar öğesini kullanırsanız, tek bir kare döngüsünde olursa, ekranın yeniden çizimi olmadığından ProgressBar öğesindeki güncellemeler görünür olmaz.

ProgressBar bileşeni parametreleri

Her ProgressBar örneği için Özellik denetçisinde veya Bileşen denetçisinde şu parametreleri ayarlayabilirsiniz: direction , mode ve source . Bu parametrelerin her biri, aynı adda, karşılık gelen ActionScript özelliğine sahiptir.

Bunları ve ProgressBar bileşeninin ek seçeneklerini denetlemek için ProgressBar bileşeninin özelliklerini, yöntemlerini ve olaylarını kullanarak ActionScript yazabilirsiniz. Daha fazla bilgi için, Adobe® Flash® Professional CS5 için ActionScript® 3.0 Başvurusu bölümündeki ProgressBar sınıfına bakın.

ProgressBar ile uygulama oluşturma

Aşağıdaki prosedür, geliştirme sırasında bir uygulamaya nasıl ProgressBar bileşeni ekleneceğini göstermektedir. Bu örnekte, ProgressBar öğesi olay modunu kullanır. Olay modunda, yükleme içeriği ProgressBar öğesinin ilerlemeyi belirtmek için gönderdiği progress ve complete olaylarını gösterir. progress olayı gerçekleştiğinde, içeriğin yüklenen yüzdesini göstermek için örnek bir etiketi günceller. complete olayı gerçekleştiğinde, örnek, “Yükleme tamamlandı” mesajını ve dosyanın boyutu olan bytesTotal özelliğinin değerini görüntüler.

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

  2. ProgressBar bileşenini Bileşenler panelinden Sahne Alanı'na sürükleyin.

    • Özellik denetçisinde, aPb örnek adını girin.

    • Parametreler bölümünde X değeri için 200 girin.

    • Y değeri için 260 girin.

    • mode parametresi için event öğesini seçin.

  3. Button bileşenini Bileşenler panelinden Sahne Alanı'na sürükleyin.

    • Özellik denetçisinde örnek adı olarak loadButton girin.

    • X parametresi için 220 girin.

    • Y parametresi için 290 girin.

    • label parametresi için Load Sound girin.

  4. Label bileşenini Sahne Alanı'na sürükleyin ve bu bileşene progLabel örnek adını verin.

    • W değeri için 150 girin.

    • X parametresi için 200 girin.

    • Y parametresi için 230 girin.

    • Parametreler bölümünde text parametresinin değerini temizleyin.

  5. Eylemler panelinde, ana Zaman Çizelgesi'nde Kare 1 öğesini seçin ve bir mp3 ses dosyası yükleyen şu ActionScript kodunu girin: 

    import fl.controls.ProgressBar; 
import flash.events.ProgressEvent; 
import flash.events.IOErrorEvent; 
 
var aSound:Sound = new Sound(); 
aPb.source = aSound; 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
aPb.addEventListener(Event.COMPLETE, completeHandler); 
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); 
loadButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function progressHandler(event:ProgressEvent):void { 
        progLabel.text = ("Sound loading ... " + aPb.percentComplete); 
} 
 
function completeHandler(event:Event):void { 
    trace("Loading complete"); 
    trace("Size of file: " + aSound.bytesTotal); 
    aSound.close(); 
    loadButton.enabled = false; 
} 
 
function clickHandler(event:MouseEvent) {         
    aSound.load(request); 
} 
 
function ioErrorHandler(event:IOErrorEvent):void { 
    trace("Load failed due to: " + event.text); 
}

  6. Kontrol Et > Filmi Test Et'i seçin.

Sorgulu modda ProgressBar bileşeniyle bir uygulama oluşturma

Aşağıdaki örnek, ProgressBar öğesini sorgulu moda ayarlar. Sorgulu modda, ilerleme, yüklenen içerikteki progress olayları dinlenerek ve ilerlemenin hesaplanması için bytesLoaded ve bytesTotal özellikleri kullanılarak belirlenir. Bu örnek bir Sound nesnesi yükler, bu nesnenin progress olaylarını dinler ve bytesLoaded ve bytesTotal özelliklerini kullanarak yüklenen yüzdeyi hesaplar. Hem bir etikette hem de Çıktı panelinde yüklenen yüzdesini görüntüler.

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

  2. Bir ProgressBar bileşenini Bileşenler panelinden Sahne Alanı'na sürükleyin ve Özellik denetçisinde şu değerleri girin:

    • Örnek adı için aPb girin.

    • X değeri için 185 girin.

    • Y değeri için 225 girin.

  3. Bir Label bileşenini Sahne Alanı'na sürükleyin ve Özellik denetçisinde şu değerleri girin:

    • Örnek adı için progLabel girin.

    • X değeri için 180 girin.

    • Y değeri için 180 girin.

    • Parametreler bölümünde text parametresinin değerini temizleyin.

  4. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve bir Sound nesnesi ( aSound ) oluşturup Sound nesnesine ses yüklemek için loadSound() öğesini çağıran şu ActionScript kodunu girin: 

    import fl.controls.ProgressBarMode; 
import flash.events.ProgressEvent; 
import flash.media.Sound; 
 
var aSound:Sound = new Sound(); 
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3"; 
var request:URLRequest = new URLRequest(url); 
 
aPb.mode = ProgressBarMode.POLLED; 
aPb.source = aSound; 
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener); 
 
aSound.load(request); 
 
function loadListener(event:ProgressEvent) { 
    var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100; 
    progLabel.text = "Percent loaded: " + percentLoaded + "%"; 
    trace("Percent loaded: " + percentLoaded + "%"); 
}

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

Manuel modunda ProgressBar bileşeniyle bir uygulama oluşturma

Aşağıdaki örnek, ProgressBar öğesini manuel moduna ayarlar. Manuel modunda, setProgress() yöntemini çağırıp ilerlemeyi manuel ayarlamanız ve ilerlemenin boyutunu belirlemek için ilerlemenin geçerli ve maksimum değerlerini sağlamanız gerekir. Manuel modunda source özelliği ayarlanmaz. Bu örnek, ProgressBar öğesini artırmak için maksimum 250 değeriyle bir NumericStepper bileşenini kullanır. NumericStepper öğesindeki değer değişip bir CHANGE olayını tetiklediğinde, olay işleyicisi ( nsChangeHander ) ProgressBar öğesini yönlendirmek için setProgress() yöntemini çağırır. Ayrıca maksimum değeri esas alarak, ilerlemenin tamamlanan yüzdesini de görüntüler.

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

  2. ProgressBar bileşenini Bileşenler panelinden Sahne Alanı'na sürükleyin ve Özellik denetçisinde bileşene şu değerleri verin:

    • Örnek adı için aPb girin.

    • X değeri için 180 girin.

    • Y değeri için 175 girin.

  3. Bir NumericStepper bileşenini Sahne Alanı'na sürükleyin ve Özellik denetçisinde şu değerleri girin:

    • Örnek adı için aNs girin.

    • X değeri için 220 girin.

    • Y değeri için 215 girin.

    • Parametreler bölümünde, maximum parametresi için 250 , minimum parametresi için 0 , stepSize parametresi için 1 ve value parametresi için 0 değerini girin.

  4. Bir Label bileşenini Sahne Alanı'na sürükleyin ve Özellik denetçisinde şu değerleri girin:

    • Örnek adı için progLabel girin.

    • W değeri için 150 girin.

    • X değeri için 180 girin.

    • Y değeri için 120 girin.

    • Parametreler sekmesinde text parametresinin Label değerini temizleyin.

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

    import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
aPb.minimum = aNs.minimum; 
aPb.maximum = aNs.maximum; 
aPb.indeterminate = false; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
    aPb.value = aNs.value; 
    aPb.setProgress(aPb.value, aPb.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

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

  7. ProgressBar öğesini yönlendirmek için NumericStepper öğesinde Yukarı Ok'u tıklatın.

ActionScript kullanarak ProgressBar oluşturma

Bu örnek, ActionScript kullanarak bir ProgressBar oluşturur. Ayrıca, manuel modunda ProgressBar oluşturan önceki örneğin işlevselliğini çoğaltır.

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

  2. ProgressBar bileşenini Kütüphane paneline sürükleyin.

  3. NumericStepper bileşenini Kütüphane paneline sürükleyin.

  4. Label bileşenini Kütüphane paneline sürükleyin.

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

    import fl.controls.ProgressBar; 
import fl.controls.NumericStepper; 
import fl.controls.Label; 
import fl.controls.ProgressBarDirection; 
import fl.controls.ProgressBarMode; 
import flash.events.Event; 
 
var aPb:ProgressBar = new ProgressBar(); 
var aNs:NumericStepper = new NumericStepper(); 
var progLabel:Label = new Label(); 
 
addChild(aPb); 
addChild(aNs); 
addChild(progLabel); 
 
aPb.move(180,175); 
aPb.direction = ProgressBarDirection.RIGHT; 
aPb.mode = ProgressBarMode.MANUAL; 
 
progLabel.setSize(150, 22); 
progLabel.move(180, 150); 
progLabel.text = ""; 
 
aNs.move(220, 215); 
aNs.maximum = 250; 
aNs.minimum = 0; 
aNs.stepSize = 1; 
aNs.value = 0; 
 
aNs.addEventListener(Event.CHANGE, nsChangeHandler); 
 
function nsChangeHandler(event:Event):void { 
aPb.setProgress(aNs.value, aNs.maximum); 
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%"; 
}

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

  7. ProgressBar öğesini yönlendirmek için NumericStepper öğesinde Yukarı Ok'u tıklatın.