Olá Comunidade. Hoje aprenderemos a criar um player de MP3 usando XML para mostrar as músicas e algumas informaçõesPré-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
<?xml version="1.0" encoding="utf-8"?>
<musicas>
<faixa>
<artista>The Beatles</artista>
<musica>musica1.mp3</musica>
<nomeMusica>Can't Buy Me Love</nomeMusica>
<imagemCd>cd1.jpg</imagemCd>
<nomeCd>Beatles 1</nomeCd>
<duracao>2:12</duracao>
</faixa>
<faixa>
<artista>Red Hot Chili Peppers</artista>
<musica>musica2.mp3</musica>
<nomeMusica>Californication</nomeMusica>
<imagemCd>cd2.jpg</imagemCd>
<nomeCd>Californication</nomeCd>
<duracao>5:22</duracao>
</faixa>
<faixa>
<artista>Pearl Jam</artista>
<musica>musica3.mp3</musica>
<nomeMusica>Alive</nomeMusica>
<imagemCd>cd3.jpg</imagemCd>
<nomeCd>Ten</nomeCd>
<duracao>5:41</duracao>
</faixa>
</musicas>
Criando a interface no Flash
Chegou a hora de ir para o Flash. Comecei com um palco com dimenções de 280×400, 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 recebe
Altuda da mascara: passamos a altura da máscara, a mesma altura do MovieClip player
Altura 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 dinamico
loader: MovieClip em branco
musica: Campo de texto dinamico
artista: Campo de texto dinamico
cd: Campo de texto dinamico
duracao: Campo de texto dinamico
tocado: Campo de texto dinamico
barLoad:MovieClip que vai mostrar o progresso da música
preloader: MovieClip que vai mostrar o progresso do carregamento da musica
seta: MovieClip que vai ser usado para aumentar ou diminuir o volume
volumeBar: MovieClip
fundoVolume: 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úsica
prox: Botão responsável para ir para a próxima música
ant: Botão responsável para ir para a música anterior
btMenu: 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:
/* Paramos o filme */
stop();
/* Escondemos o MovieClip player */
player._visible = false;
/* Escondemos o MovieClip scrollBar */
scrollBar._visible = false;
/* Criamos a máscara */
recebe.setMask(mascara);
/* Deixamos o MovieClip barLoad com _xscale igual a 0 */
player.barLoad._xscale = 0;
/* Deixamos o MovieClip preloader com _xscale igual a 0 */
player.preloader._xscale = 0;
/* Criamos uma instancia para a Classe MovieClipLoader */
var carrega:MovieClipLoader = new MovieClipLoader();
/* Criamos um Listener para a Classe MovieClipLoader */
var carregaListener:Object = new Object();
/* Criamos um novo Som */
var som:Sound = new Sound();
/* Variável que armazena o número da música atual */
var musicaAtual:Number = 0;
/* Variável Booleana */
var clicado:Boolean = false;
/* Variável para saber a posição do Som */
var posicao:Number = 0;
/* Criamos uma instancia para a Classe XML */
var dados:XML = new XML();
/* Ignoramos os espaçoes em branco */
dados.ignoreWhite = true;
/* Carregamos o arquivo XML */
dados.load("musicas.xml");
/* Quando carregar do arquivo XML */
dados.onLoad = function(ok) {
/* Se não acontecer erro */
if (ok) {
/* Dizemos qual é o primeiro Node */
xmlNode = this.firstChild;
/* Criamos uma variável para armazenar o total dos itens */
total = xmlNode.childNodes.length;
/* Chamamos a função monta */
monta();
} else {
/* Mostramos a mensagem de erro */
trace("Erro");
}
};
/* Função monta, responsável por mostrar os dados do XML */
function monta() {
/* Para cada item retornado */
for (var i = 0; i<total; i++) {
/* Importamos o MovieClip item */
var mc:MovieClip = recebe.attachMovie("item", "item"+i, recebe.getNextHighestDepth());
/* Posicionamos o MovieClip um abaixo do outro */
mc._y = i*mc._height;
/* Colocamos o nome da música no MovieClip */
mc.campo.text = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
/* Armazenamos o id do MovieClip */
mc.id = i;
/* Ao pressionar no MovieClip */
mc.onPress = function() {
/* Chamamos a função carregaMusica passando a música atual */
carregaMusica(this.id);
/* Mudamos a música atual */
musicaAtual = this.id;
/* Mostramos o MovieClip player */
player._visible = true;
/* Escondemos o MovieClip recebe */
recebe._visible = false;
/* Escondemos o scrollBar */
scrollBar._visible = false;
};
}
/* Verificamos se o MovieClip recebe é maior que o scrollBar */
if (recebe._height>scrollBar._height) {
/* Se for maior, mostramos o scrollBar */
scrollBar._visible = true;
} else {
/* Se for menor, escondemos o scrollBar */
scrollBar._visible = false;
}
}
/* Função carregaMusica, responsável por carregar a música */
function carregaMusica(num:Number):Void {
/* Zeramos o _xscale do MovieClip preloader */
player.preloader._xscale = 0;
/* Zeramos o _xscale do MovieClip barLoad */
player.barLoad._xscale = 0;
/* Criamos um novo Som */
som = new Sound();
/* Carregamos o som usando o parametro num */
/* Usaremos streaming para carregar o som, se preferiri não usar Streaming */
/* troque o parametro true por false */
som.loadSound(xmlNode.childNodes[num].childNodes[1].firstChild.nodeValue, true);
/* Quando a música terminar de tocar */
som.onSoundComplete = function() {
/* Paramos a música */
som.stop();
/* Se musicaAtual for menor que o total */
if (musicaAtual<(total-1)) {
/* Incrementamos musicaAtual */
musicaAtual++;
/* Chamamos a função carregaMusica */
carregaMusica(musicaAtual);
} else {
/* Se não, dizemos que a musicaAtual é a primeira */
musicaAtual = 0;
/* Chamamos a função carregaMusica */
carregaMusica(musicaAtual);}
};
/* Carregamos a capa do CD */
carrega.loadClip(xmlNode.childNodes[num].childNodes[3].firstChild.nodeValue, player.loader);
/* Exibimos a duração da música */
player.duracao.text = xmlNode.childNodes[num].childNodes[5].firstChild.nodeValue;
/* Exibimos o nome da música */
player.musica.text = xmlNode.childNodes[num].childNodes[2].firstChild.nodeValue;
/* Exibimos o nome do artista */
player.artista.text = xmlNode.childNodes[num].childNodes[0].firstChild.nodeValue;
/* Exibimos o nome do CD */
player.cd.text = xmlNode.childNodes[num].childNodes[4].firstChild.nodeValue;
/* Mostrams a musica atual */
player.atual.text = num+1+" de "+total;
/* Chamamos a cada 0.1 segundo a função progresso */
intervalo = setInterval(progresso, 100);
}
/* Ao carregar a imagem */
carregaListener.onLoadInit = function() {
/* Mudamos o valor do MovieClip loader */
player.loader._width = 58;
player.loader._height = 58;
};
/* Adicionamos o listener a instancia do MovieClipLoader */
carrega.addListener(carregaListener);
/* Função responsável por mostrar o progresso do carregamento da música */
function progresso() {
/* Pego o tamanho da música */
soundBytesTotal = som.getBytesTotal();
/* Pego quanto foi carregado */
soundBytesLoaded = som.getBytesLoaded();
/* Vemos quanto foi carregado */
soundLoading = Math.round((soundBytesLoaded/soundBytesTotal)*100);
/* Se a variavel soundLoading for menor ou igual a 99 */
if (soundLoading<=99) {
/* Aumentamos a barra do preloader */
player.preloader._xscale = soundLoading;
} else {
/* Se for maior, escondemos a barra do preloader */
player.preloader._xscale = 0;
}
/* Conforme for tocando a música, aumentamos o barLoad */
player.barLoad._xscale = Math.floor((som.position/som.duration)*soundLoading);
/* Variável que armazena quantos segundos a música já tocou */
segundosTocados = Math.floor((som.position/1000)%60);
/* Se segundosTocados for menor que 10 */
if (segundosTocados<10) {
/* Acrescentamos um 0 */
segundosTocados = "0"+segundosTocados;
}
/* Variável que armazena quantos minutos a música já tocou */
minutosTocados = Math.floor((som.position/1000)/60);
/* Exibimos quanto a música já tocou */
player.tocado.text = minutosTocados+":"+segundosTocados;
}
/* Função responsável por retornar ao player */
function retorna() {
/* Mostramos o MovieClip player */
player._visible = true;
/* Mostramos o MovieClip recebe */
recebe._visible = false;
/* Verificamos se o MovieClip recebe é maior que o scrollBar */
if (recebe._height>scrollBar._height) {
/* Se for maior, mostramos o scrollBar */
scrollBar._visible = true;
} else {
/* Se for menor, escondemos o scrollBar */
scrollBar._visible = false;
}
/* Matamos o intervalo */
clearInterval(volta);
}
/* Ao pressionar do botão seta */
player.seta.onPress = function() {
/* Usamos o onEnterFrame do MovieClip */
this.onEnterFrame = function() {
/* Dizemos qual a posição do MovieClip é aonde o Mouse apontou */
this._x = player._xmouse;
/* Mudamos o tamanho do MovieClip volumeBar */
player.volumeBar._width = player.seta._x-player.fundoVolume._x;
/* Mudamos o volume da música */
som.setVolume(Math.round((player.volumeBar._width*100)/player.fundoVolume._width));
/* Verificamos se a posição do MovieClip seta atingiu o tamanho mínimo */
if (this._x<=player.fundoVolume._x) {
/* Deixamos sempre na posição mínima */
this._x = player.fundoVolume._x;
/* Deixamos com um volume 0 */
som.setVolume(0);
/* Deixamos o MovieClip volumeBar com 1 pixel de largura */
player.volumeBar._width = 1;
}
/* Verificamos se a posição do MovieClip seta atingiu o tamanho máximo */
if (this._x>=(player.fundoVolume._width+player.fundoVolume._x)) {
/* Deixamos sempre na posição máxima */
this._x = player.fundoVolume._width+player.fundoVolume._x;
/* Deixamos o som com volume 100 */
som.setVolume(100);
/* Deixamos o MovieClip volumeBar com o tamanho máximo */
player.volumeBar._width = player.fundoVolume._width;
}
};
};
/* Ao solta do mouse */
player.seta.onRelease = player.seta.onReleaseOutside=function () {
/* Deletamos o onEnterFrame */
delete this.onEnterFrame;
};
/* Ao pressionar do botão btMenu */
btMenu.onPress = function() {
/* Escondemos o MovieClip player */
player._visible = false;
/* Exibimos o MovieClip recebe */
recebe._visible = true;
/* Verificamos se o MovieClip recebe é maior que o scrollBar */
if (recebe._height>scrollBar._height) {
/* Se for maior exibimos o scrollBar */
scrollBar._visible = true;
} else {
/* Se for menor escondemos o scrollBar */
scrollBar._visible = false;
}
/* Criamos um intervalo para chamar a função retorna */
volta = setInterval(retorna, 6000);
};
/* Ao pressionar do botão prox */
prox.onPress = function() {
/* Terminamos o intervalo */
clearInterval(intervalo);
/* Verificamos a variável musicaAtual é menor que o total de itens do XML menos 1 */
if (musicaAtual<(total-1)) {
/* Incrementamos a variavel musicaAtual */
musicaAtual++;
/* Chamamos a função carregaMusica passando a musicaAtual */
carregaMusica(musicaAtual);
} else {
/* Dizemos que a musicaAtual é igual a 0 */
musicaAtual = 0;
/* Chamamos a função carregaMusica */
carregaMusica(musicaAtual);
}
};
/* Ao pressionar do botão ant */
ant.onPress = function() {
/* Terminamos o intervalo */
clearInterval(intervalo);
/* Verificamos se a musicaAtual é maior que 0 */
if (musicaAtual>0) {
/* Decrementamos a variável */
musicaAtual--;
/* Chamamos a função carregaMusica */
carregaMusica(musicaAtual);
} else {
/* Dizemos que a musicaAtual é a última */
musicaAtual = total-1;
/* Chamamos a função carregaMusica */
carregaMusica(musicaAtual);
}
};
/* Ao pressionar do botão playPause */
playPause.onPress = function() {
/* Verificamos se o botão já foi clicado */
if (clicado == false) {
/* Dizemos que o botão foi clicado */
clicado = true;
/* Armazenamos a posição da música */
posicao = som.position/1000;
/* Paramos a música */
som.stop();
/* Vericiamos se o preloader chegou ao final */
if (player.preloader._xscale>=99) {
/* Se chegou terminamos o intervalo */
clearInterval(intervalo);
}
} else {
/* Dizemos que o botão não foi clicado */
clicado = false;
/* Iniciamos a música na posição em que ela parou */
som.start(posicao, 1);
/* Zeramos a variavel posicao */
posicao = 0;
/* Iniciamos o intervalo para chamar a função progresso */
intervalo = setInterval(progresso, 100);
}
};
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://www.natanalves.com
Um abraço a todos e até a próxima.
Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum |
ShareThis
nao to conseguindo colocar esses codigos ai da erro na area de tranferencia… e voce poderia esplicar mais aquela parte do scroll ?! onde coloco os codigos ??
uso o Flash MX pt BR
vlw e otimo tuto…
Will, esse tutorial foi feito aos usuários do Flash MX 2004 e Flash 8 e não para o Flash MX, por isso acontece esses erros.
Natan seguinte cara como eu faço para o mp3 começar como o som no 50 % ? Ele ta começando muito alto cara e quando eu mudo de musica se eu já tiver abaixado o som ele volta pros 100 %, tem como mudar isso?
Amigo, você tem os arquivos de exemplo? Sou novato demais pra fazer algo tão bonito assim! =/
Legal o tutorial, fiz ele mais simplificado, só com os
botões. Só tem uma pequena coisa me atrapalhando, quando executo meu .swf, o som não toca, só depois de clicar no botão next ou o prev é q o som se inicia.
Como devo fazer pro som começar automaticamente ?
Já consegui resolver !!
Brigadão !
Por favor, alguem sabe me ensinar a fazer só UM BOTÃO em Flash que ao clicar comece a tocar uma musica em formato MP3?
Preciso de ajuda. Como faço para a música começar já tocando? automaticamente? Obrigaado!!
Se eu quizesse adaptar algumas coisas nesse projeto para o flash lite 3.0 poderia funcionar… vou testar. Ótimo post!
Ola Natan não a possibilidade de você desponibilizar as imagens para download
Como faço para iniciar tocando a musica?
Cara, acho que ninguém entendeu como fazer o componente no final, esta muito vago, a gente tem que transformar todos objetos em um só MC e depois transformalo em componente???
Eu fiz isso, mas nao deu certo, da um help ai pra gente
E ai galera que ta querendo q começe tocando como eu …. fiz certas modificaçoes no começo da AS e fico assim ::
/*começa a variavel da musica*/
var trilha:Sound = new Sound();
var numero:Number = 1;
var pos, verifica;
function music(musica) {
trilha.loadSound(‘musica’+numero+’.mp3′,true);
playPause.onEnterFrame = function() {
artist_name = trilha.id3.artist;
music_name = trilha.id3.songname;
display = artist_name+” – “+music_name;
display_txt.text = display;
};
trilha.start();
}
Eu uso o flash 8
mais não consigo da o mesmo erro q o do will
Natan,
Parabéns pelo tutorial…
Vê se vc pode me ajudar, montei junto com seu tutorial deu tudo OK…. só uma coisa não esta aparecendo, a parte do menu onde aparece “musicas”, “videos”, etc….. Já criei um xml com nome de videos.xml e coloquei no codigo junto com “musicas.xml. e mesmo assim não aparece. Sabe me dizer como fazer aparecer?
Abraços