Korzystanie ze składnika ProgressBar

Składnik ProgressBar wyświetla postęp ładowania treści, co stanowi istotną informację dla użytkownika, gdy treść ma znaczną objętość, a jej ładowanie może opóźnić wykonanie aplikacji. Składnik ProgressBar jest użyteczny podczas wyświetlania postępu ładowania obrazów i elementów aplikacji. Proces ładowania może być określony lub nieokreślony. Pasek postępu determinate stanowi liniową reprezentację postępu zadania w czasie i jest używany, gdy ilość treści do załadowania jest znana. Pasek postępu indeterminate jest używany wówczas, gdy ilość treści do załadowania nie jest znana. Istnieje również możliwość dodania składnika Label w celu wyświetlania postępu w postaci wartości procentowej.

Składnik ProgressBar korzysta z 9-plastrowej skali i zawiera karnację paska, karnację śledzenia i karnację indeterminate.

Posługiwanie się składnikiem ProgressBar

Istnieją trzy tryby korzystania ze składnika ProgressBar. Najczęściej używane są tryby: zdarzenie i próbkowanie. Te tryby określają proces ładowania, który generuje zdarzenia progress i complete (tryby zdarzeń i próbkowania) lub udostępnia właściwości bytesLoaded i bytesTotal (tryb próbkowania). Składnik ProgressBar może być również używany w trybie ręcznym — w tym celu należy ustawić właściwości maximum , minimum oraz value wraz z wywołaniami metody ProgressBar.setProgress() . Właściwość indeterminate można ustawić w taki sposób, aby określała, czy składnik ProgressBar zawiera wypełnienie w paski oraz źródło nieznanej wielkości ( true ) lub wypełnienie ciągłe i źródło znanej wielkości ( false ).

W celu określenia trybu składnika ProgressBar należy ustawić jego właściwość mode — za pośrednictwem parametru mode w Inspektorze właściwości lub Inspektorze składników albo za pomocą języka ActionScript.

Gdy składnik ProgressBar służy do prezentacji statusu przetwarzania, np. analizowania 100000 elementów — wówczas, jeśli składnik znajduje się w pojedynczej pętli klatki, aktualizacje składnika ProgressBar nie będą widoczne, ponieważ zawartość ekranu nie będzie odświeżana.

Parametry składnika ProgressBar

Dla każdej instancji składnika ProgressBar można w Inspektorze właściwości lub w Inspektorze składników ustawić następujące parametry: direction , mode i source . Dla każdego z tych parametrów istnieje odpowiednia właściwość ActionScript o takiej samej nazwie.

Istnieje możliwość napisania kodu ActionScript w celu kontrolowania tych i innych opcji dla składnika ProgressBar z wykorzystaniem jego właściwości, metod i zdarzeń. Więcej informacji zawiera opis klasy ProgressBar w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional .

Tworzenie aplikacji ze składnikiem ProgressBar

Poniższa procedura wyjaśnia jak podczas tworzenia dodać składnik ProgressBar do aplikacji. W przykładzie składnik ProgressBar korzysta z trybu zdarzenia. W trybie zdarzeń ładowana treść generuje zdarzenia progress i complete , które rozsyła składnik ProgressBar w celu określenia postępu. Gdy wystąpi zdarzenie progress , w przykładzie dochodzi do aktualizacji etykiety w celu przedstawienia procentu załadowanej treści. Gdy wystąpi zdarzenie complete , w przykładzie zostaje wyświetlony komunikat “Loading complete” oraz wartość właściwości bytesTotal , która jest wielkością pliku.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ProgressBar z panelu Składniki na stół montażowy.

    • W Inspektorze właściwości wprowadź dla instancji nazwę aPb .

    • W sekcji Parametry wprowadź 200 dla wartości X.

    • Wprowadź 260 dla wartości Y.

    • Wybierz event dla parametru mode .

  3. Przeciągnij składnik Button z panelu Składniki na stół montażowy.

    • W Inspektorze właściwości wprowadź dla instancji nazwę loadButton .

    • Wprowadź 220 dla parametru X.

    • Wprowadź 290 dla parametru Y.

    • Dla parametru label wprowadź Load Sound .

  4. Przeciągnij składnik Label na stół montażowy i nadaj instancji nazwę progLabel .

    • Wprowadź 150 dla wartości Sz.

    • Wprowadź 200 dla parametru X.

    • Wprowadź 230 dla parametru Y.

    • W sekcji Parametry usuń wartość parametru text .

  5. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript ładujący pliki dźwiękowe mp3: 

    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. Wybierz polecenie Sterowanie > Testuj film.

Tworzenie aplikacji ze składnikiem ProgressBar w trybie próbkowania

Poniższy przykład przedstawia ustawianie trybu próbkowania dla składnika ProgressBar. W trybie próbkowania postęp jest określony na podstawie wykrywania zdarzeń progress dla treści oraz za pomocą właściwości bytesLoaded i bytesTotal w celu obliczenia postępu. Ten przykład ładuje obiekt Sound, wykrywa zdarzenia progress obiektu i oblicza załadowany procent, wykorzystując w tym celu właściwości bytesLoaded i bytesTotal . Załadowany procent jest wyświetlany na etykiecie oraz na panelu Wyjście.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ProgressBar z panelu Składniki na stół montażowy i wprowadź dla niego w Inspektorze właściwości następujące wartości:

    • Dla nazwy instancji wprowadź aPb .

    • Dla wartości X wprowadź 185 .

    • Dla wartości Y wprowadź 225 .

  3. Przeciągnij składnik Label na stół montażowy i określ dla niego następujące wartości w Inspektorze właściwości:

    • Dla nazwy instancji wprowadź progLabel .

    • Dla wartości X wprowadź 180 .

    • Dla wartości Y wprowadź 180 .

    • W sekcji Parametry usuń wartość parametru text.

  4. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript, który utworzy obiekt Sound ( aSound ) i wywoła metodę loadSound() w celu załadowania dźwięku do obiektu Sound: 

    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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

Tworzenie aplikacji ze składnikiem ProgressBar w trybie ręcznym

Poniższy przykład przedstawia ustawianie trybu ręcznego dla składnika ProgressBar. W trybie ręcznym postęp należy ustawiać ręcznie, wywołując metodę setProgress() i wprowadzając do niej bieżące i maksymalne wartości w celu określenia zakresu postępu. W trybie ręcznym nie jest ustawiana właściwość source . W przykładzie wykorzystano składnik NumericStepper o wartości maksymalnej równej 250, który służy do zwiększania składnika ProgressBar. Gdy wartość w składniku NumericStepper ulegnie zmianie i wywoła zdarzenie CHANGE , wówczas moduł obsługi zdarzeń ( nsChangeHander ) wywoła metodę setProgress() w celu modyfikacji składnika ProgressBar. Nastąpi również wyświetlenie procentu postępu na podstawie wartości maksymalnej.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ProgressBar z panelu Składniki na stół montażowy i określ dla niego następujące wartości w Inspektorze właściwości:

    • Dla nazwy instancji wprowadź aPb .

    • Wprowadź 180 dla wartości X.

    • Wprowadź 175 dla wartości Y.

  3. Przeciągnij składnik NumericStepper na stół montażowy i określ dla niego następujące wartości w Inspektorze właściwości:

    • Dla nazwy instancji wprowadź aNs .

    • Wprowadź 220 dla wartości X.

    • Wprowadź 215 dla wartości Y.

    • W sekcji Parametry wprowadź 250 dla parametru maximum, 0 dla wartości minimum, 1 dla parametru stepSize oraz 0 dla parametru value.

  4. Przeciągnij składnik Label na stół montażowy i określ dla niego następujące wartości w Inspektorze właściwości:

    • Dla nazwy instancji wprowadź progLabel .

    • Wprowadź 150 dla wartości Sz.

    • Wprowadź 180 dla wartości X.

    • Wprowadź 120 dla wartości Y.

    • Na karcie Parametry usuń wartość Label parametru text.

  5. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod: 

    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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

  7. Kliknij przycisk strzałki w górę składnika NumericStepper, aby zwiększyć wartość składnika ProgressBar.

Tworzenie składnika ProgressBar przy użyciu kodu ActionScript

W poniższym przykładzie przedstawiono tworzenie składnika ProgressBar za pomocą języka ActionScript. Niniejszy przykład — oprócz tego, że tworzy składnik — stanowi kopię poprzedniego przykładu, który tworzy składnik ProgressBar w trybie ręcznym.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ProgressBar do panelu Biblioteka.

  3. Przeciągnij składnik NumericStepper do panelu Biblioteka.

  4. Przeciągnij składnik Label do panelu Biblioteka.

  5. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod: 

    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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

  7. Kliknij przycisk strzałki w górę składnika NumericStepper, aby zwiększyć wartość składnika ProgressBar.