Simulated Flash Audio Spectrum Analyzer

var addthis_pub = 'PixelHive';

Category: Adobe Flash Tutorials
Added: 05/02/2007
Views: 98,795

Simulated Flash Audio Spectrum Analyzer

Tutorial Goal

To code a Simulated Spectrum Analyzer for visual Audio representation using Adobe Flash and Actionscript. The analyzer accepts a spectrum object to define how the audio bars will react. This means you can adjust it to simulate different genres of music or audio levels. It is easy to change the color, size, the number of bars both horizontally and vertically, the spacing between them and their fading effect. We also code a function to turn the analyzer off.

Step 1 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 550 x 400
Frame Rate: 12 fps
Background: Black

Step 2 : Creating a Single Audio Bar

This effect is achieved using ActionScript and one MovieClip. So let's start by creating an individual audio bar.

Select the Rectangle Tool, , and change to color properties to:

Draw any size rectangle on the Stage, open the info pane and set width and height to 12 & 5:

With the shape selected, convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: one_bar
Registration: bottom, left
Export for ActionScript: checked
Linkage Identifier: one_bar

Delete the MovieClip from the Stage. It will remain in the Library waiting for us to call it with Actionscript.

Step 3 : Create Analyzer Border & Container MovieClip

In this step, we will create the surrounding border which will also serve as a containing MovieClip for the ActionScript.

Select the Rectangle Tool again, , change the color properties to:

Draw any size rectangle on the Stage, open the info pane and set width and height to 277 & 124:

With the shape selected, convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: spectrum_analyzer
Registration: bottom, left

Step 4 : Coding the Spectrum Analyzer

It's time to code the Analyzer.

Double Click the MovieClip on Stage. Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Copy & Paste the following code: ( All explained in my comments )

// ---------------------------------------------
 // Simulated Spectrum Analyzer
 // Author: Max Langdon - max@pixelhivedesign.com
 // Site: www.pixelhivedesign.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();
     }
   }
   
 }

Step 5 : Changing the Analyzer Color and Size

More than likely you will want to change the size of the analyzer since it is quite large for a typical audio player. It's all vector based so we won't have a problem here.

Click on "Scene 1" to return to the Main Stage.

Select the anaylzer and open the transform pane.
Window > Transform
Now change the scale to whatever you need.

You may also want to change the color. Here are two options:
1. Change the "one_bar" MovieClip
Open the Library:
Window > Library

Double Click the "one_bar" MovieClip and make any color and design changes you want.

2. Change the "Tint" of the Analyzer
With the analyzer MovieClip selected simply change the "Color" property to "Tint" and select a color.