Flash: Simular Spectrum Analisador de Áudio

Hoje Irei ensinar a criar um analisador de áudio, o Spectrum é muito usado em player, o mesmo è usado para decodificar sons, mas é muito utilizado como atração as visitantes.

Por | @oficinadanet Softwares
Flash: Simular Spectrum Analisador de Áudio

Hoje Irei ensinar a criar um analisador de áudio, o Spectrum é muito usado em player, o mesmo è usado para decodificar sons, mas é muito utilizado como atração as visitantes.

O analisador de espectro aceita um objeto para definir como as barras de áudio vai reagir. Isto significa que você pode ajustá-lo para simular diferentes gêneros de música ou de níveis de áudio. É fácil mudar a cor, tamanho o número de barras horizontal e vertical, o espaçamento entre eles e os seus efeitos esmorecer. Temos também um código de função para ligar o analisador fora.

Etapa 1: Configurar documento


Abra o Adobe Flash e modificar as propriedades do documento.
Modify> Document
Tamanho: 550 x 400
Frame Rate: 12 fps
Background: Black

Etapa 2: Criando um único Audio Bar


Este efeito é conseguido usando o ActionScript e um MovieClip. Então, vamos começar por criar uma barra individual de áudio.

Selecione a ferramenta Retângulo, e alterar a cor de imóveis para: ange à cor propriedades para:
Flash: Simular Spectrum Analisador de Áudio

Desenhar retângulo qualquer tamanho no palco, abrir o painel de informações e definir a largura e altura de 12 e 5:
Flash: Simular Spectrum Analisador de Áudio

Com a forma selecionada, convertê-lo em um símbolo de MovieClip.
Modify> Convert to Symbol
Nome: one_bar
Registro: baixo, da esquerda
Exportar para ActionScript: verificado
Linkage Identifier: one_bar

Flash: Simular Spectrum Analisador de Áudio

Flash: Simular Spectrum Analisador de Áudio

Excluir o MovieClip do palco. Ele permanecerá na Biblioteca à espera de nós a chamá-lo com Actionscript.

Etapa 3: Criar Analyzer Border & Container MovieClip


Nesta etapa, vamos criar a borda ao redor, que também servirá como um MovieClip contendo para o ActionScript.
Selecione a Rectangle Tool novamente, alterar as propriedades de cor para:
Flash: Simular Spectrum Analisador de Áudio

Desenhar retângulo qualquer tamanho no palco, abrir o painel de informações e definir a largura e altura para 277 e 124:
Flash: Simular Spectrum Analisador de Áudio

Com a forma selecionada, convertê-lo em um símbolo de MovieClip.
Modify> Convert to Symbol
Nome: spectrum_analyzer
Registro: baixo, da esquerda
Flash: Simular Spectrum Analisador de Áudio

Flash: Simular Spectrum Analisador de Áudio

Passo 4: Codificação do analisador de espectro


É hora de o código Analyzer. Clique duas vezes no MovieClip no Stage. Selecione Quadro 1 na Linha de tempo e abrir a janela de ActionScript.

Janela> Ações

Copie e cole o seguinte código:
// ---------------------------------------------
// Simular Spectrum Analisador de Áudio
// Author: Tau Braga - taubraga@hotmail..com
// ---------------------------------------------
spacing = 1; // Spacing between bars.
margin = 3; // Shift all bars to right.
tot_bars = 21; // Total Spectrum Bars.
max_height = 20; // Maximum height of line in bars.
// ----------------------------------
// The spectrum definitions.
// ----------------------------------
// low = lowest the line(s) will go.
// high = highest the line(s) will go.
// n = number of lines affected.
// Make sure the sum of your n's = tot_bars.
// Example Rock Spectrum.
rock_spectrum = [
    {low:5,high:20,n:2},
    {low:12,high:20,n:8},
    {low:3,high:15,n:3},
    {low:7,high:15,n:3},
    {low:5,high:10,n:3},
    {low:0,high:5,n:2}
];
// Start the spectrum analyzer.
analyzer(rock_spectrum);
// ----------------------------
// Simulated Spectrum Analyzer
// ----------------------------
// spectrum : Array Spectrum Definition.
// isOn : Boolean - Turn on or off Analyzer
function analyzer(spectrum)
{
    // Index of first bar range, first {low:#, high:#, n:#}
    var curRange = 0;
    // Number of lines the current range will affect.
    var numLines = spectrum[curRange].n;
    // Generate the vertical bar lines.
    for(var i = 0; i < tot_bars; i++)
    {
        // Attach a one_bar movieclip.
        var bar = this.attachMovie('one_bar','bar'+i,(i+1));
        // Position the movieclip based on its width,
        // spacing and margin specified in our variables.
        bar._x = i * (bar._width + spacing) + margin;
        // Set the bar's range to the current range.
        bar.r = spectrum[curRange];
        // Animate the bar vertically.
        bar.onEnterFrame = function()
        {
            // Choose a random number between the range we specified.
            var h = Math.round(Math.random() * (this.r.high - this.r.low) + this.r.low);
            // Using the random height, we generate more bars accordingly.
            for(var i = 0; i < h; i++)
            {
                // Attach another bar.
                var bar = this.attachMovie('one_bar','bar'+i,(i+1));
                // Put it above the last bar.
                bar._y -= i * (bar._height + spacing);
                // Immediatly start fading the bar.
                bar.onEnterFrame = function()
                {
                    this._alpha -= 20;
                    // If completely faded, remove the MovieClip.
                    if(this._alpha == 0) this.removeMovieClip();
                }
            }
        }
        // Countdown the number of lines we setup.
        numLines--;
        // If we reach 0, it is time to get the next range from our spectrum array.
        if(numLines == 0) curRange++, numLines = spectrum[curRange].n;;
    }
}
// --------------------------
// Turning off the Analyzer.
// --------------------------
function turnOff()
{
    // Loop through the number of vertical lines.
    for(var i = 0; i < tot_bars; i++)
    {
        var bar = this['bar'+i];
        // Stop the animation.
        delete bar.onEnterFrame;
        // Loop through the number of bars on the line, except first one.
        for(var j = 1; j < max_height; j--)
        {
            // Remove the bars.
            var b = bar['bar'+j].removeMovieClip();
        }
    }
}



Abraços a todos e até a próxima.



Se gostaram do meu tutorial...
votem abaixo no artigo

Mais sobre: flash, tutoriais, spectrum
Share Tweet
DESTAQUESMais compartilhados
Comentários
AINDA NÃO SE INSCREVEU?

Vem ver os vídeos legais que
estamos produzindo no Youtube.