Simulated Flash Audio Spectrum Analyzer

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 05/02/2007
Views: 83,100

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, Rectangle Tool, and change to color properties to:

Color Properties

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

Info Pane

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

The Bar MovieClip
Color Properties

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, Rectangle Tool, change the color properties to:

Color Properties

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

Border Dimensions

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

Conver to Symbol
Analyzer Border

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();
    }
    }
    }
Flash Den

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.

Spectrum Design Changes

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.

Tint Properties

Simulated Flash Audio Spectrum Analyzer : Conclusion

Change the "one_bar" MovieClip to create new visual effects. Very minor changes have dramatic effects. The Audio Spectrum Analyzer is a valuable feedback mechanism for your audio needs. Don't forget the power of MovieClips, since the analyzer is a completely self contained object you can transform, rotate, and distort it all you like and it will continue to work. Have fun!

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Simulated Flash Audio Spectrum Analyzer" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Logo & Website Design UM Undercutters Mascot Logo

Logo & Website Design
Connecting College Book Buyers & Sellers

Web Development : Musician Website Eddie Kirkland

Musician Website
Blues Legend

Web Development : Promotional Website X-Power Interactive

Promotional Website
Algebra Software

Testimonials

"Working with Max was easy and fun. He understood the feel and look I wanted my site to have. Max is easy to communicate with and very available, always returning emails and answering all of my questions promptly. He also had great suggestions when I had questions about website and business etiquette. In addition to his programming abilities, Max has a great way with people. He has set me up to manage my website easily. I am left feeling confident and proud of my new site."

- Megan Jean Morris, Professional Fine Artist, Farmington, Maine
View More Testimonials

More Tutorials!