Criando um VideoPlayer de FLV no Flash - Parte 2

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.