De component ProgressBar gebruiken

De component ProgressBar geeft de voortgang van het laden van de inhoud weer. Dit is geruststellend voor de gebruiker wanneer de inhoud groot is en de uitvoering van de toepassing wordt vertraagd. De voortgangsbalk is nuttig voor het weergeven van de voortgang van het laden van afbeeldingen en gedeelten van een toepassing. Het laadproces kan bepaald of onbepaald zijn. Via een component Een bepaalde voortgangsbalk is een lineaire weergave van de voortgang van een taak in de loop van de tijd. Deze wordt gebruikt wanneer de hoeveelheid inhoud die wordt geladen bekend is. Een onbepaalde voortgangsbalk wordt gebruikt wanneer de hoeveelheid inhoud die moet worden geladen onbekend is. U kunt ook een component Label toevoegen om de voortgang van het laden als een percentage weer te geven.

De component ProgressBar gebruikt 9-delige schaling en heeft een skin voor een balk, een skin voor het voortgangsvak en een onbepaalde skin.

Gebruikersinteractie met de component ProgressBar

Er bestaan drie modi waarin u de component ProgressBar kunt gebruiken. De meest gebruikte modi zijn de gebeurtenismodus en de pollingmodus. Deze modi geven een laadproces op die ofwel de gebeurtenissen progress en complete verzendt (gebeurtenismodus en pollingmodus) of de eigenschappen bytesLoaded en bytesTotal beschikbaar maakt (pollingmodus). U kunt de component ProgressBar ook in de handmatige modus gebruiken door de eigenschappen maximum , minimum en value , en de methode ProgressBar.setProgress() aan te roepen. U kunt de onbepaalde eigenschap instellen om aan te geven dat de ProgressBar een gestreepte vulling en een bron van onbekende grootte ( true ) of een effen vulling en een bron van bekende grootte ( false ) heeft.

U stelt de modus van de ProgressBar in door de bijbehorende eigenschap mode in te stellen. U doet dit via de parameter mode in Eigenschapcontrole of Componentcontrole of via ActionScript.

Als u de ProgressBar gebruikt om een verwerkingsstatus weer te geven (zoals de verwerkingsstatus van het parseren van 100.000 items) en deze zich in een enkele framelus bevindt, zal de ProgressBar niet zichtbaar worden bijgewerkt omdat het scherm niet opnieuw wordt getekend.

Parameters van de component ProgressBar

U kunt in Eigenschapcontrole of Componentcontrole de volgende parameters instellen voor elke instantie van ProgressBar: direction , mode en source . Elk van deze heeft een bijbehorende ActionScript-eigenschap met dezelfde naam.

U kunt ActionScript schrijven om deze en additionele opties voor een component ProgressBar via zijn eigenschappen, methoden en gebeurtenissen te beheren. Zie de klasse ProgressBar in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.

Een toepassing met ProgressBar maken

De volgende procedure laat zien hoe u een component ProgressBar tijdens het ontwerpen aan een toepassing kunt toevoegen. In dit voorbeeld gebruikt de ProgressBar de gebeurtenismodus. In de gebeurtenismodus verzendt de ladende inhoud de gebeurtenissen progress en complete , die vervolgens door de ProgressBar worden verzonden om de voortgang aan te duiden. Wanneer de gebeurtenis progress plaatsvindt, werkt het voorbeeld een label bij om het geladen percentage van de inhoud aan te duiden. Wanneer de gebeurtenis complete optreedt, geeft het voorbeeld ‘Loading complete’ weer en de waarde van de eigenschap bytesTotal , die staat voor de grootte van het bestand.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component ProgressBar van het deelvenster Componenten naar het werkgebied.

    • Voer in Eigenschapcontrole de instantienaam aPb in.

    • Voer in de sectie Parameters 200 in voor de waarde X.

    • Voer 260 in voor de waarde Y.

    • Selecteer event voor de parameter mode .

  3. Sleep de component Button van het deelvenster Componenten naar het werkgebied.

    • Voer in Eigenschapcontrole de instantienaam loadButton in.

    • Voer 220 in voor de parameter X.

    • Voer 290 in voor de parameter Y.

    • Voer Load Sound in voor de parameter label .

  4. Sleep een component Label naar het werkgebied en geef deze de instantienaam progLabel .

    • Voer 150 in voor de waarde W.

    • Voer 200 in voor de parameter X.

    • Voer 230 in voor de parameter Y.

    • Wis in de sectie Parameters de waarde voor de parameter text .

  5. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe. De code laadt een MP3-audiobestand: 

    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. Selecteer Besturing > Film testen.

Een toepassing met de component ProgressBar maken in de pollingmodus

In het volgende voorbeeld wordt de ProgressBar op de pollingmodus ingesteld. In de pollingmodus wordt de voortgang bepaald door het luisteren naar de gebeurtenissen progress voor de inhoud die wordt geladen en met zijn eigenschappen bytesLoaded en bytesTotal wordt de voortgang berekend. In dit voorbeeld wordt een object Sound geladen, geluisterd naar gebeurtenissen progress en het geladen percentage berekend via de eigenschappen bytesLoaded en bytesTotal . Het geladen percentage wordt in een label en in het deelvenster Uitvoer weergegeven.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een component ProgressBar van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam aPb in.

    • Voer 185 in voor de waarde X.

    • Voer 225 in voor de waarde Y.

  3. Sleep een component Label naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam progLabel in.

    • Voer 180 in voor de waarde X.

    • Voer 180 in voor de waarde Y.

    • Wis in de sectie Parameters de waarde voor de parameter text.

  4. Open het deelvenster Handelingen, selecteer frame 1 in de hoofdtijdlijn en voer de volgende ActionScript-code in, waarmee een object Sound wordt gemaakt ( aSound ) en waardoor loadSound() wordt aangeroepen om een geluid in het object Sound te 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. Selecteer Besturing > Film testen om de toepassing uit te voeren.

Een toepassing met de component ProgressBar maken in de handmatige modus

In het volgende voorbeeld wordt de ProgressBar op de handmatige modus ingesteld. In de handmatige modus, moet u de voortgang handmatig instellen door de methode setProgress() aan te roepen en deze de huidige en maximale waarden geven om de mate van de voortgang te bepalen. U stelt de eigenschap source niet in de handmatige modus in. In het voorbeeld wordt een component NumericStepper gebruikt, met een maximale waarde van 250, om de ProgressBar te verhogen. Wanneer de waarde in de NumericStepper verandert en deze een gebeurtenis CHANGE activeert, roept de gebeurtenishandler ( nsChangeHander ) de methode setProgress() aan om de ProgressBar naar voren te plaatsen. Het geeft op basis van de maximale waarde ook het percentage weer van de voortgang die is voltooid.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een component ProgressBar van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam aPb in.

    • Voer 180 in voor de waarde X.

    • Voer 175 in voor de waarde Y.

  3. Sleep een component NumericStepper naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam aNs in.

    • Voer 220 in voor de waarde X.

    • Voer 215 in voor de waarde Y.

    • Voer in de sectie Parameters 250 in voor de parameter maximum, 0 voor de waarde van minimum, 1 voor de parameter stepSize en 0 voor de parameter value .

  4. Sleep een component Label naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam progLabel in.

    • Voer 150 in voor de waarde W.

    • Voer 180 in voor de waarde X.

    • Voer 120 in voor de waarde Y.

    • Wis op het tabblad Parameters de waarde Label voor de parameter text.

  5. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in: 

    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. Selecteer Besturing > Film testen om de toepassing uit te voeren.

  7. Klik op de pijlknop omhoog in de NumericStepper om de ProgressBar verder te plaatsen.

Een ProgressBar maken met ActionScript

In dit voorbeeld wordt met ActionScript een ProgressBar gemaakt. Bovendien dupliceert deze de functionaliteit van het vorige voorbeeld, die een ProgressBar in handmatige modus maakt.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component ProgressBar naar het deelvenster Bibliotheek.

  3. Sleep de component NumericStepper naar het deelvenster Bibliotheek.

  4. Sleep de component Label naar het deelvenster Bibliotheek.

  5. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in: 

    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. Selecteer Besturing > Film testen om de toepassing uit te voeren.

  7. Klik op de pijlknop omhoog in de NumericStepper om de ProgressBar verder te plaatsen.