Este artigo irá explicar o processo para preparar os arquivos e aplicar customizações básicas para o player. Ao final, daremos uma breve descrição dos métodos mais comuns, propriedades e eventos disponíveis para o componente FLVPlayback. Faça o download desse vídeo de exemplo e veja tipo de vídeo que podemos mostrar com Flash.

Este tutorial é dividido entre as seguinte seções:

1. Preparando os arquivos e codificando o vídeo para o formato FLV.
2. Aprendizagem básica do componente FLVPlayback.
3. Aplicando uma skin ao componente FLVPlayback.
4. Selecionando métodos, propriedades e eventos.

Preparando os arquivos e codificando o vídeo para o formato FLV

Para ter tudo organizado, eu sugiro que você crie uma nova pasta em seu computador onde terá todos os arquivos relevantes que iremos usar. Teremos um arquivo FLA, o final SWF, um skin SWF e um arquivo de vídeo no formato FLV.

Antes de começarmos a fazer algo no Flash, é preciso converter o vídeo para o formato de vídeo FLV. Isso pode ser feito usando o Flash Video Encorder, que vem com o pacote Flash. Esta ferramenta irá converter para vários formatos, como .mov, .mp4, .mpeg, .wmv e alguns outros, bem como FLV. Se você não tem um vídeo para usar neste tutorial, você pode fazer o download do simples vídeo usado neste tutorial. Faça o downoad do arquivo, descompacte-o e coloque-o na pasta do projeto.

O vídeo que disponibilizamos a você foi salvo no formato do Quicktime. Vamos convertê-lo para FLV.Para fazer isso, abra o Flash Video Encorder (nomeado como Media Encoder no pacote de aplicativos CS4) e clique em Add para adicionar o vídeo que você baixou.

Você pode clicar em Settings para configurar algo como qualidade, redimensionamento,e tipo de codec. Usar as configurações padrão será suficiente. Para começar a codificar, simplesmente clique em Start Queue. O novo arquivo .flv deve ser achado no mesma pasta em que estava o vídeo original (neste caso, no nosso projeto).

O nosso vídeo está pronto. Feche o Flash Video Encoder e abra o Flash. Crie uma novo arquivo FLA no formato ActionScript 3. Configurações como dimensões, cor de fundo e frame rate, na verdade, não importam para este tutorial. Você só tem que salvar o arquivo no mesmo diretório que o vídeo, a fim de reproduzi-lo facilmente. Faça isso e depois vamos prosseguir.

Aprendizagem básica do componente FLVPlayback

Agora, volte para o arquivo FLA. Iremos exibir nosso vídeo usando o Componente FLVPlayback. Componentes são clipes prontos com funcionalidade built-in. O componente FLVPlayback é para ser usado quando você deseja reproduzir um vídeo. Vamos criar o nosso projeto inteiro usando código ActionScript, porém, temos os elementos gráficos do componente a ser armazenados em nossa Biblioteca, a fim de utilizá-los.

Para importar o componente da Biblioteca, é preciso acessar o Painel de Componentes pelo Window>Component, veja o Componente FLVPlayback acima da categoria do vídeo e, em seguida, arraste e solte um exemplo e depois apague-o! Isso deve armazenar uma instância do componente na biblioteca, acesse a Biblioteca (Ctrl + L) para ver que você tem aí dentro.

Agora vamos usar o ActionScript para exibir nosso vídeo utilizando este componente. Clique com o botão direito no único frame que há na cena e selecione Actions para abrir o Actions Panel.

O código que iremos criar irá seguir as seguintes tarefas:

1. Importe o pacote vídeo class.
2. Crie uma instância do componente FLVPlayback.
3. Defina o vídeo que queremos exibir em source.
4. Adicione o vídeo para a lista de exibição.

Iremos codificar esses um por um. A fim de ter acesso à classe do componente ActionScript de nosso playback, precisamos importar o pacote de vídeo para começar nosso código. Digite a seguinte linha para fazer exatamente isso:

import fl.video.*;

Como a maioria das classes do ActionScript, você deve criar um exemplo de classe usando a palavra reservada “NEW”, a fim de usá-lo. Nós vamos fazer isso e, em seguida, definiremos o Source deste exemplo como o nosso vídeo.

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";

A propriedade .source é usada para especificar o vídeo que vai ser exibido. Se você quer exibir outro vídeo, você pode simplesmente configurar essa propriedade para um outro valor e automaticamente começará a carregar o vídeo.

Mesmo este vídeo tendo sido criado para o fim específico de ser nosso exemplo, para que possamos vê-lo na tela precisamos adicioná-lo à Display List utilizando o método addChild ():

Para fazer nosso componente ser visível na tela nós precisamos somente adicioná-lo na Display List usando o método addChild():

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";

addChild(myVideo);

Agora você pode testar seu vídeo (Ctrl+Enter) e vê-lo sendo exibido.

Você não deve ser capaz de reproduzir qualquer vídeo que queira utilizando este código, no entanto, se quiser ter alguma funcionalidade de usuário adicionada ao player, pode querer usar uma skin. Isto será explicado na próxima seção.

Aplicando uma skin ao componente FLVPlayback

Skins são controladores de visualização que você pode parar, pausar, mudar o volume e fazer outras coisas que dependem de uma skin para mudar. Usamos uma no vídeo de exemplo. É parecido com este:

Os elementos gráficos da skin são salvos separadamente em um arquivo SWF que é carregado junto com o filme SWF. Se você tiver a skin do arquivo SWF disponível, você simplesmente define sua URL como o valor para uma propriedade chamada .skin, como mostra o exemplo abaixo:

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";

addChild(myVideo);

Estes arquivos skin podem ser gerados por Flash através de um processo relativamente longo, o que exigirá que você crie um exemplo do componente FLVPlayback na cena, aplicar-lhe a skin e, em seguida, testar o filme para gerar o arquivo da skin. Vamos acompanhá-lo através deste processo.

Comece abrindo a Library (Ctrl + L) e, em seguida, arraste e copie do Componente FLVPlayback para dentro da cena.

Vamos agora configurar qual skin a ser usada acessando o Component Inspector. Selecione o seu componente e, em seguida, vá em Window>Components Inspector para abrir o painel necessário. Olhe para a opção skin em Parameters e clique sobre ele. Você pode escolher a skin que pretende utilizar a partir da aqui. Skins diferentes têm diferentes funcionalidades e algumas delas aparecem no seu componente, enquanto outras são colocadas logo abaixo dela. Escolha aquela que você deseja e clique em OK.

Você aplicou a skin para um exemplo do componente FLVPlayback que é colocado sobre a cena. Este não é o que estamos usando através do ActionScript. No entanto, para obter o arquivo da skin que temos necessidade para gerá-lo manualmente, aplicando-a para um exemplo e, em seguida, testando o filme. Teste o filme agora (Ctrl + Enter) para ver seu vídeo gerado em ActionScript e um posicionamento sobre esta nova fase com nenhum conteúdo nele.

Nós acabamos de criar o arquivo skin que precisamos para o nosso outro vídeo. Se verificar a pasta do projeto, vai encontrar um novo arquivo SWF da skin. Você precisa ter o nome desse arquivo para usar como sua skin.

O nome desse arquivo é o valor que precisamos para a propriedade do skin. Copie o nome desse arquivo e volte para o FLA. Delete o exemplo do componente FLVPlayback da cena, não precisamos mais dele. Abra o painel Actions para continuar codificando.

Agora nós podemos simplesmente definir o nosso componente skin, utilizando a propriedade .skin como o nome do novo arquivo que temos. Não se esqueça de colocar o .swf no final:

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";

addChild(myVideo);

Teste seu filme agora para ver o seu skin colocado em seu componente!

Você pode personalizar ainda mais o nível de transparência e a cor da skin, utilizando as propriedades .SkinBackgroundColor e .SkinBackgroundAlpha que são bem auto-explicativas:

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
myVideo.skinBackgroundColor = 0xAEBEFB; 
myVideo.skinBackgroundAlpha = 0.5;

addChild(myVideo);

Você pode testar seu filme novamente para ver as alterações no componente skin:

Isso deve ser suficiente para esta parte. A fim de tentar uma skin diferente, você terá de criar um exemplo do seu componente na cena e, em seguida, testar o filme após aplicar a skin para gerar o arquivo da skin necessário.

Isso acabou com a parte principal do tutorial. A próxima seção terá uma breve explicação de algumas propriedades e métodos disponíveis para esse componente. Vamos terminar com uma breve explicação sobre como usar os eventos deste componente.

Métodos e propriedades selecionadas

Além dos controles disponíveis através do controlador da skin, é possível passar comandos manualmente para um exemplo do componente FLVPlayback utilizando os métodos disponíveis e suas propriedades. Estes devem ser chamados diretamente através do exemplo:

• Stop () – pára o vídeo e reinicia a reprodução a posição do começo.
• Pause () – pausará o vídeo na sua posição atual.
• Play () – retoma a reprodução.
• Load () – pode ser usado para carregar um outro vídeo FLV (ao contrário do . source, que irá fazer o vídeo rodar automaticamente se a propriedade .autoplay estiver definida para true).

Código-exemplo sobre como usar o método .Load ():

myVideo.load("video.flv");

Além dos métodos mencionados acima, abaixo algumas propriedades comumente utilizadas:

• source – é usada para definir a fonte de vídeo para o player. Foi utilizado em nosso exemplo de código.
• autoplay – determina se o vídeo vai começar a tocar automaticamente ou não. É definido como true por padrão. Se você não quer exibir o vídeo automaticamente, defina essa propriedade para false.
• state – é uma propriedade de leitura apenas utilizada para obter o estado atual do vídeo. Os estados possíveis são ” buffering “, “connectionError”, ” disconnected “, ” loading “, ” paused “, ” playing “, ” rewinding “, ” seeking “, e ” stopped”.
• PlayheadTime – é usado para recuperar ou definir a reprodução atual da posição em segundos. Se quiser ir para o segundo 30 do vídeo instantaneamente, simplesmente defina esta propriedade para 30.
• skin – é usada para definir a skin do reprodutor, como ilustrado no tutorial.
• SkinBackgroundColor – define a cor da skin.
• SkinBackgroundAlpha – define o nível de transparência da skin.

Estes são apenas alguns dos métodos disponíveis e as propriedades disponíveis para o componente FLVPlayback. Certifique-se de verificar o ActionScript referência se você gosta de aprender sobre todas as possibilidades.

O evento VideoEvent.COMPLETE

Eventos nos permitem tomar ações específicas quando eles são acionados, de modo que, por exemplo, podemos remover um vídeo quando terminar a reprodução ou torná-la transparente quando ela está pausada. O componente FLVPlayback tem inúmeros eventos, um muito utilizado é o COMPLETE, que é acionado quando um vídeo termina a reprodução. Para este evento ser utilizado, deve ser registrado com o exemplo utilizando o método FLVPlayback .AddEventListener (), tal como todos os outros eventos.

O exemplo a seguir irá definir a propriedade .Alfa do vídeo para 0,5 quando a reprodução completar.

import fl.video.*;

var myVideo:FLVPlayback = new FLVPlayback();
myVideo.source = "video.flv";
myVideo.skin = "SkinOverPlayStopSeekFullVol.swf";
myVideo.addEventListener(VideoEvent.COMPLETE, completePlay);
function completePlay(e:VideoEvent):void {
myVideo.alpha=0.2;
}

addChild(myVideo);

Isso conclui nosso trabalho. Até a próxima!

*

Artigo originalmente publicado em:  http://www.flashperfection.com/tutorials/Playing-Flash-Video-Using-The-AS3-FLVPlayback-Component-44200.html