Aprenda a criar uma interface de vídeo com menu de acesso parecida com a do YouTube

Quem já não passou um tempão na frente do PC vendo os vídeos do YouTube?

E quem já não teve vontade de construir uma área de vídeo no próprio site? Se você se inclui nessa última turma, este tutorial pode lhe dar uma boa mão. Vamos desenvolver aqui uma interface de vídeo com recursos de menu, utilizando os formatos do Flash 8. Como no YouTube, o menu aparecerá na tela antes da exibição de qualquer filme, retornando a ela ao término de qualquer exibição ou quando o botão Parar for pressionado.

Antes de começar a programar a interface, vamos converter os filmes para o formato Flash Video no utilitário Flash Video Encoder, que acompanha a versão Professional do Flash 8. Apesar de o assistente de importação de vídeo do Flash 8 ter as mesmas opções, o Flash Video Encoder permite a conversão em lote, o que facilita muito a vida de quem possui mais de um vídeo para mudar de formato.

1) A CONVERSÃO

Abra o Flash Video Encoder e acione o menu File/Add. Na janela Abrir, selecione os dois filmes que serão convertidos em Flash Vídeo. Clique em Abrir. Escolha um vídeo e clique em Settings para configurar. Na primeira tela, clique em Show Advanced Settings. Unifique o tamanho de exibição dos vídeos na tela, redimensionando-os para 320 por 240 pixels, e clique em OK para retornar à tela principal. Configure cada filme na fila do Encoder e clique no botão Start Queue para disparar a conversão. Ao terminar, feche o Flash Video Encoder.

2) SELEÇÃO DE ARQUIVOS

Vamos criar o player. No Flash 8, crie um novo documento e salve-o como videoplayer.fla. Acione Menu/Import/Import video para abrir o assistente de importação de vídeo. Na primeira tela, Select Video, clique no botão Browse para escolher o arquivo a ser importado. Escolha qualquer um dos dois arquivos convertidos, clique em Abrir e avance.

3) SAÍDA DE VÍDEO

Na segunda tela do assistente, escolhemos um dos quatro modos de entrega do vídeo online. As duas opções de streaming exigem que o vídeo seja armazenado em servidor dedicado. A opção de vídeo embutido na linha de tempo carrega o vídeo todo, tornando o arquivo final muito grande. Escolhemos para este tutorial o download progressivo, pelo qual o Flash Player vai tocando o filme enquanto o download prossegue. Avançamos.

4) A CAPA

Na terceira tela do assistente, escolhemos uma capa para o tocador. Ficamos com a SteelExternalAll. O processo amarra a aplicação a um arquivo externo (a capa), criado no diretório de desenvolvimento, na hora da publicação. O arquivo externo, que terá o mesmo nome do preset escolhido mais a extensão .swf, deve ser copiado com o filme principal para a mesma pasta no servidor web. Na tela seguinte, checamos o resumo das opções escolhidas e clicamos em Finish.

5) O VÍNCULO

De volta ao palco, vemos que foi criado um componente FLVPlayer vinculado ao vídeo “importado”. Selecione o componente, acesse sua caixa de propriedades (Ctrl+F3) e altere o nome para mc_tocador. Na aba Parameters dessa mesma caixa, apague o conteúdo do campo contentPath, que vinculava o player ao vídeo. Como o conteúdo será assinalado dinamicamente, deixamos esse campo em branco e não importamos o outro vídeo — ele será carregado por código.

6) O XML

O menu terá texto dinâmico carregado por um arquivo XML. Para construí-lo, digitamos no Bloco de Notas o código já com os textos do título, da descrição, do tempo e da data embutidos. Fica assim:

http://www.xxx.com.br/nomedofilme1¦

Lente móvel e superzoom¦

Zoom óptico de 10x equipa a câmera Nikon Coolpix S4¦

1 min 17 seg¦

08/12/2006¦

http://www.xxx.com.br/nomedofilme2¦

Case de HD para rede¦

O storage Trendnet TS-I300W funciona em redes com ou sem fio¦

1 min 38 seg¦

30/11/2006¦

7) O MENU

Salve o arquivo XML como info.xml. Criaremos agora o menu. No Flash, insira uma nova camada com o nome “menu”. No primeiro frame, desenhe ou importe o plano de fundo. Com o fundo selecionado, vá à caixa de propriedades e altere as dimensões para 320 por 240 pixels. Depois, copie os valores das coordenadas x e y do objeto mc_tocador. Isso criará uma caixa sobreposta à tela do tocador e, nela, faremos o menu. Ainda com a caixa selecionada, pressione F8 para torná-la símbolo. Na caixa de diálogo, dê o nome “menu” e escolha tipo movieclip. A partir de agora, esse objeto será um movieclip, com linha de tempo exclusiva. Na janela de propriedades, dê o nome de instância mc_menu.

8) O TEXTO

Acessamos a linha de tempo do menu dando um duplo clique no objeto. Abre-se o programa “menu”. Crie uma nova camada, que chamaremos de “textos e fotos”. Nela, com a ferramenta de texto, trace os campos de título, descrição, tempo exibição e data do vídeo. Na janela de propriedades do campo do título, altere o tipo de texto para Dynamic Text, atribua um nome de instância (titulo0) e, no campo Var, atribua o nome de variável (titulo0_txt). Repita o processo para os campos de descrição, tempo e data, não esquecendo de alterar a numeração dos campos e atribuir o tipo de linha para os textos de uma (Single line) ou várias linhas (Multiple lines). Repita todo o processo para o segundo filme.

9) AS FOTOS

Com a ferramenta de desenho, delimite a área que conterá as fotos dos filmes e que serão carregadas dinamicamente. Selecione o traçado, converta em símbolo do tipo movieclip (tecle F8), e dê o nome “botão”. Em seguida, na caixa de propriedades, dê o nome de instância mc_foto0 para a foto do primeiro filme. Repita todo o processo para a foto do segundo filme.

10) BOTÕES INVISÍVEIS

A seguir, crie uma nova camada e dê a ela o nome “botoes invisiveis”. Da janela Components (Ctrl+F7), arraste um componente botão da pasta User Interface até o palco. Selecione o botão e, na aba Parameters da caixa propriedades, limpe o campo Label. Clique no botão com o botão direito do mouse, escolha Free Transform e ajuste o tamanho para assentar sobre a área da tela em que ele deverá ficar para acionar o filme. Transforme o botão em símbolo (tecle F8), dê o nome botao_invisivel e selecione tipo movieclip. Na caixa de propriedades, altere o campo Color para Alpha, e o percentual, para 0%. Isso o torna invisível, mas ainda assim clicável. Altere o nome do botão na caixa de propriedades para botao0. Acesse a biblioteca, localize o movieclip botao_invisivel e arraste mais um para o menu. Altere o campo Color para Alpha com 0%, o nome na caixa de propriedades para botao1 e posicione-o corretamente. Concluímos o menu.

11) EM DESTAQUE

Agora criamos as áreas do menu que entram em destaque quando o cursor passa sobre elas. No movieclip menu, crie uma camada e dê a ela o nome “destaque”. Posicione-a atrás dos botões e textos, à frente apenas do fundo. No primeiro frame dessa camada, desenhe um retângulo de cor azul que emoldure o quadrado que conterá a foto e o texto do primeiro filme. Transforme-o em símbolo do tipo movieclip, de nome “destaque”. Na janela de propriedades do destaque, atribua o nome de instância transpa0, mude o campo Color para Alpha com percentual de 60%. Depois, arraste da biblioteca uma nova instância do destaque e coloque sob o segundo filme. Dê a ela o nome de instância transpa1 e altere Color para Alpha, com 60%.

12) A PROGRAMAÇÃO

Partimos para a programação. Primeiro, faça o download do aquivo codigo251.zip e descompacte. Em seguida, abra a linha de tempo do filme principal e, no primeiro frame, crie uma nova camada. Dê a ela o nome “script”, acione o editor de ActionScript e cole o código. Esse código comentado monta o texto e as imagens do menu conforme os dados que recuperou do XML, roda o filme de acordo com a interação do usuário no menu e nos controles do player e mostra ou esconde o menu de acordo com a exibição do filme. Está feito.

Ao transferir seu trabalho para o site, não se esqueça de fazer o upload, com o arquivo videoplayer.swf gerado, do XML, dos filmes, das fotos e do SWF criado com a capa (e seus botões de controle) do player escolhido. Ele é gerado no mesmo diretório de trabalho do arquivo .fla e tem o nome da capa — SteelExternalAll.swf, no nosso tutorial. Confira o código inteiro, baixando o arquivo iutube251.zip.