[Resolvido] [Tutorial] Player simples

[Freelife 2]

Bom dia galera...

 

então... eu estive pensando em alguma coisa para contribuir com o fórum, mas não sei praticamente nada de AS, então decidi fazer algo simples pelo menos para dar uma ajuda àqueles que como eu não sabem nada, mas tem muita vontade de aprender...

Decidi fazer esse player simples com alguns botões de ação, carregando músicas por xml.

 

Então vamos ao que interessa.

 

nesse player o palco foi definido em 200px de largura por 20px de altura.

Clique no palco, depois na aba "properties" e em seguida em "size"(se o painel de properties não estiver aparecendo, aperte Ctrl-F3) e dimensione o palco com as medidas mencionadas.

 

Criado o palco, agora vamos criar os botões. Os botões que usei são estes:

nome do botão / instância do botão

prev(prev_btn)

stop(stop_btn)

next(next_btn)

play(play_btn)

mute(mute_btn)

 

Para criar o 1º botão faça o seguinte: (obs.: é importante tentar criar os desenhos como mesmo tamanho para que quando diminuir seu tamanho todos fiquem parecidos)

 

aperte Ctrl-F8, aparecerá a tela "Create New Symbol", no campo "Name:" coloque "stop", no campo "Type:" selecione button e clique em OK.

 

O Flash te levará para a edição do botão. Nessa parte podemos definir os estados do botão.

Como o botão é o stop, então o símbolo dele é um quadrado.

 

Desenhe um quadrado no palco, sem borda e de cor vermelha.

 

Para isso clique na ferramenta "Rectangle Tool". Se o painel de ferramentas estiver escondido aperte Ctrl-F2. A ferramenta rectangle pode não esta visível, pode estar como um círculo ou uma estrela ainda, é só clicar em cima segurar por uns segundos e depois mudar para a ferramenta certa.

 

Para mudar a cor e tirar a borda: depois que clicar na ferramenta rectangle, clique na aba properties, clique sobre o quadrado que tem um lápis do lado e selecione no canto direito superior um quadrado branco com uma linha vermelha(ele tira a borda), em seguida clique no quadrado que tem um balde do lado e selecione a cor vermelha na paleta de cores.

 

Depois que desenhar o quadrado é só clicar nele com o botão direito do mouse e selecionar convert to symbol, coloque o nome de "stopMc" e selecione Movie Clip.

 

Clique com o botão diretiro do mouse sobre o 2º frame do botão e clique em "Insert Keyframe" com isso ele copiará o conteúdo do frame anterior. Repita isso até o 4º frame.

Depois de feito isso, clique no 1º frame, clique no quadrado no palco. Com ele selecionado, clique na aba properties e em "Color:" selecione "alpha" e digite 80% no campo ao lado.

no 2º frame faça a mesmo processo alterando alpha para 100% e no terceiro mude. Ao invés de selecionar "alpha", selecione "Brightness" e coloque em 50%, por fim o último frame não será alterado.

Depois de terminado clique em “Scene 1”.

 

Criamos o botão stop, agora para criar os outros é basicamente a mesma coisa, a diferença é que os outros botões o símbolo não é um quadrado e sim um triângulo, pois são os botões next, prev, play.

 

Para o botão play:

 

Para criar o triângulo é simples, use a ferramenta de linha com a cor vermelha. Depois que você conseguir fechar o triângulo preencha ele com a cor vermelha usando a ferramenta "Paint Bucket Toll". se você desenhou o triângulo e ele não ficou muito legal você pode tentar arrumar usando a ferramenta "Selection Toll", quando você aproxima a ponta da ferramenta do encaixe das linha aparece um sinal +/- assim " __|", ele permite que você arraste a ponta do triângulo para acertar o desenho.

Depois de desenhado é só repetir os passos do botão stop... Convert to symbol... Insert Keyframe... alpha... Brightness.

(detalhe importante, como você desenhou 3 linas e preencheu com uma cor, selecione não só o preenchimento, mas as linhas tbém, depois disso converta para symbol, senão, somente aquele ítem que você clicou é que será convertido.)

quando você converter os desenhos para Movie Clip use o mesmo nome que terá o botão só que adionando Mc no final: exemplo... Name: playMc

 

para o botão next e prev:

 

Usaremos o mesmo botão para os dois, faça o triângulo assim como no botão play, mas adicione uma linha antes dele. Para desenhar a linha, use a ferramenta correta mas coloque o tamanho dela como 4, para alterar isso clique na aba properties e do lado da ferramenta lápis onte têm o número, coloque 4.

Depois disso selecione tudo e converta para symbol, neste caso o "Name:" pode ser só isso ">>". repita os passos... Insert Keyframe... alpha... Brightness.

 

O botão mute:

 

Nesse botão eu fiz o seguinte:

Criei um retângulo com W = 150 e H = 70. Depois de criado, com a ferramenta “Selection Tool” eu diminui a parte de trás do retângulo(é só aproximar a ferramenta das linhas e quando aparecer este sinal “__|” significa que você pode arrastar as linhas para modificar a forma do objeto. Depois que você diminuir a parte de trás ele deverá ficar como um triângulo de ponta quadrada ele deverá ficar +/- assim:

 

Depois usando a mesma ferramenta na linha da frente da figura mude ela de reta para arredondada. É só aproximar a ferramenta e quando aparecer um sinal de ) é só clicar sobre a linha e arrastar.

 

Depois que estiver pronto repita os passos Convert to symbol ... Insert Keyframe... alpha... Brightness.

 

Depois de feito isso, crie um novo movie clip chamado somSymbolMc.

 

No palco desenhe uma linha vertical com H = 70 e de tamanho 4. Para alterar o tamanho é só alterar na aba properties ao lado do lápis. Aproxime a ferramente “Selection Tool” e faça a linha ficar curva para a direita, assim ).

Clique no frame 4 e com o botão direito do mouse selecione “Insert Keyframe”. Copie o desenho do palco e cole à frente da outra linha por eemplo, se a primeira linha está em x = 0, coloque a segunda em x = 15.

Clique no frame 7 e faça a mesma coisa, porém mudando a linha para x = 30.

Agora, clique sobre cada Keyframe e na aba “properties” no item “Tween:” selecione “Shape” em todos, isso fará com que os frames fiquem verdes.

Pronto agora é só voltar a “Scene 1”.

 

Bom agora é só posicionar os botões no palco e instanciálos.(lembre-se que o está entre parênteses é o nome que cada instância)

prev(prev_btn)

stop(stop_btn)

next(next_btn)

play(play_btn)

mute(mute_btn)

somSymbol(somSymbol_mc)

 

(para instanciar o botão, coloque-o no palco, clique sobre ele e na aba "properties" no campo "Instance of:" coloque o nome que está dentro dos parênteses)

 

posicione os botões assim:

 

prev – stop – next – play............................no outro canto: mute – somSymbol

 

Como usaremos o mesmo botão para next e prev basta alterar sua direção. Coloque o primeiro botão no palco e altere a direção dele com a ferramenta “Free Transform Toll” o símbolo que deve aparecer para que você consiga girar ele no palco é um círculo com uma ponta de flecha. É só girar até que ele fique assim: <(prev) e o outro já deve ficar assim: >(next).

 

Depois de feita essa parte use a ferramenta de Texto “Text Tool” para criar um campo de de texto dinâmico “Dynamic

Text” com W = 40 e H = 17. No campo “var” que fica na aba “properties” coloque o nome “numero” e posicione a caixa de texto no espaço entre os botões e o mute

prev – stop – next – play.......cxText.........no outro canto: mute – somSymbol

 

Se você fez os desenhos grandes, quando colocá-los no palco basta alterar sua largura “W” e sua altura “H” para deixar com o mesmo tamanho = 10.

 

Se todos os itens estiverem posicionados mas quando você quiser mexer 1 alterar a posição de todos, basta clicar no palco e depois selecionar só aquele que você quer.

 

Feita essa parte vamos programar. O Código está todo comentado, então... Boa sorte.

 

// Player com 1 frame.
//Aqui iniciamos criando uma variável xml.
lista_xml = new XML();
// ignoramos os espaços em brando.
lista_xml.ignoreWhite = true
// usamos onLoad com função.
lista_xml.onLoad = function(success:Boolean){
//Se o Xml carregar corretamente, mostramos a mensagem e chamamos as funções inicio() e carregar() vistas mais a frente.	
	if(success){
		trace("Xml carregado com sucesso");
		inicio();
		carregar();
	}
//se o Xml não carregar mostramos a mensagem e damos um break.
	else{
		trace("Falha ao carregar xml");
		break;
	}
}
//carregamos o xml.
lista_xml.load("lista.xml");

//declaramos as variáveis que usaremos. declaradas na forma global para podermos facilicar o acesso.(Duvidas sobre esse ítem? Procura por _global no F1 do flash.)
_global.musica = new Sound();
_global.estoque = new Array();
_global.atual = 0;
_global.i = 0;
_global.vol = musica.getVolume();//nessa variável pegamos o volume da música.

//início da função início.
inicio = function(){
// declaramos a _global.len e atribuímos a ela o nó de nosso interesse no xml.
_global.len = lista_xml.firstChild.childNodes;

//criamos um loop para percorrer o xml.
for(i = 0; i < len.length; i++){
//aqui a variável "musicas" recebe o valor do nó xml na forma de string pois é o caminho onde estão as músicas.
	musicas = String(len[i].childNodes);
//Esse trace é para teste
	/*trace(musicas);*/
//aqui armazenamos as músicas no array "estoque".
	estoque.push(musicas);
}
//encerrou o loop
}
//encerrou a função.

//início da função carregar.
carregar = function(){
//usamos onLoad para verificar se a música foi carregada com sucesso.
musica.onLoad = function(success:Boolean){
//se foi carregada...
	if(success){
//então colocamos ela para tocar.
		musica.start();
	}
}
//encerra onLoad.

//usamos onSoundComplete para fazer um loop das músicas quando completadas.
//quando completar a música...
musica.onSoundComplete = function(){
//se a música atual for igual ao total(estoque.length - 1 nos traz o total de ítens).
	if(atual == estoque.length - 1){
//então...
		atual = 0;
	}
//senão... incrementa atual.
	else{
		atual++;
	}
//carregamos a música de número "atual" armazenada no array.
	musica.loadSound(estoque[atual], true);
}
//encerra onSoundComplete.

//carregamos a música de número "atual" armazenada no array.
musica.loadSound(estoque[atual], true);
//trace usado para teste.
/*trace(estoque.length);*/

//aqui mostramos no caixa de texto o total a música atual e o total de músicas.
numero = (atual + 1) + "/" + estoque.length
//usamos (atual +1) pois a atual é iniciada em 0.
//trace para teste.
/*trace(atual + 1);*/
}
//encerrou a função.

//botões
//stop... simples quando soltar pára a reprodução.
stop_btn.onRelease = function(){
	musica.stop();
	somSymbol_mc.gotoAndStop(7);
}

//botão de próxima música. Quando soltar...
next_btn.onRelease = function(){
//verifica se atual é igual ao total de músicas.
	if(atual == estoque.length - 1){
//se for então...
		atual = 0;
//chamamos a função carregar();
		carregar();
	}
//senão..
	else{
//incrementa atual e chama a função carregar.
		atual++;
		carregar();
	}
}

//botão de música anterior. Quando soltar...
prev_btn.onRelease = function(){
//verificar se atual é == 0.
	if(atual == 0){
//se for atual recebe o número correspondente ao total para começar da última.
		atual = estoque.length - 1;
//chamamos a função carregar.
		carregar();
	}
//senão..
	else{
//decrementa atual.
		atual--;
//chama a função carregar.
		carregar();
	}
}

// botão play... ao soltar... tocamos a música.
play_btn.onRelease = function(){
		musica.start();
		somSymbol_mc.gotoAndPlay(1);
}

//botão mute... Quando soltar.
mute_btn.onRelease = function(){
//trace de teste.
/*trace(vol);*/
//se o volume da música for maior que 0...
		if(musica.getVolume() > 0){
//então setamos o volume para 0.
			musica.setVolume(0);
//e tornamos o mc somSymbol_mc invisível.
			somSymbol_mc._visible = false;
		}
//senão...
		else{
//setamos o volume com o volor de vol...(que no caso foi obtido na declaração das variáveis.).
			musica.setVolume(vol);
//e tornamos o mc somSymbol_mc visível.
			somSymbol_mc._visible = true;
		}
}

Coloque algumas músicas dentro da pasta musicas na mesma pasta do .swf e no xml coloque o nome das musicas nessa parte: (quantas você quiser, só copiar o nó.)

<lista>
		<musicas>musicas/nomedasuamusica.mp3</musicas>	
		<musicas>musicas/nomedasuamusica.mp3</musicas>	
		<musicas>musicas/nomedasuamusica.mp3</musicas>	
		<musicas>musicas/nomedasuamusica.mp3</musicas>						
	
</lista>

O link para download dos arquivos é: http://rapidshare.com/files/176068433/Tutorial_Player.rar

 

Obs.: Eu não consigo fazer uma barra de progresso, então se alguém puder contribuir com isso seria legal, uma barra que mostre quanto da música já tocou.

 

vlw...

 

Abraços e boas festas.