sexta-feira, 8 de maio de 2009

Criando um player de rádio utilizando o flash

Fazer uma rádio virtual não parece uma tarefa fácil, mas pode ficar mais simples utilizando o Flash MX, da Macromedia. Essa versão do programa trouxe avanços como o suporte nativo a códigos e objetos XML e também a possibilidade de inserir textos e até arquivos MP3 de forma dinâmica. Graças a isso, em apenas 12 minutos conseguimos montar uma rádio online com três canais, utilizando objetos específicos para esse fim. Para você montar a sua rádio, além do Flash MX será necessário ter os scripts que façam a rádio operar. Eles estão disponíveis para download no endereço ftp.info.abril.com.br/radioflash.zip. Antes de começar, é bom já ter em mente como será a sua estação, ou seja, como serão os botões, qual será o nome, como será o design e — claro — quais músicas serão incluídas.

1. Com o Flash MX aberto, crie um novo arquivo e no quadro Properties defina o tamanho que terá sua rádio virtual. Em nosso caso, fizemos a Estação INFO com 250 x 150 pixels.

2. No menu principal clique na opção Insert e escolha New Symbol. Uma janela Create New Symbol será aberta. Selecione a opção Movie Clip e dê o nome xmlObj para o objeto. Dê um comando Control+L e a biblioteca será aberta, aparecendo o objeto criado. Clique nele e arraste-o para a rádio. Depois abra a janela Action e insira o script “cxml”, disponível no arquivo baixado. Em seguida, com o objeto selecionado vá até Propriedades (Properties) e onde aparece digite cxml. O objeto xmlObj fará o Flash conversar com o arquivo XML. Ele é o motor da nossa rádio.

3. Agora crie uma layer na Timeline e dê a ela o nome de Ações. É aconselhável que você inclua cerca de cinco frames nessa primeira layer. E para isso basta clicar cinco vezes na tecla F5. Clique no primeiro frame e em seguida abra a janela Actions Frame. No quadro branco que aparece à direita da janela insira o script Ações, também diponibilizado no arquivo baixado. Ele cuidará das ações que cada botão da rádio vai executar.

4. Quem não tiver nenhum botão disponível para a rádio pode utilizar os que são oferecidos pelo próprio Flash MX na opção Common Libraries. Serão necessário seis botões. Para músicas: Avançar, Voltar, Parar e Tocar. Para estações: Avançar e Voltar. Clique em cada um deles e arraste-os para o local exato que eles devem ficar.

5. Escolhidos os botões, será necessário definir as ações deles. Vamos começar pelo Voltar. Clique no botão correspondente e depois na janela Actions - Movie Clip. Nela selecione as opções Actions/Movie Control e dê um duplo clique na opção On. Uma janela será aberta ao lado. Dê um duplo clique na opção Release. Aparecerá o seguinte código:

on (release) {
}

Como estamos configurando o botão Voltar, precisamos escrever o comando radioPrevious(); entre as chaves para que ele funcione. O resultado final dessa operação é o código

on (release) {radioPrevious();
}

6. Agora precisamos fazer o mesmo para os outros botões. No caso do Stop o comando é

on (release) {radioStop();
}

7. Para o Play o comando é

on (release) {radioPlay();
}

8. Para o botão Próxima música o comando é

on (release) {radioNext();
}

9. No botão que irá mudar as estações dessa rádio online o comando deve ser

on (release) {stationNext();
}

10. Já para retroceder o comando é

on (release) {stationPrevious();
}

11. Também precisamos definir o espaço onde aparecerá a identificação das músicas. Na Estação INFO decidimos deixar três campos: um com o nome da música, outro com o do cantor e outro com o do canal.

12. Para inserir um texto abra a janela de ferramentas e selecione a opção A. Em Propriedades (Properties) na janela Text Tool selecione Dynamic Text. E no quadro onde está montando a rádio selecione o espaço onde você quer que apareça o nome do canal. No quadro Var, que aparece em Propriedades, digite txtStation.

13. Agora abra um outro espaço na tela para inserir o nome da música e no quadro Var digite txtTitle.

14. Repita o mesmo processo na criação do nome do cantor e no campo Var digite txtComposer.

15. Feito isso, é necessário incluir mais um script. Selecione o segundo frame na Layer, abra a janela Actions e insira o código “para”, que também está disponível no arquivo baixado.

16. Não se esqueça de editar o arquivo XML chamado radio.xml, que também foi baixado. Abra-o no Notepad ou em outro editor HTML e ponha os nomes das estações, das músicas, dos cantores e do arquivo MP3 entre as TAGs correspondentes.

17. Por fim, vá ao menu Principal e selecione a opção Publish. Isso fará com que o arquivo Flash com extensão “.fla” seja transformado em outro com extensão “.swf”. Para a rádio funcionar sem problemas todos os arquivos devem ficar no mesmo diretório.

0 comentários: