Uso do componente ProgressBar

O componente ProgressBar exibe o progresso do carregamento do conteúdo, o que tranquiliza o usuário quando o conteúdo é grande e pode atrasar a execução do aplicativo. O componente ProgressBar é útil para exibir o progresso do carregamento de imagens e de partes de um aplicativo. O processo de carregamento pode ser determinado ou indeterminado. Uma barra de andamento determinada é uma representação linear do progresso de uma tarefa ao longo do tempo, e é utilizada quando o volume de conteúdo a ser carregado é conhecido. Uma barra de andamento indeterminada é usada quando o volume do conteúdo a ser carregado é desconhecido. Você também pode adicionar um componente Label para exibir o progresso do carregamento como percentual.

O componente ProgressBar usa um dimensionamento de 9 fatias, e tem uma capa de barra, capa de faixa e uma capa indeterminada.

Interação do usuário com o componente ProgressBar

Existem três modos em que o componente ProgressBar pode ser usado. Os modos mais utilizados são o modo de evento e o modo em poll. Esses modos especificam um processo de carregamento que emite os eventos progress e complete (modo de evento e em poll) ou expõe as propriedades bytesLoaded e bytesTotal (modo em poll). É possível também usar o componente ProgressBar no modo manual definindo as propriedades maximum , minimum e value juntamente com chamadas para o método ProgressBar.setProgress() . Você pode definir a propriedade indeterminate para indicar se ProgressBar terá um preenchimento em listras e uma origem de tamanho desconhecido ( true ) ou um preenchimento sólido e uma origem de tamanho conhecido ( false ).

Defina o modo de ProgressBar especificando sua propriedade mode por meio do parâmetro mode no Inspetor de propriedades ou no Inspetor de componentes, ou usando o ActionScript.

Se você usar ProgressBar para mostrar o status do processamento, por exemplo, 100.000 itens, caso ela esteja em um loop de quadro único, não haverá nenhuma atualização visível para ProgressBar porque não há redesenhos da tela.

Parâmetros do componente ProgressBar

Você pode definir os seguintes parâmetros no Inspetor de propriedades ou no Inspetor de componentes de cada instância de ProgressBar: direction , mode e source . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome.

Você pode escrever o ActionScript de modo a controlar essas e outras opções do componente ProgressBar usando suas propriedades, métodos e eventos. Para obter mais informações, consulte a classe ProgressBar na Referência do ActionScript 3.0 para Flash Professional .

Criar um aplicativo com ProgressBar

O procedimento a seguir mostra como adicionar um componente ProgressBar a um aplicativo durante a criação. Neste exemplo, ProgressBar usa o modo de evento. Nesse modo, o conteúdo de carregamento emite os eventos progress e complete que ProgressBar despacha para indicar o progresso. Quando o evento progress ocorre, o exemplo atualiza um rótulo para mostrar o percentual do conteúdo carregado. Quando o evento complete ocorre, o exemplo exibe “Carregamento concluído” e o valor da propriedade bytesTotal , que é o tamanho do arquivo.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente ProgressBar do painel Componentes para o Palco.

    • No Inspetor de propriedades, digite o nome de ocorrência aPb .

    • Na seção Parâmetros, digite 200 como valor X.

    • Digite 260 como valor Y.

    • Selecione event como parâmetro mode .

  3. Arraste o componente Button do painel Componentes para o Palco.

    • No Inspetor de propriedades, digite loadButton como nome de ocorrência.

    • Digite 220 como parâmetro X.

    • Digite 290 como parâmetro Y.

    • Digite Carregar som como parâmetro label .

  4. Arraste o componente Label para o Palco e atribua a ele o nome de ocorrência progLabel .

    • Digite 150 como valor L.

    • Digite 200 como parâmetro X.

    • Digite 230 como parâmetro Y.

    • Na seção Parâmetros, limpe o valor do parâmetro text .

  5. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript, que carrega um arquivo de áudio 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. Selecione Controlar > Testar filme.

Criar um aplicativo com o componente ProgressBar no modo em poll

O exemplo a seguir define ProgressBar no modo em poll. No modo em poll, o progresso é determinado através da escuta dos eventos progress no conteúdo que está sendo carregado e através do uso das propriedades bytesLoaded e bytesTotal para calcular o progresso. Este exemplo carrega um objeto Sound, escuta os eventos progress e calcula o percentual carregado usando suas propriedades bytesLoaded e bytesTotal . Ele exibe o percentual carregado em um rótulo e no painel Saída.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente ProgressBar do painel Componentes para o Palco e digite os seguintes valores no Inspetor de propriedades:

    • Digite aPb como nome de ocorrência.

    • Digite 185 como valor X.

    • Digite 225 como valor Y.

  3. Arraste o componente Label para o Palco e digite os seguintes valores no Inspetor de propriedades:

    • Digite progLabel como nome de ocorrência.

    • Digite 180 como valor X.

    • Digite 180 como valor Y.

    • Na seção Parâmetros, limpe o valor do parâmetro text.

  4. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript, que cria um objeto Sound ( aSound ) e chama loadSound() para carregar um som no objeto 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. Selecione Controlar > Testar filme para executar o aplicativo.

Criar um aplicativo com o componente ProgressBar no modo manual

O exemplo a seguir define ProgressBar no modo manual. Nesse modo, você deve definir o progresso manualmente chamando o método setProgress() e atribuir a ele os valores atual e máximo para determinar a extensão do progresso. Não defina a propriedade source no modo manual. O exemplo usa um componente NumericStepper, com um valor máximo de 250, para incrementar o componente ProgressBar. Quando o valor no NumericStepper for alterado e acionar um evento CHANGE , o manipulador de eventos ( nsChangeHander ) chamará o método setProgress() para avançar o ProgressBar. Esse exemplo também exibe a porcentagem concluída de progresso, com base no valor máximo.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente ProgressBar do painel Componentes para o Palco e atribua a ele os seguintes valores no Inspetor de propriedades:

    • Digite aPb como nome de ocorrência.

    • Digite 180 como valor X.

    • Digite 175 como valor Y.

  3. Arraste o componente NumericStepper para o Palco e digite os seguintes valores no Inspetor de propriedades:

    • Digite aNs como nome de ocorrência.

    • Digite 220 como valor X.

    • Digite 215 como valor Y.

    • Na seção Parâmetros, digite 250 como parâmetro máximo, 0 como valor mínimo, 1 como parâmetro stepSize e 0 como parâmetro value .

  4. Arraste o componente Label para o Palco e digite os seguintes valores no Inspetor de propriedades:

    • Digite progLabel como nome de ocorrência.

    • Digite 150 como valor L.

    • Digite 180 como valor X.

    • Digite 120 como valor Y.

    • Na aba Parâmetros, limpe o valor Label do parâmetro text.

  5. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.

  7. Clique na seta para cima no NumericStepper para avançar a ProgressBar.

Criar uma ProgressBar por meio do ActionScript

Este exemplo cria uma ProgressBar por meio do ActionScript. Além disso, ele duplica a funcionalidade do exemplo anterior, que cria uma ProgressBar no modo manual.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente ProgressBar para o painel Biblioteca.

  3. Arraste o componente NumericStepper para o painel Biblioteca.

  4. Arraste o componente Label para o painel Biblioteca.

  5. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.

  7. Clique na seta para cima no NumericStepper para avançar a ProgressBar.