Quarta-feira, 04 de abril de 2007 às 00h15

Classe Sound (Detalhada)

Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Olá Pessoal! Nessa minha segunda matéria no iMasters vamos falar de um assunto muito interessante. Trata-se da classe Sound, para podermos adicionar e controlar um som no nosso filme Flash. Neste artigo vou mostrar-lhes detalhadamente como funcionam alguns métodos da classe e criaremos um simples player de MP3. Então vamos conhecer os métodos dos quais falaremos a respeito.

Sound.attachSound(seu_som); Anexa o som especificado nos parênteses. O som deve estar na biblioteca e com um linkage.

Sound.getBytesLoaded(); Retorna o número de bytes carregados.

Sound.getBytesTotal(); Retorna o número de bytes no total.

Sound.setPan(valor); Define a distribuição direita/esquerda do som. Os valores vão de 100 a -100 onde 100 é usado para que o som saia na direita e -100 para que o som saia na esquerda, use 0 para que o som fique distribuído igualmente em ambos os lados.

Sound.getPan(); Retorna o nível de pan definido na última chamada setPan.

Sound.setVolume(valor); Define o nível de volume do som que vai de 0 a 100.

Sound.getVolume(); Retorna o nível de volume do som.

Sound.loadSound(url, streaming); Url é o local onde se encontra o som . mp3 a ser carregado. Streaming é um valor booleano (true/false), caso seja true o som será tocado enquanto vai sendo carregado, o Flash o armazena em buffer, se for false o Flash carrega todo o som e só depois o reproduz.

Sound.start(deslocamento em segundos, loops);

Deslocamento em segundos permite reproduzir um som de um ponto específico. Ex.: Se temos um som de 1:00 e queremos iniciá-lo a partir dos 30 segundos basta escrevermos Sound.start(30,loops);

Loops é o número de vezes que o som deve ser reproduzido consecutivamente.

Ex.: Sound.start(30,9999);

Ambos os parâmetros são opcionais.

Vale lembrar que no caso do som estar sendo carregado por streaming os loops não funcionam como deveriam, mas isso é algo fácil de se resolver e nós veremos mais a frente.

Sound.stop(); Para o som especificado ou todos os sons que estiverem sendo reproduzidos no momento.

Propriedade / Descrição

Sound.duration(); Somente leitura. Retorna a duração de um som em milisegundos.

Sound.position(); Somente leitura. Retorna a posição do som em milisegundos.

Eventos / Descrição

Sound.onSoundComplete Evento chamado automaticamente quando a reprodução do som é concluída.

Sound.onLoad Evento chamado automaticamente quando o som é carregado.

Gostaria de lembrar que não mencionei todos os métodos, propriedades e eventos da classe Sound. Os demais deixarei para uma próxima oportunidade.

Agora que conhecemos a classe Sound podemos trabalhar um pouco com seus métodos. Abaixo um exemplo do player que vamos criar agora. Não coloquei nenhum som nele pois iria demorar para carregar.

Abra o painel de ações e escreva na primeira frame:

[cor1]//Criando o objeto som[/cor1]
som = new Sound();
[cor1]//Carregando o som[/cor1]
som.loadSound("arquivo.mp3", false)
[cor1]//aqui carregamos o som arquivo.mp3 que está na mesma pasta que o nosso filme. Como você deve ter //percebido o segundo parâmetro está false, ou seja, não estamos usando o streaming.[/cor1]
som.stop();
[cor1]//aqui definimos que o som deve ficar parado, mas se você deseja que ele se inicialize sozinho, basta //alterar esta parte por som.start(0,1);[/cor1]

Se você rodar o seu filme Flash verá que o som será tocado, mas ainda não podemos comandá-lo.

Crie 3 botões (Play, Stop e Pause).

Play - vai iniciar o nosso som quando clicado.

Stop - vai parar o nosso som quando clicado.

Pause - vai pausar o nosso som quando clicado.

Agora vamos criar as ações nos botões. Selecione o botão Pause, abra o painel de ações e coloque o seguinte:

on(release) {  [cor1] //Quando realizado[/cor1]
som.pausa = som.position/1000;  
[cor1]//O som.pausa pega a posição atual do som. Dividimos por 1000 pois a posição está em milisegundos //mas precisamos dela em segundos. [/cor1]
som.stop();    [cor1]//Paramos a reprodução.[/cor1]
}

Agora, selecione o botão Play e, no painel de ações, coloque o seguinte:

on (release) {     [cor1]//Quando realizado[/cor1]
if (som.pausa != null) {    [cor1]// Damos uma condição: Se som.pausa for diferente (!) de nulo (0)[/cor1]
som.start(som.pausa, 0);
[cor1]//Veja que o parâmetro Deslocamento em segundos se encontra som.pausa, ou seja, o ponto atual da //reprodução do som. Isso faz com que o som seja continuado a partir do ponto de onde demos Pausa.[/cor1]
} else {  [cor1] //Caso o contrário[/cor1]
som.start(0, 1);  [cor1] //Inicia o som com 0 de deslocamento e 1 loop.[/cor1]
}
} 

Feito isso, vamos ao botão Stop. Portanto selecione-o e abra o painel de ações:

on (release) { [cor1]  //Quando realizado[/cor1]
som.stop();   [cor1] //Paramos a reprodução do som[/cor1]
som.pausa = 0;
[cor1]//Definimos o valor de som.pausa como 0. O motivo é bem simples, se não fizermos isso, quando //clicarmos no botão Pause, o botão Stop perde sua funcionalidade pois ele vai pausar a música e não //parar.[/cor1]
}

Bom, agora podemos controlar o som de certa forma. Mas seria bom se pudéssemos controlar o volume e o balanço, e quem sabe até mostrarmos o transcorrer da música.

Mãos à obra. Em uma nova camada, vamos criar dois campos de texto dinâmicos. O primeiro terá instância "vol_t" (sem aspas) e será o responsável em mostrar o nível de volume para nós. Ao lado do campo "vol_t" crie mais dois botões "" e "-" (sem aspas). Faço o mesmo para o balanço mas coloque a instância do campo de "bal_t" (sem aspas).

Vá novamente na primeira frame onde no começo colocamos as ações iniciais e adicione o seguinte:

[cor1]//Criamos as variáveis com os valores de volume e balanço[/cor1]
var vol = 100;   [cor1]//O valor inicial do volume será 100, ou seja, o máximo.[/cor1]
var bal = 0;    [cor1]//O valor inicial do balanço será 0, ou seja, o som será distribuído em[/cor1]
[cor1]//ambas as caixas de som.[/cor1]
_root.onEnterFrame = function() {  [cor1] //Usamos o evento EnterFrame para que os[/cor1]
[cor1]//valores sempre se atualizem[/cor1]
som.setVolume(vol);    [cor1]//Definimos o volume do som, o valor do volume está na[/cor1]
[cor1]//variável vol.[/cor1]
vol_t.text = vol;  [cor1]  //Aqui mostramos o valor de vol no campo de texto vol_t[/cor1]
som.setPan(bal);       [cor1] //Definimos o balanço do som, o valor do balanço está na[/cor1]
[cor1]// variável bal.[/cor1]
bal_t.text = bal;   [cor1] //Aqui mostramos o valor de bal no campo de texto bal_t[/cor1]
};  

Agora só está faltando a nossa barra que indicará o transcorrer da música. Para isso, crie em uma nova camada uma barra de tamanho x = 100. Transforme-a em um MC e a instancie de "duracao" (sem aspas). Para que possamos redimensionar a barra sem que mudemos o seu valor (x = 100), selecione o MC e aperte F8 para criarmos mais um objeto do tipo MC com nome e instância de "barra_d" (sem aspas).

Na primeira frame, vamos inserir mais um código.

Logo abaixo da linha bal_t.text = bal; coloque:

barra_d.duracao._xscale = som.position/som.duration*100;
[cor1]//A escala de x da barra vai conforme o tempo que a música toca. Usamos o som.position dividido pelo //som.duration para definir o tempo que se transcorreu a música.[/cor1]

O código completo fica assim:

[cor1]//Criando o objeto som[/cor1]
som = new Sound();
[cor1]//Carregando o som[/cor1]
som.loadSound("arquivo.mp3", false)
[cor1]//aqui carregamos o som arquivo.mp3 que está na mesma pasta que o nosso filme. Como você deve ter //percebido o segundo parâmetro está false, ou seja, não estamos usando o streaming.[/cor1]
som.stop();
[cor1]//aqui definimos que o som deve ficar parado, mas se você deseja que ele se inicialize sozinho, basta //alterar esta parte por som.start(0,1);[/cor1]

[cor1]//Criamos as variáveis com os valores de volume e balanço[/cor1]
var vol = 100;   [cor1]//O valor inicial do volume será 100, ou seja, o máximo.[/cor1]
var bal = 0;     [cor1]  //O valor inicial do balanço será 0, ou seja, o som será distribuído em[/cor1]
[cor1]//ambas as caixas de som.[/cor1]
_root.onEnterFrame = function() {   [cor1] //Usamos o evento EnterFrame para que os[/cor1]
[cor1]//valores sempre se atualizem[/cor1]
[cor1]som.setVolume(vol);   [cor1] //Definimos o volume do som, o valor do volume está na[/cor1]
//variável vol.[/cor1]
vol_t.text = vol;    [cor1]//Aqui mostramos o valor de vol no campo de texto vol_t[/cor1]
[cor1]som.setPan(bal);   [cor1] //Definimos o balanço do som, o valor do balanço está na[/cor1]
// variável bal.[/cor1]
bal_t.text = bal;   [cor1]  //Aqui mostramos o valor de bal no campo de texto bal_t[/cor1]
barra_d.duracao._xscale = som.position/som.duration*100;
[cor1]// A escala de x da barra vai conforme o tempo que a música toca. Usamos o som.position dividido pelo //som.duration para definir o tempo que se transcorreu a música.[/cor1]
};

Como você viu, os valores de loop que definimos para som.start foram 1. Isso que dizer que a música se repetirá somente 1 vez. Se desejar que ela toque sempre, defina o valor como 9999, é o máximo permitido. Caso esteja carregando a música por streaming, para que ela se repita teremos de usar o evento som.onSoundComplete. O código com o streaming ficaria assim:

[cor1]//Criando o objeto som[/cor1]
som = new Sound();
[cor1]//Carregando o som[/cor1]
som.loadSound("arquivo.mp3", true)
[cor1]//aqui carregamos o som arquivo.mp3 que está na mesma pasta que o nosso filme. Agora estamos //usando o streaming.[/cor1]
som.stop();
[cor1]//aqui definimos que o som deve ficar parado, mas se você deseja que ele se inicialize sozinho, basta //alterar esta parte por som.start(0,1);[/cor1]

[cor1]//Criamos as variáveis com os valores de volume e balanço[/cor1]
var vol = 100;  [cor1]//O valor inicial do volume será 100, ou seja, o máximo.[/cor1]
var bal = 0;    [cor1]//O valor inicial do balanço será 0, ou seja, o som será distribuído em[/cor1]
[cor1]//ambas as caixas de som.[/cor1]
_root.onEnterFrame = function() {   [cor1] //Usamos o evento EnterFrame para que os[/cor1]
[cor1]//valores sempre se atualizem[/cor1]
som.setVolume(vol);   [cor1]//Definimos o volume do som, o valor do volume está na[/cor1]
[cor1]//variável vol.[/cor1]
vol_t.text = vol;   [cor1]//Aqui mostramos o valor de vol no campo de texto vol_t[/cor1]
som.setPan(bal);    [cor1]//Definimos o balanço do som, o valor do balanço está n[/cor1]a
[cor1]// variável bal.[/cor1]
bal_t.text = bal;   [cor1]//Aqui mostramos o valor de bal no campo de texto bal_t[/cor1]
barra_d.duracao._xscale = som.position/som.duration*100;
[cor1]// A escala de x da barra vai conforme o tempo que a música toca. Usamos o som.position dividido pelo //som.duration para definir o tempo que se transcorreu a música.[/cor1]
som.onSoundComplete = function(){   
[cor1]//Usamos o evento onSoundComplete para que quando o som chegue ao fim, se execute a função que fará //a música tocar novamente, desta forma temos um loop infinito.[/cor1]
this.start(0,1);
}
};

Bom, é isso. Espero que tenham aproveitado e aprendido bastante com esta pequena explicação sobre a classe Sound. Abraços a todos do iMasters! Dúvidas, me contatem.

8 comentários

 Welinton Batista do Prado
04/04/2007 04h44

Otima Materia

Julio,

Gostei muito desta materia, muito didatica, acho que o principio para um bom aprendizado sao os detalhes, e voce foi bem detalhista. Consegui assimilar tudo... parabens ... continue contribuindo para nosso conhecimento...

Sds.: Welinton

 daniel mariz
04/04/2007 10h19

Bacana

Muito bacana a matéria espero que ela tenha continuidade para que possa mostrar todas as propriedades do mp3 com título|autor|album| enfim essas descrições q podemos inserir no mp3.

 Gustavo Andrade
04/04/2007 14h27

Legal, mas tenho uma dúvida!

Conheço pouco de Flash, e gostaria de saber se esse script de player mp3 é capaz de reproduzir o formato .ogg (aufio).

 Eliane Capra
10/04/2007 07h56

Muito bom...

O artigo é simples, porém objetivo. Parabéns!

 Edgar Kaiser
18/04/2007 08h44

SHow...

Cara, obrigado pela matéria, gostaria que se possível em oportunidades futuras, falasse um pouco Sobre o soundBufTime

Até

 Victor Passarelli
20/08/2007 18h45

Bem explicado, mas tenho duvidas!

o meu deu certo na parte do som, mas o controle de balanço e volume, nao alteram! :S
e a barra tambem nao funcionou! nao sei o que fiz errado!
se responder agradeço muito!
Obrigado.

 Everton Eduardo Vilela
20/09/2007 07h05

bom,

Link para o arquivo da matéria
http://www.flashmasters.com.br/tutoriais/avancado/sound/zip/player.zip

so poderia fazer uma segunda matéria agora continuando dessa, implementando xml funções como evitar que o play seja apertado mais de uma vez e rode a musica varias vezes. da para montar uma saga com essa matéria.....

flws;;;

 Laybows S.
21/09/2007 11h19

Equalizador Paramétrico

Olá alguém sabe como controlar com sliders o agudo, medio e grave de um som no flash? Por favor entre em contato: laybows@rockachu.net

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Patrocínio:
Sobre o Autor
Julio Henrique é estudante de Administração e Desenvolvimento para Internet na FIAP. Trabalha com Flash desde 2004, realizando diversos projetos com ActionScript 2.0

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.