Använda komponenten ProgressBar

Med komponenten ProgressBar visas förloppet vid inläsning av innehåll, vilket känns tryggt för användaren när innehållet är stort och kan fördröja körningen av programmet. ProgressBar är bra att använda om du vill visa förloppet för inlästa bilder och delar i ett program. Inläsningsprocessen kan vara bestämd eller obestämd. En bestämd förloppsindikator är en linjär representation av en uppgifts förlopp över tiden och används när mängden innehåll som ska läsas in är känd. En obestämd förloppsindikator används när mängden innehåll som ska läsas in är okänd. Du kan även lägga till en Label-komponent för att visas inläsningsförloppet som en procentsats.

Komponenten ProgressBar använder niosegmentsskalning och har ett indikatorskal, ett spårskal och ett obestämt skal.

Användarinteraktion med komponenten ProgressBar

Det finns tre lägen som du kan använda ProgressBar-komponenten i. De mest använda lägena är händelseläge och avsökningsläge. De här lägena anger en inläsningsprocess som antingen aktiverar progress - och complete -händelser (händelse- och avsökningsläge), eller visar bytesLoaded - och bytesTotal -egenskaper (avsökningsläge). Du kan också använda ProgressBar-komponenten i manuellt läge genom att ange egenskaperna maximum , minimum och value tillsammans med anrop till metoden ProgressBar.setProgress() . Du kan ställa in den obestämda egenskapen så att den anger om ProgressBar har en randig fyllning och en källa med okänd storlek ( true ) eller en täckande fyllning och en källa med känd storlek ( false ).

Du ställer in läget för ProgressBar genom att ange dess mode -egenskap, antingen med parametern mode i egenskapsinspektören eller komponentinspektören, eller genom att använda ActionScript.

Om du använder ProgressBar för att visa bearbetningsstatus, till exempel att analysera 100 000 objekt, och den finns i en loop med en bildruta, visas inga uppdateringar i ProgressBar eftersom skärmen inte ritas om.

ProgressBar-komponentparametrar

Du kan ställa in följande parametrar i egenskapsinspektören eller komponentinspektören för varje ProgressBar-förekomst: direction , mode och source . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn.

Du kan skriva ActionScript för att styra de här och andra alternativ för ProgressBar-komponenten med hjälp av dess egenskaper, metoder och händelser. Mer information finns i avsnittet om klassen ProgressBar i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Skapa ett program med ProgressBar

I proceduren nedan visas hur du lägger till en ProgressBar-komponent i ett program när du redigerar. I det här exemplet använder ProgressBar händelseläget. I händelseläget aktiverar det inlästa innehållet progress - och complete -händelserna som ProgressBar skickar för att ange förloppet. När progress -händelsen inträffar uppdaterar exemplet en etikett som visar hur stor procentandel av innehållet som har lästs in. När complete -händelsen inträffar visas ”Inläsning klar” och värdet på egenskapen bytesTotal , som är filens storlek.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en ProgressBar-komponent från panelen Komponenter till scenen.

    • Ange förekomstnamnet aPb i egenskapsinspektören.

    • Ange 200 för X-värdet i avsnittet Parametrar.

    • Ange 260 som Y-värde.

    • Välj event som mode -parameter.

  3. Dra en Button-komponent från panelen Komponenter till scenen.

    • Ange förekomstnamnet loadButton i egenskapsinspektören.

    • Ange 220 som X-parameter.

    • Ange 290 som Y-parameter.

    • Ange Load Sound som label -parameter.

  4. Dra Label-komponenten till scenen och ge den förekomstnamnet progLabel .

    • Ange 150 som W-värde.

    • Ange 200 som X-parameter.

    • Ange 230 som Y-parameter.

    • I avsnittet Parametrar rensar du värdet på text -parametern.

  5. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod som läser in en mp3-ljudfil: 

    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. Välj Kontroll > Testa filmen.

Skapa ett program med ProgressBar-komponenten i avsökningsläge

I följande exempel ställs avsökningsläge in för ProgressBar. I avsökningsläget bestäms förloppet genom avlyssning av progress -händelser för innehållet som läses in och dess bytesLoaded - och bytesTotal -egenskaper används för att beräkna förloppet. Det här exemplet läser in ett ljudobjekt, avlyssnar dess progress -händelser och beräknar hur stor procentandel som har lästs in med hjälp av dess bytesLoaded - och bytesTotal -egenskaper. Den inlästa procentandelen visas både på en etikett och i utdatapanelen.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en ProgressBar-komponent från panelen Komponenter till scenen och ange följande värden i egenskapsinspektören:

    • Ange aPb som förekomstnamn.

    • Ange 185 som X-värde.

    • Ange 225 som Y-värde.

  3. Dra en Label-komponent till scenen och ange följande värden i egenskapsinspektören:

    • Ange progLabel som förekomstnamn.

    • Ange 180 som X-värde.

    • Ange 180 som Y-värde.

    • I avsnittet Parametrar rensar du värdet på textparametern.

  4. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod som skapar ett Sound-objekt ( aSound ) och anropar loadSound() som läser in ett ljud i Sound-objektet: 

    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. Välj Kontroll > Testa filmen för att köra programmet.

Skapa ett program med ProgressBar-komponenten i manuellt läge

I följande exempel ställs manuellt läge in för ProgressBar. I manuellt läge måste du ange förloppet manuellt genom att anropa metoden setProgress() och ge den de aktuella och maximala värdena för att bestämma hur långt förloppet har kommit. Du anger inte egenskapen source i manuellt läge. I exemplet används en NumericStepper-komponent med ett maximalt värdet på 250 för att öka ProgressBar stegvis. När värdet i NumericStepper ändras och utlöser en CHANGE -händelse anropar händelsehanteraren ( nsChangeHander ) metoden setProgress() för att flytta fram ProgressBar. Den procentandel av förloppet som är klar visas också, baserat på det maximala värdet.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ProgressBar-komponenten från panelen Komponenter till scenen och ge den följande värden i egenskapsinspektören:

    • Ange aPb som förekomstnamn.

    • Ange 180 som X-värde.

    • Ange 175 som Y-värde.

  3. Dra en NumericStepper-komponent till scenen och ange följande värden i egenskapsinspektören:

    • Ange aNs som förekomstnamn.

    • Ange 220 som X-värde.

    • Ange 215 som Y-värde.

    • I parameteravsnittet anger du 250 för maximum-parametern, 0 för minimum-värdet, 1 för stepSize -parametern och 0 för value -parametern.

  4. Dra en Label-komponent till scenen och ange följande värden i egenskapsinspektören:

    • Ange progLabel som förekomstnamn.

    • Ange 150 som W-värde.

    • Ange 180 som X-värde.

    • Ange 120 som Y-värde.

    • På fliken Parametrar rensar du värdeetiketten för textparametern.

  5. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande 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. Välj Kontroll > Testa filmen för att köra programmet.

  7. Klicka på uppil på NumericStepper för att flytta fram ProgressBar.

Skapa en ProgressBar med ActionScript

I det här exemplet skapas en ProgressBar med ActionScript. Dessutom kopieras funktionen i det föregående exemplet, vilket skapar en ProgressBar i manuellt läge.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ProgressBar-komponenten till bibliotekspanelen.

  3. Dra NumericStepper-komponenten till bibliotekspanelen.

  4. Dra Label-komponenten till bibliotekspanelen.

  5. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande 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. Välj Kontroll > Testa filmen för att köra programmet.

  7. Klicka på uppil på NumericStepper för att flytta fram ProgressBar.