Avaliação: | Publicado em: 04/09/2005

Player de MP3 com Flash e XML, parte I

Johnatan Oliveira Graduando em Tec. Informática e Aplicações Web, é desenvolvedor ASP/SQL Server e atua no mercado web a cerca de 4 anos como desenvolvedor e design de interfaces. É apaixonado por Flash MX/Action Script. Atualmente é Diretor de Projetos do Portal Plugmasters, colaborador da Revista WWW.COM.BR, onde escreve sobre ASP e Flash e designer/programador de uma agência web. Além de manter o site johnatan.net.

Player de MP3 com Flash e XML, parte I

Olá pessoal! Bom, nesta matéria nós vamos abordar diversos assuntos, que servirão de base para estudos mais aprofundados. O tema proposto é um player de mp3. Esta matéria foi publicada na Revista W, Edição 67 do Ano 6, como o nome de MP3 Player Online! Agradeco ao apoio de Sergio Vinicius, oOoOoEditor! hehehe! Ao longo das eventuais explicações e procedimentos demonstrados, vamos percebendo a diversidade de assuntos abordados em um único projeto e a imensidão de possibilidades que esta diversidade nos oferece. Como já havia citado, esta base sólida passada aqui, te deixará a vontade para pesquisar e aprender sem medo e sem receio, algum novo método ou utilidade para os processos.

Sobre o projeto

Vou descrever aqui, uma lógica de como seria o funcionamento interno do nosso player de mp3. Criaremos um arquivo XML, contendo os dados referentes às músicas, este XML poderá ser gerado manualmente ou por um sistema em qualquer outra linguagem, tornando o nosso player ainda mais dinâmico. XML preparado, lemos ele no flash e jogamos os dados necessários em um Componente ComboBox, onde as músicas serão listadas. Ao selecionarmos uma música no ComboBox preenchido, criaremos um objeto do tipo Sound();, desta maneira podemos controlar o som, possibilitando o controle do volume, balanço, play, pause, stop e até o calculo do tempo. Nesta matéria não utilizarei o componente MediaPlayBack, pois iremos fazer os processos de play, pausa, stop, volume, balanço e duração através de funções, aprofundando ainda mais nossos conhecimentos.

XML

1 <?xml version="1.0" encoding="UTF-8"?>
2 <musicas>
3    <musica nomeMusica="Selecione uma Musica"></musica>
4    <musica nomeMusica="BackToYou.mp3"></musica>
5    <musica nomeMusica="SemRadar.mp3"></musica>
6    <musica nomeMusica="GoodPeople.mp3"></musica>
7 </musicas>

Na linha 1 temos o cabeçalo <?xml version="1.0" encoding="UTF-8"?>. Esta é a declaração do XML, embora não seja obrigatória, a sua presença explicita identifica o documento como sendo XML e especifica a versão em que foi escrito. Na linha 2 temos o primeiro nó filho do XML,chamado musicas. Nas linhas 3,4,5,6 temos os nós filhos de musicas, todos contendo o atributo nomeMusica, onde estará o nome do arquivo mp3. Após digitar o XML no bloco de notas ou qualquer outro programa desejado, salve-o como musicas.xml.

Xml pronto, todos os nossos próximos passos serão dentro do Macromedia Flash.

Criando e preparando o arquivo .fla

Abra o seu Macromedia Flash 8 (Pode-se usar a versão 7), crie um novo documento em branco ( File > New [Ctrl+N] escolha Flash Document), com tamanho 400x200px, fundo branco [padrão] e frame rate 12fps [padrão]. Antes de tudo salve-o como playermp3.fla (File > Save [Ctrl+S]). Vamos deis de já preparar as camadas que usaremos e deixar o .fla pronto pra ser editado. Utilizaremos 8 camadas inicias. Camada action (conterá todo o nosso action script), camada time (conterá uma caixa de texto onde será mostrado o tempo decorrido formatado como [00:00] ), camada controles (conterá um Movie clip com os botões de volume e balanço, além dos seus respectivos valores), camada comboBox (conterá o componente ComboBox devidamente personalizado e preenchido pelo xml), camada pausa (conterá o butão de pausa), camada stop (conterá o butão de stop), camada play (conterá o butão de play), camada barra (conterá o Movie Clip barra, que servirá para a mostrarmos o andamento da reprodução). E ficará assim:

Layout e Movie Clips

Vou descrever aqui o que você terá que criar e jogar no palco, além de alguns procedimentos imprescindíveis. Assim conseguiremos produzir de maneira sincronizada e sem erros. Vamos seguindo de acordo com a seqüência de camadas já citadas. Na camada time, crie uma caixa de texto com as seguintes configurações: Text type [Dynamic Text], Instance Name [tTime].

Na camada controle, crie um novo Movie Clip (Insert > New Symbol [Ctrl+F8]) chamado controles contendo duas caixas de texto do tipo Text type [Dynamic Text], uma com Instance Name [txtvolume] e o segunda com Instance Name [txtbalanco], estas duas caixas de texto dinâmicas serviram para mostrarmos o volume e o balanço setados na musica corrente. Crie também 2 botões, de + e de -, para podermos alterar as configurações de volume e balanço da música. Criado os botões jogue-os dentro do Movie Clip controles, 2 pra cada configuração, ou seja, 2 para volume, 2 para balanço. No + para volume instancie-o como volAumenta, no menos para volume instancie-o como volDiminui. No + para balanço instancie-o como balAumenta, e no – para balanço instancie-o como balDiminui. Volte para scene principal, jogue o Movie Clip controles no palco e instancie-o como controles.
Na camada comboBox, abra a aba Components (Window > Components [Ctrl+F7]), click no + em User Interface, selecione e arraste o componente ComboBox para o palco. Aumente um pouco a largura dele e instancie-o como cb_musicas.

As camadas pausa, play e stop conterão butões respectivos, que você mesmo pode criar. Mais lembre de instanciá-los como mcPlay, mcPlay, e mcStop, respectivamente, após joga-los no palco.

Na camada barra, crie um novo Movie Clip (Insert > New Symbol [Ctrl+F8]) chamado mcBarra, dentro dele crie um novo Movie Clip chamado barra_d com largura de 100px (isso vai importante na hora da programação), e instancie-o como barra_d  esta será nossa barra de progressão da música. Volte para a scene, jogue o MovieClip mcBarra no palco e instancie-o como barra.

E nosso player var ficar parecido com isso no palco:

Bom, chegamos ao fim da 1° Parte desse artigo. Na 2° Parte faleremos sobre o Action Script. No final deste artigo, estarei disponibilizando os pdf´s da materia completa na revista e todos os arquivos fontes!

Abraços e até a próxima

• Flash e Orientação a Objetos