videos http://www.pontoflash.com.br/tutoriais_con.php?

autor=60&tema=3&post=373
por Leandro Amano Nas prximas linhas estarei demonstrando o poder do Flash em relao a vdeos para Web. Afinal, se uma imagem vale mil palavras, um vdeo vale um milho delas. Conhecimentos: Este artigo pede um conhecimento bsico de ActionScript, mas necessrio ter uma familiaridade com o Flash. Antes de mais nada, o Flash pode trabalhar de trs formas com vdeo. A primeira delas integrando o vdeo diretamente ao .fla, atravs de um simples "File - import", esta a opo mais desagradvel de todas, pois geralmente o usurio precisa carregar todo o contedo antes que possa visualiz-lo. Claro que isso pode ser mudado, mas exige mais do desenvolvedor, que nem sempre tem conhecimento suficiente para faz-lo. A segunda forma atravs de vdeos externos ao Flash, arquivos de extenso "flv", os quais so obtidos mesmo apenas com o Flash MX 2004. Para isso importe o vdeo para dentro do arquivo .fla. Aps as configuraes de importaes, ele ter uma instncia na Library, onde podemos acess-lo diretamente. Para converter em .flv simples, basta clicar com o boto direito e pedir Properties - Export, automaticamente, ele pedir o nome do arquivo a ser exportado, como mostrado abaixo:

Tendo f inalizado isso, voc j tem o arquivo de extenso flv. Apesar do prprio Flash MX 2004 gerar esse formato, recomendo o uso do Sorenson Squeeze. A vantagem de se utilizar esse formato, que a Frame Rate do vdeo pode ser diferente a do seu filme principal, alm da distribuio externa de arquivos, claro. Mas a principal vantagem que considero a possibilidade da utilizao de Classes, que na verso MX s era possvel com o Macromedia Flash Communication Server, como as actions netConnection e netStream. O terceiro modo o Streaming real. Os modos mencionados anteriormente podem ser chamados apenas de Download Progressivo, pois o usurio final consegue guardar o arquivo para si, o que muitas vezes proibido. No irei entrar em detalhes sobre cada um dos trs modos, neste breve tutorial vou criar um tocador de vdeos utilizando os objetos que todo desenvolvedor do Flash MX 2004 possui, os componentes do tipo Media Components. No Flash Document em branco: Vamos antes de mais nada, para um bom desenvolvimento preciso nomear as layers que vamos trabalhar: Na layer do topo, vamos chamar a layer de as(actionScript), vamos criar mais duascom os nomes control e display. Recomendo que a layer de Action fique acima das outras. Em seguida, abriremos o painel de components, o caminho : Window Development Panels - Components. Com o painel aberto, abra a opo Media Components e arraste o MediaController e o MediaDisplay para suas respectivas layers. Devido ao component MediaDisplay no ter um objeto visual, clique na opo da layer: show as Outlines (fica ao lado do cadeado), isso deixar o objeto em evidncia para podermos visualiz-lo. Vamos aplicar aos components seus identificadores de instncia: _display para o MediaDisplay e _control para o MediaController. No layer as, fazemos o seguinte:

var _display:mx.controls.MediaDisplay; var _control:mx.controls.MediaController;

Isso nos permite acessar as propriedades e mtodos dos componentes mais facilmente. Atravs das actions abaixo vou dizer ao Flash qual filme chamar e avis-lo que o component _control e _display esto associados: _display.associateController(_control); _display.setMedia("flv/video.flv", "FLV");

Note que no setMedia, coloquei o vdeo em uma pasta separada, de nome flv. Isso adota uma prtica importante de organizao de arquivos do aplicativo. O nome do arquivo ser o arquivo de cada um, no meu caso o mesmo se chama video.flv. Vamos a mais algumas actions: _display.totalTime = 237; //Equivale 3 minutos e 57 segundos _control.controllerPolicy = "on";

O meu filme possui 3 minutos e 57 segundos, por isso 237 ser meu tempo total de filme (totalTime)((60x3)+57) . O controllerPolicy apenas nos deixa o _control setado como visvel. Apenas isso j resolve boa parte de nossos problemas, podemos at test-lo. O filme j est funcionando com o tocador! A partir de agora vou mostrar alguns passos simples para incio de uma criao customizada de MediaPlayer. Vamos adionar mais uma layer abaixo de as, de nome user. Nesta layer, devemos desenhar dois botes (na verdade o smbolo ser Movie Clip, mas ele funcionar como boto), mas apenas o boto stop poder ter seu icone associado, o boto play deve conter apenas seu formato, e ter desenhado na parte de fora mais dois MovieClips, com cones play e stop, como abaixo:

O mais importante de tudo nesse momento converter em separado cada um dos quatro objetos em Movie Clip, sendo que os cones de Play e Pause tero um linkage. Para quem no conhece, s pedir na hora da converso Advanced Selecionar o CheckBox de nome: Export for ActionScript, e aplicar um nome, o mc play ter o nome de play e o pause o nome de pause.

Feito isso, podemos deletar do palco os objetos play e pause. Isso porque estaremos chamando-os direto da Library (e tambm por serem muito leves). Na prtica no deve fazer isso, pois as action de preload no detectam esses objetos, deveramos de forma correta, deix-los em uma parte escondida do palco. Vamos instanciar os dois objetos que restaram de btPlay e btStop e aplicar suas declaraes nas actions: var btPlay:MovieClip; var btStop:MovieClip;

E vamos tambm tirar seus cursores de mo: btPlay.useHandCursor = false; btStop.useHandCursor = false;

Agora, iremos fazer o seguinte, a instncia do boto play j deve comear com o cone "pause", j que o vdeo comea tocando. Para isso: btPlay.attachMovie("pause", "mcIcon", 0);

Vamos ento colocar as actions dos botes. Se estiver tocando e pressionarmos pause, o boto deve pausar e inserir o cone play no boto, alm disso o boto stop tambm deve parar o filme, e tambm fazer com que o boto play troque de cone: btPlay.onRelease = function() { if (!_display.playing) { _display.play(); this.attachMovie("pause", "mcIcon", 0);

} else { _display.pause(); this.attachMovie("play", "mcIcon", 0); } }; btStop.onRelease = function() { _display.stop(); btPlay.attachMovie("play", "mcIcon", 0); }; Podemos ver agora que nosso player possui botes personalizados. Isso o interessante do Flash, a possibilidade de customizarmos tudo. E mais, vamos fazer com que o Flash nos retorne uma mensagem dizendo se est ou no tocando e tambm se o filme acabar, ele nos deve retornar um evento: this.createTextField("_status", _root.getNextHighestDepth(), 18, 353, 1, 1); _status.autoSize = true; _status.selectable = false; _status.html = true; _status.htmlText = "O <b>vdeo</b> est tocando...";var evento:Object = new Object(); evento.complete = function() { trace("Acabou o filme!"); _status.htmlText = "O <b>vdeo</b> est parado"; }; _display.addEventListener("complete", evento);

Dentro dos botes as actions com os textos tambm deve existir, o resultado final em nosso frame 1 : var _display:mx.controls.MediaDisplay; var _control:mx.controls.MediaController; var btPlay:MovieClip; var btStop:MovieClip; this.createTextField("_status", _root.getNextHighestDepth(), 18, 353, 1, 1); _display.associateController(_control); _display.setMedia("flv/video.flv", "FLV"); _display.totalTime = 237; _control.controllerPolicy = "on"; _status.autoSize = true; _status.selectable = false; _status.html = true; _status.htmlText = "O <b>vdeo</b> est tocando..."; btPlay.useHandCursor = false; btPlay.attachMovie("pause", "mcIcon", 0); btPlay.onRelease = function() {

if (!_display.playing) { _display.play(); this._parent._status.htmlText = "O <b>vdeo</b> est tocando..."; this.attachMovie("pause", "mcIcon", 0); } else { _display.pause(); this._parent._status.htmlText = "O <b>vdeo</b> est parado"; this.attachMovie("play", "mcIcon", 0); } }; btStop.useHandCursor = false; btStop.onRelease = function() { _display.stop(); this._parent._status.htmlText = "O <b>vdeo</b> est parado"; btPlay.attachMovie("play", "mcIcon", 0); }; var evento:Object = new Object(); evento.complete = function() { trace("Acabou o filme!"); }; _display.addEventListener("complete", evento);

Nosso player bsico est feito, o prximo player com vocs! Baixe aqui um arquivo desse tutorial (baixei: vdeonoflash.zip) Para um exemplo do que pode ser feito: www.flashfor.com.br/flashvideo Grande abrao e at a prxima!