Flash - Criando um Player de MP3 usando XML.Olá Comunidade. Hoje aprenderemos a criar um player de MP3 usando XML para mostrar as músicas e algumas informações

Pré-requisitos para esse tutorial

Flash MX 2004 ou Flash 8 Conhecimento com Interação com XML

Criando o arquivo XML

Vamos começar criando nosso arquivo XML. Ele vai ser responsável por armazenar as músicas que iremos carregar no Flash e para guardar algumas informações como o nome do artista, o nome da música duração, imagem do cd, etc. Salve com o nome de musicas.xml

1. <?xml version="1.0" encoding="utf-8"?>2. <musicas>3.    <faixa>4.       <artista>The Beatles</artista>5.       <musica>musica1.mp3</musica>6.       <nomeMusica>Can't Buy Me Love</nomeMusica>7.       <imagemCd>cd1.jpg</imagemCd>8.       <nomeCd>Beatles 1</nomeCd>9.       <duracao>2:12</duracao>10.    </faixa>11.    <faixa>12.       <artista>Red Hot Chili Peppers</artista>13.       <musica>musica2.mp3</musica>14.       <nomeMusica>Californication</nomeMusica>15.       <imagemCd>cd2.jpg</imagemCd>16.       <nomeCd>Californication</nomeCd>17.       <duracao>5:22</duracao>18.    </faixa>19.    <faixa>20.       <artista>Pearl Jam</artista>21.       <musica>musica3.mp3</musica>22.       <nomeMusica>Alive</nomeMusica>23.       <imagemCd>cd3.jpg</imagemCd>24.       <nomeCd>Ten</nomeCd>25.       <duracao>5:41</duracao>26.    </faixa>27. </musicas>

Criando a interface no Flash

Chegou a hora de ir para o Flash. Comecei com um palco com dimenções de 280x400, a disposição das camadas será assim:

Para começar, criaremos um MovieClip chamado item que vai ser responsável por exibir os itens do XML. Esse MovieClip não precisa estar no palco já que ele vai ser chamado pelo ActionScript pelo método attachMovie.

Dentro desse MovieClip criaremos um campo de texto dinamico que vai ser responsável por exibir o nome da música, o nome em vermelho é a instancia do campo.

campo: Campo de texto dinâmico

Criaremos um MovieClip em branco com instancia de recebe. Esse MovieClip vai receber o MovieClip item e por isso deve estar posicionado no palco e na camada Objetos.

Falta ainda criar outro MovieClip, daremos instancia de mascara. Esse MovieClip precisa estar dentro da camada Objetos. Dentro dele você cria um Shape usando a Ferramenta Retangule Toll (R) com a forma em que você deseja que fique o MovieClip esconda.

Mais uma vez, irei usar o ScrollBar criado pelo Hugo, para os que não possuem o Scroll segue o link do tutorial:

ScrollBar para MovieClips e TextFields

Precisamos passar ao ScrollBar quem ele deve mover, o tamanho da barra e o tamanho da mascara:

Alvo: passamos qual MovieClip mover, no caso o MovieClip recebeAltuda da mascara: passamos a altura da máscara, a mesma altura do MovieClip playerAltura da barra: passamos a altura que desejamos para a barra

Agora criaremos a interface de nosso player, criaremos um MovieClip com instancia de player, o MovieClip deve estar na camada player. Os nomes em vermelho são as instancias dos objetos:

atual: Campo de texto dinamicoloader: MovieClip em brancomusica: Campo de texto dinamicoartista: Campo de texto dinamicocd: Campo de texto dinamicoduracao: Campo de texto dinamicotocado: Campo de texto dinamico

barLoad:MovieClip que vai mostrar o progresso da músicapreloader: MovieClip que vai mostrar o progresso do carregamento da musicaseta: MovieClip que vai ser usado para aumentar ou diminuir o volumevolumeBar: MovieClipfundoVolume: MovieClip

Agora só falta criar os botões de play/pause, stop e de proximo e anterior. Todos esses botões estarão na camada Objetos.

playPause: Botão responsável por pausar ou dar play na músicaprox: Botão responsável para ir para a próxima músicaant: Botão responsável para ir para a música anteriorbtMenu: Botão responsável por voltar ao menu das músicas

Com os MovieClips e botões criados, instanciados e posicionados iremos ao ActionScript. Coloquem isso no primeiro frame na camada Actions:

1. /* Paramos o filme */2. stop();3. /* Escondemos o MovieClip player */4. player._visible = false;5. /* Escondemos o MovieClip scrollBar */6. scrollBar._visible = false;7. /* Criamos a máscara */8. recebe.setMask(mascara);9. /* Deixamos o MovieClip barLoad com _xscale igual a 0 */10. player.barLoad._xscale = 0;11. /* Deixamos o MovieClip preloader com _xscale igual a 0 */12. player.preloader._xscale = 0;13. /* Criamos uma instancia para a Classe MovieClipLoader */14. var carrega:MovieClipLoader = new MovieClipLoader();15. /* Criamos um Listener para a Classe MovieClipLoader */16. var carregaListener:Object = new Object();17. /* Criamos um novo Som */18. var som:Sound = new Sound();19. /* Variável que armazena o número da música atual */

20. var musicaAtual:Number = 0;21. /* Variável Booleana */22. var clicado:Boolean = false;23. /* Variável para saber a posição do Som */24. var posicao:Number = 0;25. /* Criamos uma instancia para a Classe XML */26. var dados:XML = new XML();27. /* Ignoramos os espaçoes em branco */28. dados.ignoreWhite = true;29. /* Carregamos o arquivo XML */30. dados.load("musicas.xml");31. /* Quando carregar do arquivo XML */32. dados.onLoad = function(ok) {33.    /* Se não acontecer erro */34.    if (ok) {35.       /* Dizemos qual é o primeiro Node */36.       xmlNode = this.firstChild;37.       /* Criamos uma variável para armazenar o total dos itens */38.       total = xmlNode.childNodes.length;39.       /* Chamamos a função monta */40.       monta();41.    } else {42.       /* Mostramos a mensagem de erro */43.       trace("Erro");44.    }45. };46. /* Função monta, responsável por mostrar os dados do XML */47. function monta() {48.    /* Para cada item retornado */49.    for (var i = 0; i<total; i++) {50.       /* Importamos o MovieClip item */51.       var mc:MovieClip = recebe.attachMovie("item", "item"+i,

recebe.getNextHighestDepth());52.       /* Posicionamos o MovieClip um abaixo do outro */53.       mc._y = i*mc._height;54.       /* Colocamos o nome da música no MovieClip */55.       mc.campo.text = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;56.       /* Armazenamos o id do MovieClip */57.       mc.id = i;58.       /* Ao pressionar no MovieClip */59.       mc.onPress = function() {60.          /* Chamamos a função carregaMusica passando a música atual */61.          carregaMusica(this.id);62.          /* Mudamos a música atual */63.          musicaAtual = this.id;64.          /* Mostramos o MovieClip player */65.          player._visible = true;

66.          /* Escondemos o MovieClip recebe */67.          recebe._visible = false;68.          /* Escondemos o scrollBar */69.          scrollBar._visible = false;70.       };71.    }72.    /* Verificamos se o MovieClip recebe é maior que o scrollBar */73.    if (recebe._height>scrollBar._height) {74.       /* Se for maior, mostramos o scrollBar */75.       scrollBar._visible = true;76.    } else {77.       /* Se for menor, escondemos o scrollBar */78.       scrollBar._visible = false;79.    }80. }81. /* Função carregaMusica, responsável por carregar a música */82. function carregaMusica(num:Number):Void {83.    /* Zeramos o _xscale do MovieClip preloader */84.    player.preloader._xscale = 0;85.    /* Zeramos o _xscale do MovieClip barLoad */86.    player.barLoad._xscale = 0;87.    /* Criamos um novo Som */88.    som = new Sound();89.    /* Carregamos o som usando o parametro num */90.    /* Usaremos streaming para carregar o som, se preferiri não usar Streaming */91.    /* troque o parametro true por false */92.    som.loadSound(xmlNode.childNodes[num].childNodes[1].firstChild.nodeValue,

true);93.    /* Quando a música terminar de tocar */94.    som.onSoundComplete = function() {95.       /* Paramos a música */96.       som.stop();97.       /* Se musicaAtual for menor que o total */98.       if (musicaAtual<(total-1)) {99.          /* Incrementamos musicaAtual */100.          musicaAtual++;101.          /* Chamamos a função carregaMusica */102.          carregaMusica(musicaAtual);103.       } else {104.          /* Se não, dizemos que a musicaAtual é a primeira */105.          musicaAtual = 0;106.          /* Chamamos a função carregaMusica */107.       carregaMusica(musicaAtual);}108.    };109.    /* Carregamos a capa do CD */110.    carrega.loadClip(xmlNode.childNodes[num].childNodes[3].firstChild.nod

eValue, player.loader);

111.    /* Exibimos a duração da música */112.    player.duracao.text =

xmlNode.childNodes[num].childNodes[5].firstChild.nodeValue;113.    /* Exibimos o nome da música */114.    player.musica.text =

xmlNode.childNodes[num].childNodes[2].firstChild.nodeValue;115.    /* Exibimos o nome do artista */116.    player.artista.text =

xmlNode.childNodes[num].childNodes[0].firstChild.nodeValue;117.    /* Exibimos o nome do CD */118.    player.cd.text =

xmlNode.childNodes[num].childNodes[4].firstChild.nodeValue;119.    /* Mostrams a musica atual */120.    player.atual.text = num+1+" de "+total;121.    /* Chamamos a cada 0.1 segundo a função progresso */122.    intervalo = setInterval(progresso, 100);123. }124. /* Ao carregar a imagem */125. carregaListener.onLoadInit = function() {126.    /* Mudamos o valor do MovieClip loader */127.    player.loader._width = 58;128.    player.loader._height = 58;129. };130. /* Adicionamos o listener a instancia do MovieClipLoader */131. carrega.addListener(carregaListener);132. /* Função responsável por mostrar o progresso do carregamento da música

*/133. function progresso() {134.    /* Pego o tamanho da música */135.    soundBytesTotal = som.getBytesTotal();136.    /* Pego quanto foi carregado */137.    soundBytesLoaded = som.getBytesLoaded();138.    /* Vemos quanto foi carregado */139.    soundLoading = Math.round((soundBytesLoaded/soundBytesTotal)*100);140.    /* Se a variavel soundLoading for menor ou igual a 99 */141.    if (soundLoading<=99) {142.       /* Aumentamos a barra do preloader */143.       player.preloader._xscale = soundLoading;144.    } else {145.       /* Se for maior, escondemos a barra do preloader */146.       player.preloader._xscale = 0;147.    }148.    /* Conforme for tocando a música, aumentamos o barLoad */149.    player.barLoad._xscale =

Math.floor((som.position/som.duration)*soundLoading);150.    /* Variável que armazena quantos segundos a música já tocou */151.    segundosTocados = Math.floor((som.position/1000)%60);

152.    /* Se segundosTocados for menor que 10 */153.    if (segundosTocados<10) {154.       /* Acrescentamos um 0 */155.       segundosTocados = "0"+segundosTocados;156.    }157.    /* Variável que armazena quantos minutos a música já tocou */158.    minutosTocados = Math.floor((som.position/1000)/60);159.    /* Exibimos quanto a música já tocou */160.    player.tocado.text = minutosTocados+":"+segundosTocados;161. }162. /* Função responsável por retornar ao player */163. function retorna() {164.    /* Mostramos o MovieClip player */165.    player._visible = true;166.    /* Mostramos o MovieClip recebe */167.    recebe._visible = false;168.    /* Verificamos se o MovieClip recebe é maior que o scrollBar */169.    if (recebe._height>scrollBar._height) {170.       /* Se for maior, mostramos o scrollBar */171.       scrollBar._visible = true;172.    } else {173.       /* Se for menor, escondemos o scrollBar */174.       scrollBar._visible = false;175.    }176.    /* Matamos o intervalo */177.    clearInterval(volta);178. }179. /* Ao pressionar do botão seta */180. player.seta.onPress = function() {181.    /* Usamos o onEnterFrame do MovieClip */182.    this.onEnterFrame = function() {183.       /* Dizemos qual a posição do MovieClip é aonde o Mouse apontou */184.       this._x = player._xmouse;185.       /* Mudamos o tamanho do MovieClip volumeBar */186.       player.volumeBar._width = player.seta._x-player.fundoVolume._x;187.       /* Mudamos o volume da música */188.       som.setVolume(Math.round((player.volumeBar._width*100)/

player.fundoVolume._width));189.       /* Verificamos se a posição do MovieClip seta atingiu o tamanho

mínimo */190.       if (this._x<=player.fundoVolume._x) {191.          /* Deixamos sempre na posição mínima */192.          this._x = player.fundoVolume._x;193.          /* Deixamos com um volume 0 */194.          som.setVolume(0);195.          /* Deixamos o MovieClip volumeBar com 1 pixel de largura */196.          player.volumeBar._width = 1;

197.       }198.       /* Verificamos se a posição do MovieClip seta atingiu o tamanho

máximo */199.       if (this._x>=(player.fundoVolume._width+player.fundoVolume._x)) {200.          /* Deixamos sempre na posição máxima */201.          this._x = player.fundoVolume._width+player.fundoVolume._x;202.          /* Deixamos o som com volume 100 */203.          som.setVolume(100);204.          /* Deixamos o MovieClip volumeBar com o tamanho máximo */205.          player.volumeBar._width = player.fundoVolume._width;206.       }207.    };208. };209. /* Ao solta do mouse */210. player.seta.onRelease = player.seta.onReleaseOutside=function () {211.    /* Deletamos o onEnterFrame */212.    delete this.onEnterFrame;213. };214. /* Ao pressionar do botão btMenu */215. btMenu.onPress = function() {216.    /* Escondemos o MovieClip player */217.    player._visible = false;218.    /* Exibimos o MovieClip recebe */219.    recebe._visible = true;220.    /* Verificamos se o MovieClip recebe é maior que o scrollBar */221.    if (recebe._height>scrollBar._height) {222.       /* Se for maior exibimos o scrollBar */223.       scrollBar._visible = true;224.    } else {225.       /* Se for menor escondemos o scrollBar */226.       scrollBar._visible = false;227.    }228.    /* Criamos um intervalo para chamar a função retorna */229.    volta = setInterval(retorna, 6000);230. };231. /* Ao pressionar do botão prox */232. prox.onPress = function() {233.    /* Terminamos o intervalo */234.    clearInterval(intervalo);235.    /* Verificamos a variável musicaAtual é menor que o total de itens do

XML menos 1 */236.    if (musicaAtual<(total-1)) {237.       /* Incrementamos a variavel musicaAtual */238.       musicaAtual++;239.       /* Chamamos a função carregaMusica passando a musicaAtual */240.       carregaMusica(musicaAtual);241.    } else {

242.       /* Dizemos que a musicaAtual é igual a 0 */243.       musicaAtual = 0;244.       /* Chamamos a função carregaMusica */245.       carregaMusica(musicaAtual);246.    }247. };248. /* Ao pressionar do botão ant */249. ant.onPress = function() {250.    /* Terminamos o intervalo */251.    clearInterval(intervalo);252.    /* Verificamos se a musicaAtual é maior que 0 */253.    if (musicaAtual>0) {254.       /* Decrementamos a variável */255.       musicaAtual--;256.       /* Chamamos a função carregaMusica */257.       carregaMusica(musicaAtual);258.    } else {259.       /* Dizemos que a musicaAtual é a última */260.       musicaAtual = total-1;261.       /* Chamamos a função carregaMusica */262.       carregaMusica(musicaAtual);263.    }264. };265. /* Ao pressionar do botão playPause */266. playPause.onPress = function() {267.    /* Verificamos se o botão já foi clicado */268.    if (clicado == false) {269.       /* Dizemos que o botão foi clicado */270.       clicado = true;271.       /* Armazenamos a posição da música */272.       posicao = som.position/1000;273.       /* Paramos a música */274.       som.stop();275.       /* Vericiamos se o preloader chegou ao final */276.       if (player.preloader._xscale>=99) {277.          /* Se chegou terminamos o intervalo */278.          clearInterval(intervalo);279.       }280.    } else {281.       /* Dizemos que o botão não foi clicado */282.       clicado = false;283.       /* Iniciamos a música na posição em que ela parou */284.       som.start(posicao, 1);285.       /* Zeramos a variavel posicao */286.       posicao = 0;287.       /* Iniciamos o intervalo para chamar a função progresso */288.       intervalo = setInterval(progresso, 100);

289.    }290. };

Aqui um exemplo do Player Funcionando

Considerações Finais

Hoje vimos como criar um player de MP3 usando XML. Vimos que usando a Classe Sound é fácil carregar um arquivo MP3 e ter controle dele, infelizmente essa Classe a função duration não funciona adequadamente quando se utiliza Streaming. A função nos retorna a duração da música em milisegundos, evitando ter que escrever no XML a duração da música.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://natan.atspace.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves - Moderador do Fórum de Flash & ActionSctipt MXSTUDIO