Music Spectrum

Tuesday, May 06, 2008

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 )

===========

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 < class="br0">){
// 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 < class="br0">){
// 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 < class="br0">){
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 < class="br0">){
// Remove the bars.
var b = bar['bar'+j].removeMovieClip();
}
}
}