Trabalhando com ProgressBar

Bha, agora que acabei de falar sobre o Tree, vou falar sobre o ProgressBar, já que eu prometo no player que postei uns dias atrás. Este player a que postei utilizei dois ProgressBar, sendo o superior para apresentar o progresso do download e o segundo para apresentar o progresso do vídeo.

Este arquivo abaixo utiliza um ProgressBar ligada a uma imagem, onde o processo de carregamento desta imagem esta diretamente ligada ao ProgressBar.

Arquivo main01.mxml

<mx:ProgressBar id="progressBar" width="478" x="116" y="82"
           label="Carregando %1 de %2 KB (%3%%)"
           labelPlacement="center"
           source="image"
           conversion="1024"/>

<mx:Button id="botao" x="116" y="54"
           label="Carregar Imagem"
           click="image.autoLoad=true;botao.enabled=false"
           toolTip="Clique aqui para carregar a imagem" />    

<mx:Image id="image" width="478" height="427" x="116" y="106"
          source="imagem/imagem.png"
          autoLoad="false"/>

Veja que o carregamento da imagem esta bloqueada e ao clicar no botão é iniciado o carregamento desta imagem. Apesar desta imagem ser pequena ela possui 1.1MB, sendo bem visível o carregamento desta imagem.

Neste segundo exemplo, apresento os modos de visualizações do ProgressBar. Neste exemplo há dois ComboBox, o primeiro modifica a posição do texto e o segundo modifica a direção do progresso.

Arquivo main02.mxml

<mx:ComboBox id="posicao" width="120" x="17" y="60"
             dataProvider="{dtPosicao}"
             toolTip="Posição do Texto" />

<mx:ComboBox id="direcao" width="120" x="153" y="60"
             dataProvider="{dtDirecao}"
             selectedIndex="2"
             toolTip="Direção de Carregamento" />

<mx:ProgressBar id="progressBar" width="405" x="295" y="60"
             label="{posicao.selectedItem.label}"
             labelPlacement="{posicao.selectedItem.data}"
             direction="{direcao.selectedItem.data}"
             mode="manual"
             creationComplete="progressBar.setProgress(50, 100)" />

Neste terceiro exemplo, apresento algumas animações. A primeira apresenta o modo indeterminate, e quando setada como true, o progresso da barra e apresentado na forma indeterminada. Esta propriedade é utilizado quando o valor de fim é desconhecido.

A segunda animação é uma animação dupla, onde é utilizado o efeito Fade e Zoom.

Arquivo main03.mxml

<mx:VBox y="59" x="10">
    <mx:HBox>
        <mx:Button label="Iniciar"  click="playProgressBar();"  x="10" y="61" width="75"/>
        <mx:Button label="Reiniciar" click="resetProgressBar();" x="69" y="61" width="75"/>
        <mx:FormItem label="indeterminate:">
            <mx:CheckBox id="checkBox" selected="true" />
        </mx:FormItem>
    </mx:HBox>
    <mx:ProgressBar id="progressBar" width="690" x="10" y="91"
                    complete="progressBar_complete(event);"
                    indeterminate="{checkBox.selected}"
                    label="Carregando %3%%"
                    mode="manual"
                    labelPlacement="center"
                    creationComplete="init();">

        <mx:completeEffect>
            <mx:Parallel>
                <mx:Fade alphaTo="0.0" />
                <mx:Zoom zoomHeightTo="0" />
            </mx:Parallel>
        </mx:completeEffect>
    </mx:ProgressBar>
</mx:VBox>

O Efeito Fade manipula o alpha do ProgressBar, e o Zoom manipula os efeitos de Zoom. Porém para utilizar os dois ao mesmo tempo é necessário utilizar o método Parallel. Então quando o evento completeEffect é despachado, é chamado o método Parallel que chama os efeitor Fade e Zoom.