Arbeiten mit der ProgressBar-Komponente

Die ProgressBar-Komponente (Fortschrittsleiste oder Verlaufsbalken) zeigt den Fortschritt beim Laden von Inhalt an. Bei umfangreichen Inhalten, die die Ausführung einer Anwendung verzögern, ist dies wichtig für den Benutzer, da er dadurch die Bestätigung bekommt, dass tatsächlich etwas passiert. Dies ist z.B. hilfreich, um den Fortschritt beim Laden von Bildern und Teilen einer Anwendung anzuzeigen. Der Fortschritt beim Laden kann bestimmt oder unbestimmt sein. Eine bestimmte Fortschrittsleiste ist eine lineare Darstellung des Fortschritts einer Aufgabe im Zeitverlauf; sie wird verwendet, wenn bekannt ist, wie groß der geladene Inhalt ist. Eine unbestimmte Fortschrittsleiste wird verwendet, wenn die Größe des geladenen Inhalts nicht bekannt ist. Sie können auch eine Label-Komponente hinzufügen, die den Ladefortschritt als Prozentsatz anzeigt.

Die ProgressBar-Komponente verwendet die Skalierung im 9-teiligen Segmentraster (Scale-9) und verfügt über Skins für die Leiste und für den Balken sowie über eine unbestimmte Skin.

Benutzerinteraktion mit der ProgressBar-Komponente

Es gibt drei Modi für den Einsatzder ProgressBar-Komponente. Am häufigsten werden der Ereignismodus („event“) und der Abfragemodus („polled“) verwendet. Diese Modi bestimmen die Art des Ladevorgangs: Es werden entweder progress - und complete -Ereignisse ausgegeben (im Ereignis- und Abfragemodus) oder es werden die bytesLoaded - und bytesTotal -Eigenschaften angezeigt (im Abfragemodus). Außerdem können Sie die ProgressBar-Komponente im manuellen Modus einsetzen, indem Sie die Eigenschaften maximum , minimum und value zusammen mit Aufrufen an die Methode ProgressBar.setProgress() einstellen. Mithilfe der Eigenschaft „indeterminate“ können Sie festlegen, ob die Fortschrittsleiste eine gestreifte Füllung hat und eine Quelle unbekannter Größe ( true ) oder eine durchgängige Füllung und eine Quelle bekannter Größe ( false ).

Sie legen den Modus der Fortschrittsleiste fest, indem Sie ihre mode -Eigenschaft angeben, und zwar entweder mithilfe des mode -Parameters im Eigenschafteninspektor oder im Komponenten-Inspektor oder mithilfe von ActionScript.

Wenn die Fortschrittsleiste einen Verarbeitungsstatus anzeigen soll, etwa bei der Analyse von 100.000 Elementen, ist Folgendes zu beachten: Bei einer einzelnen Frame-Schleife gibt es keine sichtbaren Aktualisierungen in der Fortschrittsleiste, da der Bildschirm dabei nicht neu aufgebaut wird.

Parameter der ProgressBar-Komponente

Die folgenden Parameter können für jede Instanz einer ProgressBar-Komponente im Eigenschaften- oder Komponenten-Inspektor festgelegt werden: direction , mode und source . Jeder dieser Parameter besitzt eine entsprechende ActionScript-Eigenschaft desselben Namens.

Mithilfe von ActionScript-Anweisungen können Sie diese und weitere Optionen für die ProgressBar-Komponente über deren Eigenschaften, Methoden und Ereignisse steuern. Weitere Informationen finden Sie im Abschnitt zur ProgressBar-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Erstellen einer Anwendung mit der ProgressBar-Komponente

Im Folgenden wird gezeigt, wie Sie beim Authoring eine ProgressBar-Komponente in eine Anwendung einfügen. In diesem Beispiel wird die Fortschrittsleiste im Ereignismodus eingesetzt. Im Ereignismodus werden vom ladenden Inhalt die Ereignisse progress und complete ausgegeben. Diese verarbeitet die Fortschrittsleiste für die Anzeige des Fortschritts. Wenn das Ereignis progress stattfindet, wird eine Beschriftung so aktualisiert, dass sie den Prozentsatz des bereits geladenen Inhalts anzeigt. Wenn das Ereignis complete stattfindet, wird in diesem Beispiel „Loading complete“ angezeigt sowie der Wert der Eigenschaft bytesTotal , nämlich die Größe der Datei.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie die ProgressBar-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

    • Geben Sie im Eigenschafteninspektor den Instanznamen aPb ein.

    • Geben Sie auf der Registerkarte „Parameter“ 200 als X-Wert ein.

    • Geben Sie 260 als Y-Wert ein.

    • Wählen Sie event für den Parameter mode .

  3. Ziehen Sie die Button-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

    • Geben Sie im Eigenschafteninspektor den Instanznamen loadButton ein.

    • Geben Sie 220 als X-Wert ein.

    • Geben Sie 290 als Y-Wert ein.

    • Geben Sie Show für den Parameter „label“ ein.

  4. Ziehen Sie die Label-Komponente auf die Bühne und geben Sie ihr den Instanznamen progLabel .

    • Geben Sie als Breite (B) den Wert 150 ein.

    • Geben Sie 200 als X-Wert ein.

    • Geben Sie 230 als Y-Wert ein.

    • Löschen Sie auf der Registerkarte „Parameter“ den Wert für den Parameter text .

  5. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein, um eine .mp3-Audiodatei zu laden: 

    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. Wählen Sie „Steuerung“ > „Film testen“.

Erstellen einer Anwendung mit der ProgressBar-Komponente im Abfragemodus

Im folgenden Beispiel befindet sich die ProgressBar-Komponente im Abfragemodus. Im Abfragemodus wird der Fortschritt folgendermaßen bestimmt: Es wird auf progress -Ereignisse zum ladenden Inhalt gewartet und mithilfe der Eigenschaften bytesLoaded und bytesTotal des ladenden Inhalts der Fortschritt berechnet. Dieses Beispiel lädt ein Sound-Objekt, wartet auf seine progress -Ereignisse und berechnet den geladenen Prozentsatz unter Verwendung der Eigenschaften bytesLoaded und bytesTotal . Der bereits geladene Inhalt wird als Prozentwert in einer Bezeichnung und im Bedienfeld „Ausgabe“ angezeigt.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine ProgressBar-Komponente vom Bedienfeld „Komponenten“ auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie als Instanznamen aPb ein.

    • Geben Sie 185 als X-Wert ein.

    • Geben Sie 225 als Y-Wert ein.

  3. Ziehen Sie eine Label-Komponente auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie als Instanznamen progLabel ein.

    • Geben Sie 180 als X-Wert ein.

    • Geben Sie 180 als Y-Wert ein.

    • Löschen Sie auf der Registerkarte „Parameter“ den Wert für den Parameter „text“.

  4. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie Bild 1 in der Zeitleiste aus und geben Sie den folgenden ActionScript-Code ein, mit dem ein Soundobjekt ( aSound ) erstellt und die Methode loadSound() aufgerufen wird, um einen Sound in das Soundobjekt zu laden: 

    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. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

Erstellen einer Anwendung mit der ProgressBar-Komponente im manuellen Modus

Im folgenden Beispiel befindet sich die ProgressBar-Komponente im manuellen Modus. Im manuellen Modus müssen Sie den Fortschritt manuell einstellen, indem Sie die Methode setProgress() aufrufen und ihr den aktuellen und den maximalen Wert übergeben. Aufgrund dieser Werte berechnet die Methode, wie weit der Vorgang fortgeschritten ist. Die Eigenschaft source stellen Sie im manuellen Modus nicht ein. Im Beispiel wird eine NumericStepper-Komponente mit einem Maximalwert von 250 verwendet, um die Fortschrittsleiste hochzuzählen. Wenn sich der Wert in der NumericStepper-Komponente ändert und ein CHANGE -Ereignis auslöst, ruft die Ereignisprozedur ( nsChangeHander ) die Methode setProgress() auf, um die Fortschrittsleiste nach vorne zu bewegen. Zudem wird angezeigt, zu wie viel Prozent der Vorgang in Relation zum Maximalwert abgeschlossen ist.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine ProgressBar-Komponente vom Bedienfeld „Komponenten“ auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie als Instanznamen aPb ein.

    • Geben Sie 180 als X-Wert ein.

    • Geben Sie 175 als Y-Wert ein.

  3. Ziehen Sie eine NumericStepper-Komponente auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie als Instanznamen aNs ein.

    • Geben Sie 220 als X-Wert ein.

    • Geben Sie 215 als Y-Wert ein.

    • Geben Sie unter „Parameter“ 250 als Maximalwert (maximum), 0 als Minimalwert (minimum), 1 als Schrittintervall ( stepSize ) und 0 für den Parameter value an.

  4. Ziehen Sie eine Label-Komponente auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie als Instanznamen progLabel ein.

    • Geben Sie als Breite (B) den Wert 150 ein.

    • Geben Sie 180 als X-Wert ein.

    • Geben Sie 120 als Y-Wert ein.

    • Löschen Sie auf der Registerkarte „Parameter“ den Wert „Label“ für den Parameter „text“.

  5. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden Code ein: 

    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. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

  7. Klicken Sie auf den nach oben gerichteten Pfeil des Zählers, um die Fortschrittsleiste vorrücken zu lassen.

Erstellen einer Fortschrittsleiste mithilfe von ActionScript-Code

In diesem Beispiel wird eine Fortschrittsleiste mithilfe von ActionScript-Code erstellt. Außerdem wird die Funktion des vorigen Beispiels wiederholt, in dem eine Fortschrittsleiste im manuellen Modus erstellt wurde.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine ProgressBar-Komponente in das Bedienfeld „Bibliothek“.

  3. Ziehen Sie eine NumericStepper-Komponente in das Bedienfeld „Bibliothek“.

  4. Ziehen Sie eine Label-Komponente in das Bedienfeld „Bibliothek“.

  5. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden Code ein: 

    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. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

  7. Klicken Sie auf den nach oben gerichteten Pfeil des Zählers, um die Fortschrittsleiste vorrücken zu lassen.

Rechtliche Hinweise | Online-Datenschutzrichtlinie