Criando um VideoPlayer de FLV no Flash - Parte 1

Hello! Trabalhar com vídeo no Flash é uma maravilha. Não precisamos de plugins extras, como quick time, real player, media player e etc, e é possível trabalhar com ótimas qualidades e grandes compactações. Trabalhar com vídeo até em swf, ou então em um formato mais amigável, nato do Flash, como o FLV(Flash Video).

Muitos já devem conhecê-lo, pois desde a versão MX 2004 o Flash já vem com componentes para player de vídeo, como o MediaDisplay, dentre outros. E é ai que entra nosso problema. Os componentes normalmente são pesados, ou tem recursos demais para poucas necessidades, ou até mesmo recursos de menos dependendo de nossas necessidades. Então surge o problema: como fazer o nosso próprio player de FLV?

Ahá! Aí que entramos em nosso artigo. O mesmo será dividido em duas partes. A primeira voltada ao motor básico do player, e a segunda a controles extras como progress bar e seek bar. Lembrando que este é um artigo para usuários de nível médio a avançado, e funciona com Flash MX 2004 ou superior.

Caso você ainda não saiba como transformar o seu vídeo para o formato .FLV, e muito fácil. No Flash você pode importar o video como embend video para biblioteca, clicar com o botão direito nele e exportar, utilizar programas terceiros, como o ótimo Sorenson Squeeze, ou o novo Macromedia Flash 8 Video Encoder, que acompanha nosso maravilhoso Flash 8. Depois de nosso vídeo convertido, e o FLV não mão, vamos ao player!

1º Passo - Desenhando o Layout :

Começaremos criando um novo arquivo no Flash, com o palco de largura 240 px e altura 240 px. Logo após, uma camada exclusiva para as ações, com o nome de actions, e outra para o layout, com o nome de player.

Iniciando, criaremos nosso chamado "display", um objeto Video na biblioteca que, logo após, será arrastado ao nosso palco. Em sua biblioteca (Library), localize uma setinha no canto da paleta, e siga como abaixo:

Seguindo...

Arrastamos nosso Display criado na biblioteca para encaixe no palco, e damos a ele o instance name de display:

Agora vamos desenhar o resto dos controles, começando pelo botão de stop, que deve ser instanciado como btStop:

Logo após, o botão de play e pause, quando o vídeo está tocando, fica visível a opção de pause. E quando está pausado, a opção de play. Começaremos então desenhando o botão de play, e transformando-o em um mc, com o instance name de btPlayPause. Mais ou menos assim:

Depois devemos abrir nosso botão btPlayPause para edição e criarmos um segundo frame. Nele, o desenho do nosso botão de pause. Desta forma. no primeiro frame temos o botão de Play e no segundo o de Pause.

Agora vamos a uma parte do layout que exige atenção. Caso vocês não consigam, podem baixar os arquivos do artigo no final, e ver como é.

Para o seek bar do volume, desenharemos uma linha, e acima dela um botão que será arrastável e percorrerá toda a linha. Logo após, transformaremos em uma mc com registration 0, e instanciando como mcVolumeControl:

Abrindo nosso mcVolumeControl para edição, separemos o botão em uma camada, e a linha arrastável em outra, um abaixo da outra. Transformaremos nossa linha em um mc, também com registration 0, com o instance name de mcSeekVolume:

Selecionando nosso botão arrastável, transformaremos ele também em um mc, com registration 0, e acima da linha, como já falado. Instancie-o como btVolume:

Para finalizar a parte do seek bar de Volume, voltaremos para o palco principal(_root) e, clicando com o botão direito na biblioteca(Library), em cima do nosso mcVolueControl, vamos até Linkage, e lá faremos a seguinte configuração:

Como podemos ver, fora definido a classe AS 2.0, VolumeControl, uma classe facilitadora de controle do volume para Video, criada por mim , para nos auxiliar nesta empreitada. A mesma pode ser baixada no final do artigo junto com o pacote completo.

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 de nossa aplicação, na camada criada no início chamada Action:

//configuração do palco...
//não necessário, fica a gosto...
Stage.align = "MC";
Stage.scaleMode = "noScale";
fscommand("allowscale", "false");
fscommand("fullscreen", "false");
_quality = "BEST";
//iniciando projeto...
//declarando variáveis...
var display:Video;
var videoAtual:String = null;
var tempoAtual:Number = 0;
var isPlay:Boolean = false;
//botoes e mcs do player...
var mcVolumeControl:MovieClip;
var btPlayPause:MovieClip;
var btStop:MovieClip;
//som para o controle do volume do player...
var somVideo:Sound = new Sound();
//criando conexao do stream de video...
var netConVideo:NetConnection = new NetConnection();
netConVideo.connect(null);
//criando stream para ser usado na conexao...
var netStmVideo:NetStream = new NetStream(netConVideo);
//um pequeno buffer antes do filme começar...
netStmVideo.setBufferTime(3);
//objeto monitor de eventos do video...
netStmVideo.onStatus = function(info):Void
{
//este if server para verificar se o filme ja acabou, rebobinando o mesmo...
if(info.code == "NetStream.Buffer.Flush"){
netStmVideo.play(videoAtual);
stopVideo();
}
}
//adicionando o stream ao nosso display no palco...
display.attachVideo(netStmVideo);
//função responsável por setar o video a ser carregado e tocado...
function setVideo(src:String):Void
{
//caso o comando de tocar seja pra um video já sendo tocado, evita o recarregamento...
if(videoAtual != src){
netStmVideo.play(src);
//salva numa var, o video atual para posterior verificação...
videoAtual = src;
} else {
//neste caso o video atual e o mesmo do comando, assim só recomeça a tocar...
netStmVideo.seek(0);
}
//configurando player para que esteja tocando...
btPlayPause.gotoAndStop(2);
isPlay = true;
}
//função responsável pelo Play/Pause do filme...
function PlayPause():Void
{
//verifica se o video esta tocando, caso sim, pausa...
if(isPlay){
//salva o tempo atual para posterior continuação ao apertar em play...
//esse menos 10 e para não haver corte e delay no tempo de apertar o botão...
tempoAtual = netStmVideo.time - 10;
netStmVideo.pause(true);
isPlay = false;
} else {
//caso esteja parado continua a tocar da onde parou...
isPlay = true;
netStmVideo.pause(false);
}
}
//função responsável pelo stop do filme...
function stopVideo():Void
{
//resetando o tempo atual caso esteja em pause...
tempoAtual = 0;
netStmVideo.seek(0);
netStmVideo.pause(true);
isPlay = false;
//joga o botão de play/pause para o frame do play...
btPlayPause.gotoAndStop(1);
}
//setando ação dos botões...
btStop.onRelease = stopVideo;
btPlayPause.onRelease = function():Void
{
//verifica a atual situação para dizer se deve aparecer o play ou pause...
if(isPlay && this._currentframe == 2){
this.gotoAndStop(1);
} else {
this.gotoAndStop(2);
}
//ativando a função PlayPause()...
PlayPause();
}
//passando ao mcVolume oque ele vai controlar...
mcVolumeControl.setVolumeObject(somVideo);
//por fim damos load e play em nosso video...
setVideo("video1.flv");

Agora é so publicar nosso player e testar. Vejo vocês semana que vem, na segunda parte do artigo.

Clique aqui para baixar os arquivos de exemplo deste tutorial.

Até a próxima e abracetas!

Tutorial retirado de http://imasters.uol.com.br/

http://www.hc-host.net/