Coluna Flash – Flash Vídeo – Media Components

Flash Platform – Developing a Simple Rich Media Player
Desenvolvendo um Simples Tocador de Vídeo em Flash 8

Introdução

Estaremos definindo neste artigo algo mais concreto sobre Flash 8 e vídeo, mídia rica que nenhum outro pode propor, tanto em facilidade de desenvolvimento como retorno em menor prazo.

Pré-Requisitos

Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash.

Objetivo

Definir o uso de Flash Vídeo com e sem servidor, utilizando novos componentes providos junto ao Flash 8.

Conceitos

O Flash 8 trabalha diferentemente dos seus antecessores com vídeo, nesta versão qualquer um pode trabalhar com download progressivo de maneira profissional. No momento da importação o Flash já nos traz a opção desse tipo de uso com vídeo, mas não entrarei em detalhes sobre isso aqui.

Estaremos utilizando o formato .flv nos vídeos que é o único formato real de vídeo no Flash.
A vantagem de se utilizar esse formato, é que a Frame Rate do vídeo pode ser diferente a do seu filme principal, além da distribuição externa de arquivos, é claro. Mas a principal vantagem que considero é a possibilidade de streaming real, que na versão MX só era possível com o Macromedia Flash Communication Server, como as actions netConnection e netStream. Não vamos esquecer que o Flash 8 suporta vídeo com canal Alpha e filtros aplicados dentro do próprio Flash!

Mas, o que e Streaming? Streaming e a distribuição em tempo real de vídeo ao vivo ou áudio na internet. Esse streaming só pode ser transferido com o Flash utilizando o Macromedia Flash Media Server 2 (ou Macromedia Flash vídeo Streaming Service). A buferização é usada para armazenar dados, antes que o streaming comece a tocar ou continue tocando.
Vídeos digitais são codificados e decodificados usando um CODEC (CODEC=COmpression (compressão) / DECompression (descompressão)). V ídeos e áudios utilizam diferentes CODECs, mas são compilados dentro de um único arquivo, o player precisa do mesmo CODEC para que possa ser assistido.

Então a vantagem do Flash 8. A nova versão já traz consigo o Macromedia Flash 8 vídeo Encoder que converte AVI, MOV, WMV, DV, MPEG em FLV, neste caso o cliente necessita apenas do mesmo Flash Player para visualizar esse conteúdo rico.
Algumas das vantagens que a Macromedia traz com o Flash:

• Nenhum JavaScript complexo e requerido;
• Não necessita de checagem de plataforma;
• Não necessita de pop up;
• Rápida buferização e play
• 100% de controle sobre o player ;
• O player é facilmente controlado com ActionScript;
• Player 100% customizável;
• Captura de vídeo (fire-wire cameras, USB cameras, microfones);

Agora que conhecemos uma leve camada superficial sobre vídeo e alguns conceitos, vamos desenvolver um mini player

Conteúdo

No Macromedia Flash 8, num novo Flash Document:

Já iremos criar as layers que iremos trabalhar, algumas boas convenções a serem seguidas:

• A layer do topo deve ser a de ActionScript, uso o nome as;
• Layers nunca são chamadas por actions, logo o nome descritivo deve sempre ser alterado de forma que fique fácil de entender, não importando espaços e acentuações;
• Layers que não são usadas em tempo de execução devem ser alteradas para “guides”, para isso é só clicar com o direito sobre a layer e pedir guide;

Em nossas layers:
Na layer do topo, vamos chamar a layer de ~AS(actionScript).
Também criaremos mais três layers: UI Components, FLV Playback e controles, a ordem de cima para baixo é:

• as (corrigir para ~AS)
• UI Components
• FLV Playback
• controles

import mx.video.FLVPlayback;
var _playback:FLVPlayback;

Estamos importando a classe FLVPlayback e identificando o objeto visual que estará associado a classe, isso nos permite acessar as propriedades e métodos dos componentes mais facilmente.
Através das actions abaixo vamos dizer ao Flash qual filme chamar:

Note que no contentPath, coloquei o vídeo em uma pasta separada, de nome sampleFLV. Isso adota uma prática importante de organização de arquivos do aplicativo. O nome do arquivo será o arquivo de cada um, no meu caso o mesmo se chama video.flv.

Vamos abrir novamente o painel de componentes e arrastar para a layer UI Components dois componentes List, que se encontram no nó User Interface, esses componentes terão os nomes de instâncias _filmes e _capitulos.
Dentro do componente _filmes vamos editar seus labels e datas, que nada mais são que respectivamente rótulos e dados que serão armazenados, onde no caso de filmes, labels guardará os nomes descritivos dos filmes e data o endereço dos filmes.
Para o componente _capitulos, iremos armazenar nomes descritivos para os capítulos do filme correspondente e em data armazenaremos o tempo que corresponde a entrada do capítulo, por exemplo 5 (5 segundos).

As configurações para _filmes são:

• Label: Baby, Montain, Jamie;
• Data: sampleFlv/adrian.flv, sampleFlv/MtnBike.flv, sampleFLV/Jamie_on_White.flv;

_playback.playButton = _play;
_playback.pauseButton = _pause;
_playback.stopButton = _stop;
_playback.seekBar = _seek;
_playback.volumeBar = _volume;
_playback.muteButton = _mute;

Podemos testar e ver como reage com esses novos componentes, e um detalhe muito importante, com dois cliques nesses componentes de navegação, podemos editar formas e cores personalizadas, como acontecia com os componentes UI na versão MX. Tudo isso com apenas nove linhas de ActionScript.

Na layer de ActionScript iremos agora adicionar alguns eventos que nos informam eventos ocorridos durante a execução:

Agora que já temos nosso texto precisamos adicionar eventos e conforme a ocorrência apresenta-los no campo de texto, nosso componente possui alguns eventos, como ready e stateChange, veremos algo muito breve sobre isso. Assim como todo componente devemos adicionar ou objeto genérico que fica prestando atenção a eventos que ocorrem com o Objeto, é ele quem nasce exclusivamente para escutar esses eventos, chamaremos ele de ouvidor:

Agora que está criado nosso objeto (abaixo das actions anteriores) devemos aplicar a este objeto os eventos que escutaremos, no caso ready e stateChange:

Aplicando agora o objeto ouvidor ao componente utilizado:

Nosso código final é esse:

Considerações Finais

O uso direto de filtros no vídeo não é permitido, para isso transforme o vídeo em MovieClip e aplique filtros e Blend Modes como desejar, só não esqueça de mudar na ActionScript a referência ao objeto.

Espero que tenham gostado, dúvidas ou sugestões são bem vindas em meu e-mail.
Abraços e até a próxima!

Autor: Leandro Amano – Articulista de Flash do MXSTUDIO

Site: www.leandroamano.com.br
Sobre: Leandro Amano atualmente é designer/desenvolvedor Macromedia, Macromedia User Group Leader do Flashfor, diretor de criação da Digital Bug e instrutor Macromedia na ENG DTP & Multimídia em São Paulo – SP.

Qualquer dúvida envie um email para amano@leandroamano.com.br ou acesse o nosso fórum.