Usare il componente ProgressBar

Il componente ProgressBar visualizza l'avanzamento del caricamento di un contenuto, che rassicura l'utente quando il contenuto è di grandi dimensioni e può ritardare l'esecuzione dell'applicazione. Questo componente risulta utile per visualizzare l'avanzamento del caricamento di immagini e parti di un'applicazione. Il processo di caricamento può essere di tipo determinato o indeterminato. Una barra di avanzamento determinata è una rappresentazione lineare dell'avanzamento di un'attività nel tempo ed è usata quando è nota la quantità di contenuto da caricare. Una barra di avanzamento indeterminata viene usata quando la quantità di contenuto da caricare non è nota. Potete aggiungere un componente Label per visualizzare l'avanzamento del caricamento sotto forma di percentuale.

Il componente ProgressBar usa la modifica in scala a 9 porzioni e dispone di uno skin per la barra, uno per la traccia e uno skin indeterminato.

Interazione dell'utente con il componente ProgressBar

Le modalità possibili in cui usare il componente ProgressBar sono tre. Le modalità più comunemente usate sono event e polled, che specificano un processo di caricamento che genera gli eventi progress e complete (modalità event e polled) oppure espone le proprietà bytesLoaded e bytesTotal (modalità polled). Inoltre, potete usare il componente ProgressBar in modalità manuale impostando le proprietà maximum , minimum e value congiuntamente a chiamate del metodo ProgressBar.setProgress() . Potete impostare la proprietà indeterminate per indicare se il componente ProgressBar ha un riempimento a strisce e un'origine di caricamento di dimensione sconosciuta ( true ) oppure un riempimento uniforme e un'origine di caricamento di dimensione nota (false).

Per specificare la modalità del componente ProgressBar, impostate la relativa proprietà mode mediante il parametro mode nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti, oppure mediante ActionScript.

Se usate il componente ProgressBar per visualizzare lo stato di elaborazione, ad esempio per analizzare 100.000 voci, e se il componente si trova in un ciclo di un solo fotogramma, gli aggiornamenti del componente non saranno visibili in quanto lo schermo non viene ridisegnato.

Parametri del componente ProgressBar

I seguenti parametri possono essere impostati per ogni istanza del componente ProgressBar nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: direction , mode e source . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome.

È possibile creare il codice ActionScript per controllare queste e altre opzioni del componente ProgressBar utilizzandone le proprietà, i metodi e gli eventi. Per ulteriori informazioni, vedete la classe ProgressBar nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente ProgressBar

Nella procedura seguente viene illustrato come aggiungere un componente ProgressBar a un'applicazione durante la creazione. In questo esempio, il componente ProgressBar viene usato in modalità event. In modalità event, il contenuto in fase di caricamento genera eventi progress e complete che il componente invia per indicare l'avanzamento. Nell'esempio, quando si verifica l'evento progress viene aggiornata un'etichetta per visualizzare la percentuale di contenuto caricata. Nell'esempio, quando si verifica l'evento complete vengono visualizzati un messaggio di caricamento completato e il valore della proprietà bytesTotal che corrisponde alle dimensioni del file.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate il componente ProgressBar dal pannello Componenti allo stage.

    • Nella finestra di ispezione Proprietà, inserite aPb come nome di istanza.

    • Nella sezione Parametri, inserite 200 per il valore X.

    • Inserite 260 per il valore Y.

    • Selezionate event per il parametro mode .

  3. Trascinare il componente Button dal pannello Componenti allo stage.

    • Nella finestra di ispezione Proprietà, immettete loadButton come nome di istanza.

    • Inserite 220 per il parametro X.

    • Inserite 290 per il parametro Y.

    • Inserite Load Sound per il parametro label .

  4. Trascinate il componente Label nello stage e assegnate il nome di istanza progLabel .

    • Inserite 150 per il valore W.

    • Inserite 200 per il parametro X.

    • Inserite 230 per il parametro Y.

    • Nella sezione Parametri, cancellate il valore del parametro text .

  5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi inserite il codice ActionScript seguente, che carica un file audio .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. Selezionare Controllo > Prova filmato.

Creare un'applicazione con il componente ProgressBar in modalità polled

Nell'esempio seguente il componente ProgressBar viene impostato in modalità polled. In modalità polled, l'avanzamento è determinato mediante l'ascolto degli eventi progress nel contenuto caricato e usando le relative proprietà bytesLoaded e bytesTotal per calcolare l'avanzamento. In questo esempio viene caricato un oggetto Sound, vengono ascoltati gli eventi progress e viene calcolata la percentuale caricata usando le proprietà bytesLoaded e bytesTotal . La percentuale caricata viene visualizzata sia in un'etichetta che nel pannello Output.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente ProgressBar dal pannello Componenti allo stage e assegnategli i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite aPb come nome dell'istanza.

    • Inserite 185 per il valore X.

    • Inserite 225 per il valore Y.

  3. Trascinate un componente Label nello stage e immettete i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite progLabel come nome dell'istanza.

    • Inserite 180 per il valore X.

    • Inserite 180 per il valore Y.

    • Nella sezione Parametri, cancellate il valore del parametro text.

  4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale e immettete il codice ActionScript seguente, che crea un oggetto Sound ( aSound ) e chiama il metodo loadSound() per caricare un suono nell'oggetto 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. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

Creare un'applicazione con il componente ProgressBar in modalità manual

Nell'esempio seguente il componente ProgressBar viene impostato in modalità manual. In modalità manual, dovete impostare l'avanzamento manualmente chiamando il metodo setProgress() e specificando i valori corrente e massimo per determinare il livello di avanzamento. In modalità manual, la proprietà source non viene impostata. In questo esempio, per incrementare il componente ProgressBar, viene usato un componente NumericStepper con un valore massimo di 250. Quando il valore nel componente NumericStepper cambia e attiva un evento CHANGE , il gestore di eventi ( nsChangeHander ) chiama il metodo setProgress() per l'avanzamento di ProgressBar. Viene inoltre visualizzata la percentuale di avanzamento completata, in base al valore massimo.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate il componente ProgressBar dal pannello Componenti allo stage e assegnategli i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite aPb come nome dell'istanza.

    • Inserite 180 per il valore X.

    • Inserite 175 per il valore Y.

  3. Trascinate un componente NumericStepper nello stage e immettete i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite aNs come nome dell'istanza.

    • Inserite 220 per il valore X.

    • Inserite 215 per il valore Y.

    • Nella sezione Parametri, inserite 250 per il parametro maximum, 0 per il valore minimum, 1 per il parametro stepSize e 0 per il parametro value.

  4. Trascinate un componente Label nello stage e immettete i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite progLabel come nome dell'istanza.

    • Inserite 150 per il valore W.

    • Inserite 180 per il valore X.

    • Inserite 120 per il valore Y.

    • Nella sezione Parametri, cancellate il valore Label del parametro text.

  5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice seguente: 

    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. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

  7. Fate clic sulla freccia su del componente NumericStepper per determinare l'avanzamento di ProgressBar.

Creare un componente ProgressBar mediante ActionScript

In questo esempio viene creato un componente ProgressBar mediante ActionScript. Inoltre, viene duplicata la funzionalità dell'esempio precedente, in cui viene creato un componente ProgressBar in modalità manual.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente ProgressBar nel pannello Libreria.

  3. Trascinate il componente NumericStepper nel pannello Libreria.

  4. Trascinate il componente Label nel pannello Libreria.

  5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice seguente: 

    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. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

  7. Fate clic sulla freccia su del componente NumericStepper per determinare l'avanzamento di ProgressBar.