Coluna Flash – Player de música

Olá amigos do MXStudio,

Meu nome é Felipe Gomes e esse é meu primeiro (espero que de muitos) artigo aqui no MXStudio.

Para começar, escolhi algo que não é complicado de fazer mesmo para quem não tem muita prática no ActionScript, mas que é muito interessante para ser inserido nos sites e outras aplicações que possamos desenvolver: um player de música.

Mãos a obra?!

Comece desenvolvendo um layout para seu player, lembrando que ele terá as seguintes informações:

Artísta, nome da música, nome do álbum e botões para avançar e voltar de música, play, stop e pause.

O meu player ficou da seguinte forma:

Depois de definir o layout do player, vamos criar os três campos necessários, que mostrarão o nome do artísta, nome da música em execução e o álbum a que percente.

Vamos criar agora a layer (camada) em que os campos com as informações da música ficarão.

Para criar uma nova layer, vá ao menu Insert (Inserir) > Timeline (Linha do tempo) > Layer (Camada). Renomeie a layer criada para “informações” – sem aspas.

Agora criaremos os três campos. Primeiramente o campo “Artísta”.

Selecione a Text Tool (Ferramenta de texto) na barra de ferramentas e insira o campo onde desejar, lembrando de deixá-lo com uma largura que caiba o nome do artísta corretamente.
É preferível criar campos grandes, pra que os nomes não sejam cortados.

Após criar o campo, na barra de propriedades, digite “artista_txt” – sem aspas – no campo “” (Nome de instância). E defina o campo como “Dynamic Text” (Texto dinâmico).

Observe a figura abaixo:

Repita o processo três vezes, apenas trocando o nome de instância para “musica_txt” e “album_txt” – ambos sem aspas.

Agora que você já tem os três campos criados, vamos aos botões que controlarão o player.

Crie uma nova layer (camada), e dê o nome de “controles”.

Vamos criar primeiro o botão de play, depois basta repetir o mesmo processo para os outros botões que usaremos.

Com a ferramenta Shape Tool (Forma), crie um botão que será o ícone do play.
Após criar a forma, selecione-a e pressione “F8”, na janela em que se abrir, digite “play_btn” no campo “Name” (Nome) e escolha a opção “Button” (Botão).

Observe a imagem abaixo:

Após isso, selecione o botão e na barra de propriedades mude seu nome de instância para “play_btn”.

Para criar os demais botões de avançar, retroceder, stop e pause, repita os mesmos passos, apenas alterando o nome do botão e nome da instância.

Seguem abaixo os nomes:

Play – play_btn
Stop – stop_btn
Pause – pause_btn
Next – next_btn
Previous – previous_btn

Obs: Lembrando que Next significa “próximo” e Previous, “anterior”.

Bom, agora que já temos os campos de informações e também os botões que controlarão as músicas, vamos às actions!

Vamos inserir todas as ações na raiz do filme, dessa maneira fica mais fácil programar no Flash, pois toda a programação fica num só lugar, sendo mais fácil de administrar tudo.

Quem tem costume de colocar as ações em cada símbolo, frame, etc., separado, estranha numa primeira vez, mas logo percebe que essa maneira facilita muito a programação no Flash.

Crie uma nova layer, dê a ela o nome de “Actions” – sem aspas.

Selecione o primeiro frame da layer que acabamos de criar, e pressione “F9”, para abrir a paleta Actions.

Digite a ação abaixo:

1. 1. stop();
   2. /* Criando objeto som_sound */
   3. var som_sound:Sound = new Sound();
   4. var numero:Number = 1
   5. function music() {
   6. /* Carregando som_sound */
   7. som_sound.loadSound(“musica.mp3″, true);
   8. _root.onEnterFrame = function() {
   9. /* exibe o nome da música no campo musica_txt */
   10. artista_txt.text = som_sound.id3.artist;
   11. musica_txt.text = som_sound.id3.songname;
   12. album_txt.text = som_sound.id3.album;
   13. }
   14. som_sound.start();
   15. }
   16. link_btn.onRelease = function() {
   17. getURL(‘http://www.felipegomes.com.br’, ‘_blank’);
   18. }
   19. link2_btn.onRelease = function() {
   20. getURL(‘http://www.mxstudio.com.br’, ‘_blank’);
   21. }
   22. music();

Agora irei explicar linha por linha:

Linha 1 – Ação stop() para parar o filme.

Linha 3 – Cria-se o objeto de som “som_sound”.

Linha 4 – Cria-se a variável “numero”, com o valor inicial igual a 1 (um).

Linha 5 – Cria-se a função “music”, que será responsável por fazer o player funcionar.

Linha 7 – Define-se o caminho da música ao objeto de som “som_sound”, substitua “musica.mp3” pelo nome de sua música. O atributo “true” informa que a mp3 será carregada em streaming.

Linha 8 – Cria-se uma função que será executada a cada frame do filme.

Linha 10 – Aqui dizemos para o campo de texto “artista_txt” exibir o nome do artista que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 11 – Aqui informamos que o conteúdo do campo de texto “musica_txt” exibirá o nome da música que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 12 – Aqui informamos que o conteúdo do campo de texto “album_txt” exibirá o nome do álbum que estiver setado na tag ID3 do arquivo .mp3 que estiver em execução.

Linha 13 – Encerra-se a função “onEnterFrame()”.

Linha 14 – Função “start()” do objeto “som_sound” que faz a música ser iniciada.

Linhas 16 a 18 – Função criada a partir do evento “onRelease()” do botão “link_btn” que executa a abre o site “www.felipegomes.com.br”, em nova janela.

Linhas 19 a 21 – Função semelhante à citada acima. Porém é executada no evento “onRelease” da instância “link2_btn” e abre o site do MXStudio.

Linha 22 – Chama a função “music()”.

Pronto, agora é só testar e conferir seu áudio rolando em streaming.

Coluna Flash – Player de música- Parte 2

Olá amigos do MXStudio.

Aqui estamos para mais um artigo.

Aliás, para a segunda e última parte do artigo do player de música.

Peço para quem não leu a primeira parte, que faça isso, pois para o completo entendimento desse tutorial, as duas etapas precisam ser estudadas.

Player de música – Parte 1

Bom, pra quem já fez o arquivo conforme a primeira parte do tutorial, falta apenas criarmos os botões de controle: pause, stop, play, avançar e retroceder e os botões de volume.

Antes de prosseguirmos, peço que selecione o primeiro frame da camada “ações” e pressione “F9” para abrirmos a paleta “Actions”.

Ao abrí-la, apague todas as linhas que digitamos na parte 1 do artigo e deixe sem ação nenhuma de código.

Após fazer isso, feche a paleta e vamos seguir em frente.

Crie os botões de play, stop, pause, próxima e anteior, o layout de sua preferência.

O importante é que o nome de instância dos botões fique de acordo com os nomes abaixo:

Botões de controle das músicas:

Pause – pause_btn

Stop – stop_btn
Play – play_btn
Proxima – next_btn
Anterior – previous_btn

Botões de volume:

Diminuir – vol_less_btn
Aumentar: – vol_more_btn

Feito isso, selecione o primeiro frame da camada “Actions” novamente e pressione “F9” para abrir a paleta de ações.

Agora copie o código abaixo e cole na paleta:

1. stop();
2. //Criando objeto som_sound
3. var som_sound:Sound = new Sound();
4. var numero:Number = 1;
5. //Volume
6. var vol:Number = 100;
7. /*cria-se a função music com o parâmetro “musica” que indicará a música que será tocada pelo player.*/
8. function music(musica) {
9.    //criando todas as variáveis necessárias
10.    var pos, verifica;
11.    /*a função “loadSound” carrega a mp3 no objeto “som_sound”, com o caminho
12.    especificado no parâmetro “musica”; true informa que será carregado por streaming*/
13.    som_sound.loadSound(musica, true);
14.    _root.onEnterFrame = function() {
15.       //exibe o nome da música no campo musica_txt
16.       artista_txt.text = som_sound.id3.artist;
17.       musica_txt.text = som_sound.id3.songname;
18.       album_txt.text = som_sound.id3.album;
19.       som_sound.setVolume(vol);
20.    };
21.    // ações dos botões ===============
22.    //pára a música
23.    stop_btn.onRelease = function() {
24.       som_sound.stop();
25.    };
26.    //pausa a música
27.    pause_btn.onRelease = function() {
28.       acao = “pause”;
29.       pos = som_sound.position/1000;
30.       som_sound.stop();
31.    };
32.    //dá o play
33.    play_btn.onRelease = function() {
34.       if (acao == “pause”) {
35.          som_sound.start(pos, 1);
36.          acao = “”;
37.       } else {
38.          som_sound.start();
39.       }
40.    };
41. }
42. previous_btn.onRelease = function() {
43.    if (_root.numero<>1) {
44.       _root.numero -= 1;
45.    }
46.    musica = “musica”+numero+”.mp3″;
47.    music(musica);
48. };
49. next_btn.onRelease = function() {
50.    if (_root.numero<>3) {
51.       _root.numero += 1;
52.    }
53.    musica = “musica”+numero+”.mp3″;
54.    music(musica);
55. };
56. vol_less_btn.onRelease = function() {
57.    if (vol>=10) {
58.       vol -= 10;
59.       trace(vol);
60.    }
61. };
62. vol_more_btn.onRelease = function() {
63.    if (vol<=90) {
64.       vol += 10;
65.       trace(vol);
66.    }
67. };
68. //=========================
69. musica = “musica”+numero+”.mp3″;
70. music(musica);
71. link_btn.onRelease = function() {
72.    getURL(‘http://www.felipegomes.com.br’, ‘_blank’);
73. };
74. link2_btn.onRelease = function() {
75.    getURL(‘http://www.mxstudio.com.br’, ‘_blank’);
76. };

Boa parte das explicações de cada linha está na parte 1 desse artigo, por isso é muito importante que ele seja lido.

Mesmo assim eu expliquei tudo novamente através dos comentários no decorrer das linhas.

Qualquer dúvida poste um comentário ai ou entre em contato comigo através do meu e-mail.

Atenção: Lembrando que é necessário ter três arquivos .mp3 diferentes na mesma pasta que o .swf, para que as músicas sejam executadas.

Os arquivos deverão ter os seguintes nomes:

musica1.mp3
musica2.mp3
musica3.mp3

Bom, galera, é só isso.

Fácil, não?

Garanto que muita gente pensou que era difícil fazer um player com controle de pause, avançar, retroceder e aumentar e diminuir o volume.

Vou ficando por aqui, em breve nos veremos novamente.

Um abraço a todos e um ótimo 2006.

Deus nos abençoe!

Autor: Felipe Gomes

Qualquer dúvida envie um email para contato@felipegomes.com.br ou acesse o fórum.
Felipe Gomes
http://www.felipegomes.com.br