Erick Souza

Para manipularmos MP3s no Flash, utilizaremos a classe Sound. Para iniciar, deve-se criar um objeto Sound, e desta forma poderemos utilizar os seus métodos, propriedades e eventos.

var meuSom:Sound = new Sound();

Os métodos disponíveis na classe Sound

• attachSound(): chama um arquivo de áudio da biblioteca, através do parâmetro id (identifier), e o une ao objeto Sound.
• getBytesLoaded(): retorna o número de bytes carregados do objeto Sound específicado.
• getBytesTotal(): retorna o número em bytes total do objeto Sound especificado.
• getPan(): retorna o último valor setado pelo método setpan(), que é de -100 a +100.
• getTransform(): retorna o último valor da chamada setTransform().
• getVolume(): retorna o volume do som de 0 a 100.
• loadSound(): carrega um arquivo MP3 no objeto Sound.
• setPan(): determina o balanço do som da direita para a esquerda.
• setTransform(): define as opções de transformação do som. Pode-se usá-lo para reproduzir o som de mono como estéreo, e estéreo como mono, além de adicionar alguns efeitos.
• setVolume(): ajusta o volume do som.
• start(): inicia o som, pode-se iniciar do início ou através do parâmetro secondOffset é possível especificar o ponto onde deve começar.
• stop(): para todos os sons em execução, ou especifique o som a ser parado através do parâmetro idName.

Eventos

• onID3: invocado quando novos dados ID3 de um arquivo MP3 estão disponíveis.
• onLoad: invocado quando o som é carregado.
• onSoundComplete: invocado quando o som chega ao fim.

Propriedades

• duration: retorna em milissegundos a duração total do som.
• id3: fornece o acesso aos metadados, parte de um arquivo MP3.
• position: retorna em milissegundos a posição atual do som.

Chamando um arquivo de som da biblioteca

Após importar (CTRL+R) um arquivo de áudio para o Flash, é necessário o instanciar para poder chamá-lo via actionscript, abra a biblioteca (F11), clique com o botão direito do mouse sobre o arquivo na biclioteca e selecione a opção “Linkage…”, marque a caixa “Export for Actionscript” e “Export in first frame”, e em “Identifier” coloque libSound.

No código abaixo foi utilizado o método attachSound() para anexar o som ao objeto Sound.

var meuSom:Sound = new Sound();
meuSom.attachSound("libSound");

Chamando um arquivo de som externo

Através do método loadSound(), é carregado um arquivo de som externo, o segundo parâmetro, um valor boolean, indica se o áudio é streaming ou não. Setado como true, o áudio é executado enquanto este é baixado, como false, o som é iniciado apenas quando o áudio for carregado completamente.

var meuSom:Sound = new Sound();
meuSom.loadSound("som.mp3", false);

Exibindo o status de carregamento de um arquivo MP3

Para exibir o status da porcentagem do carregamento de um arquivo MP3, utilizaremos os métodos getBytesLoaded() e getBytesTotal(), e o evento onLoad.

Para testar o código abaixo, crie uma barra, dimensões de 200×5, converta-a em um movieClip e a alinhe a esquerda, a instância desta barra deve ser barraCarregados. Crie também uma caixa de texto dinâmica de instância de caixaCarregados.

function carregarSom(){
	var carregado:Number = meuSom.getBytesLoaded();
	var total:Number = meuSom.getBytesTotal();
	var porcent:Number = Math.floor((carregado/total)*100);
	barraCarregados._xscale = porcent;
	caixaCarregados.text = porcent + " %";
}
interval = setInterval(carregarSom, 100);
meuSom.onLoad = function(){clearInterval(interval);}

No código acima, primeiramente foram criadas duas variáveis, carregado e total, para armazenarem respectivamente o valor carregado e o total do arquivo. A variável porcent, responsável por armazenar a porcentagem carregada, o valor carregado dividido pelo valor total, multiplicado por 100, para obtermos uma escala de 0 a 100, para que fosse exibido valores inteiros, foi utilizado o método floor, da classe Math. Os valores da variável porcent foram atribuídos a escala da barra, e adicionados a caixa de texto dinâmica.

Todo o código está inserido na função carregarSom, para que desta forma, pudéssemos verificar e atualizar os valores a cada um décimo de segundo, por meio da função setInterval(). Foi utilizado também o evento onLoad, para que assim que o carregamento se conclua, o setInterval() seja finalizado.

Para testar pressione as teclas “CTRL + Enter”, no menu “View > Download Setting”, selecione a velocidade da conexão e em seguida, menu “View > Simulate Download”.

Botões Stop, Play e Pause

Crie três botões no palco e os instancie de btnStop, btnPlay e btnPause.

var meuSom:Sound = new Sound();
meuSom.attachSound("libSound");
btnStop.onRelease = function(){meuSom.stop();}
btnPlay.onRelease = function(){meuSom.start();}

No código acima foi utilizado os métodos stop() para parar o áudio, e o método start() para iniciar o áudio.

Para criar o botão para pausar o som, a classe Sound não dispõe de um método do tipo “pause”, portanto para se pausar um arquivo de áudio, é necessário resgatar o valor da posição atual do som e armazená-la em uma variável, quando o botão play for acionado, é feita uma verificação para definir se o áudio começará do início ou da posição em que foi pausado.

Para resgatar o valor da posição atual do áudio antes que este seja parado, utilizaremos a propriedade position, que retorna o valor em milissegundos da posição atual do áudio.

var meuSom:Sound = new Sound();
meuSom.attachSound("libSound");
btnStop.onRelease = function(){
	valorPause = 0;
	meuSom.stop();
	}
btnPlay.onRelease = function(){
	if(valorPause != null){meuSom.start(valorPause);}
	else{meuSom.start();}
	}
btnPause.onRelease = function(){
	valorPause = meuSom.position/1000;
	meuSom.stop();
	}

No código do botão pause, quando este for acionado, é criada a variável valorPause, responsável por armazenar a posição em que o som foi pausado, através da propriedade position, além disso o valor foi dividido por 1000, porque o valor vem em milissegundos e precisa-se do valor em segundos.

No botão play foi necessário adicionar uma estrutura condicional para verificar se a variável valorPause é diferente de zero (nulo), para que o som continue de onde foi pausado, caso contrário o áudio é iniciado.

No botão stop foi necessário adicionar uma linha de código, para que caso o botão stop fosse pressionado após o botão pause, o valor da variável valorPause passasse a ser zero, para que na verificação do botão play o áudio comece do início.

Criando controles deslizantes de volume e balanço do som

Controle de balanço

Crie uma pequena bola de 10×10, transforme-a em símbolo (F8), tipo botão, e a instancie de btnBola, em seguida converta (F8) este botão em um movieClip e o instancie de mcBalanco. Desenhe um retângulo de 110×5 e alinhe o mcBalanco a esquerda do retângulo.

O código abaixo adicionará as funcionalidades a barra de balanço.

mcBalanco.top = mcBalanco._y;
mcBalanco.bottom = mcBalanco._y;
mcBalanco.left = mcBalanco._x;
mcBalanco.right = mcBalanco._x + 100;
mcBalanco._x += 50;
 
mcBalanco.btnBola.onPress = function(){
	startDrag(this._parent, false, this._parent.left, this._parent.top, this._parent.right, this._parent.bottom);
	}
mcBalanco.btnBola.onRelease = function(){
	stopDrag();
	var meuBalanco:Number = Math.ceil((this._parent._x - this._parent.left - 50)*2);
	meuSom.setPan(meuBalanco);
	}
mcBalanco.btnBola.onReleaseOutside = mcBalanco.btnBola.onRelease;

Primeiramente foi definido o topo e a base do mcBalanco, que são exatamente a posição deste na vertical, isto fará com que o controle não se mova na vertical, em seguida foi definido o início (left), sendo-a posição inicial do objeto, e o final (right) de 100pixel adiante, por fim, foi definido o valor inicial do controle de 50, desta forma o áudio será distribuído igualmente entre as caixas de som.

Na linha 7 foi definido que quando o botão btnBola for pressionado, a função startDrag(), que nos possibilita mover o botão, seja chamada, a sintaxe do função startDrag() é a seguinte:

startDrag(destino:Object, [lock:Boolean, esquerda:Number, topo:Number, direita:Number, base:Number])

• destino: a instancia do movieClip para o drag. No exemplo acima this._parent, o pai do botão btnBola, o mcBalanco.
• lock: valor boolean, true para que o botão a ser arrastado seja centralizado ao ponteiro do mouse, e false para que centralize do local onde foi clicado.
• esquerda, topo, direita, base: com estes parâmetros pode-se limitar a área em que o botão será arrastado. No exemplo, utilizou-se os valores do movieClip mcBalanco, que foram definidos no início.

Na linha 10, assim que o botão deixar de ser pressionado, é finalizado o drag, através da função stopDrag(), e armazenado na variável meuBalanco a nova posição do botão, subtrai o valor da esquerda do mcBalanco para zerar a partir do ponto da esquerda, até aqui a barra esta de 0 a 100. Mas o balanço do som, vai de -100 a 100, então foi subtraido 50 do resultado, ficando agora de -50 a 50, bastando multiplicar o resultado por 2, para obtermos uma escala de -100 a 100. Este valor é passado ao método setPan(), mas o método aceita apenas valores inteiros, por este motivo o resultado da variável meuBalanco, é passada para o método ceil, da classe Math, que retorna o valor mais próximo e maior ou igual ao número.

Na linha 15, foi utilizado o onReleaseOutside, para caso o botão deixe de ser pressionado com o ponteiro do mouse fora do botão, as mesmas ações definidas para o onRelease, sejam chamadas.

Controle de volume

Com o mesmo código acima, com algumas pequenas alterações, pode-se criar um controle de volume. A modificação mais significativa é alteração do método setPan() por setVolume(). Ao evento onRelease foi adicionado uma linha que atualiza uma caixa de texto dinâmica, instanciada de volumeText, com o volume atual, para isto foi utilizado o método getVolume(), o valor é de 0 a 100.

Duplique o controle criado para o balaço, e troque a instancia de mcBalanco para mcVolume. Crie uma caixa de texto dinâmica com a instância de volumeText.

mcVolume.top = mcVolume._y;
mcVolume.bottom = mcVolume._y;
mcVolume.left = mcVolume._x;
mcVolume.right = mcVolume._x + 100;
mcVolume._x += 100;
volumeText.text = meuSom.getVolume();
 
mcVolume.btnBola.onPress = function(){
	startDrag(this._parent, false, this._parent.left, this._parent.top, this._parent.right, this._parent.bottom);
	}
 
mcVolume.btnBola.onRelease = function(){
	stopDrag();
	var meuVolume:Number = Math.ceil(this._parent._x - this._parent.left);
	meuSom.setVolume(meuVolume);
	volumeText.text = meuSom.getVolume();
	}
mcVolume.btnBola.onReleaseOutside = mcVolume.btnBola.onRelease;

Exibindo a duração total e a contagem progressiva

Para exibir a duração total, é utilizada a propriedade duration, e para exibir o status progressivo, é utilizada a propriedade position.

Exibindo a duração total

A propriedade duration nos retorna o valor em milissegundos, portanto, a primeira tarefa a ser realizada é passar os valores para segundos.

Para começar crie uma caixa de texto dinâmico, e o instancie como duracaoText.

function tempo(metodo:String, caixaTexto:String){
	var tempo:Number = meuSom[metodo]/1000;
	var minutos:Number = Math.floor(tempo/60);
		minutos = minutos<10 ? "0"+minutos : minutos;
	var segundos:Number = Math.floor(tempo%60);
		segundos = segundos<10 ? "0"+segundos : segundos;
	_root[caixaTexto].text = minutos + ":" + segundos;
	}
tempo("duration","duracaoText");

Primeiramente o código foi adicionado dentro de uma função, pois o código para exibir a contagem progressiva é o mesmo, alterando, apenas dois parâmetros, a propriedade para position ou duration, e a variável da caixa de texto que receberá os valores.

Sabendo que 1 segundo é igual a 1000 milissegundos, então basta dividir o valor por 1000 para se obter o valor em segundos, esta é a variável tempo. Para o minuto foi dividido o tempo total por 60, para segundos foram resgatados o resto da divisão(%) do tempo total dividido por 60. Os valores foram arredondados pelo método floor, da classe Math.

Além disto, para uma melhor apresentação das informações, tanto a variável minutos, quanto a variável segundos, foram colocadas diante de uma condição, para que quando o valor for menor que 10, seja adicionado um zero a esquerda. Para que se entenda melhor, a sintaxe da condicional usada é a seguinte:

condição : respota 1 (true) ? respota 2 (false);

Exibindo a contagem progressiva

interval = setInterval(tempo, 1000, "position","posicaoText");
meuSom.onSoundComplete = function(){clearInterval(interval);}

Como foi já dito acima, o código é praticamente o mesmo, o código acima utiliza a função tempo, criado no exemplo acima para exibir a duração total do som.

a principal diferença aqui, além das citas acima, é que a função foi chamada pelo setInterval(), para que o valor fosse atualizado a cada 1 segundo. Também foi utilizado o evento onSoundComplete, para que assim que o som chegue ao final o setInterval seja finalizado.

This entry was posted on Wednesday, January 24th, 2007 at 8:47 and is filed under Actionscript 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.