Hello! Continuando a nossa série, estudaremos Como construir a progress bar responsável por dizer quantos bytes do FLV já foram carregados, junto à seek bar, aquela que agente avança ou volta o filme.
Lembrando que, como essa parte é mais chatinha, recomendo baixar os arquivos no final para ver o resultado correto.
1º Passo - Desenhando o Layout:
Começaremos desenhando uma barrinha com a área do nosso amigo seekbar, que também vai ser a mesma do progress em nosso caso. Logo após, transforme em um movie com registration 0, chamado de mcSeek.
Seguindo, entraremos dentro do nosso e transformaremos nossa área desenhada dentro do mcSeek, em um outro mc com o nome de mcSeekFundo, também com registration 0:
Aí então, copiaremos o frame do mcSeekFundo para uma camada acima, como nas figuras abaixo:
Colando...
Então, como na figura abaixo, esconderemos temporariamente a progresso, para que possamos trabalhar no fundo, que vai servir de delimitador de área.
Optei por deixá-lo mais transparente para poder distinguí-lo mais fácil da progress bar, da camada acima.
Voltaremos a usar a camada progresso, desta vez setaremos um instance name para nosso objeto, de mcProgresso, e vamos diminuí-lo a 1 pixel de largura, como fazemos com preloads de swf:
Vamos desenhar um quadradinho, tracinho, bolinha whatever (ele que vai ser responsável pela posição de nossa seek bar). Após desenhar e posicioná-lo a 0, como resto todo, transforme-o em um mc, chamdo mcSeekBar:
Terminamos o layout desta primeira parte do artigo. Agora vamos às actions.
2º Passo - Action Script:
Utilize do código abaixo no seu primeiro frame. É só atualizar o que foi feito no artigo anterior, mais precisamente as últimas linhas do AS:
//
//passando ao mcVolume o que ele vai controlar...
mcVolumeControl.setVolumeObject(somVideo);
//passando ao mcSeek o que ele vai controlar...
mcSeek.setVideoStream(netStmVideo);
//por fim damos load e play em nosso video...
setVideo("video1.flv");
Por fim, como sempre, existe uma classezinha em AS para facilitar a vida de vocês., que é claro também pode ser aberta no Flash ou em qualquer editor de texto, e ser estudada. Como o o foco desse artigo é a praticidade em se trabalhar com vídeos, entrego ela pronta para vocês usarem como quiser. Clique aqui para baixar. Assim coloque SeekBar.as no mesmo diretório em que estamos montado o video player.
Logo após voltemos ao Flash, e lá clicaremos com o botão direito na library, definindo a SeekBar como a classe responsável por nosso MC, como as figuras abaixo:
Por fim...
Está pronto! Divirtam-se!
Clique aqui para baixar os arquivos de exemplo deste artigo. Até a próxima e abracetas!
Créditos : http://imasters.uol.com.br/, Lucas Ferreira.