Simulated Flash Audio Spectrum Analyzer

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 05/02/2007
Views: 102,484

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 -
    // Site:
    // ---------------------------------------------
    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 = [
    // Start the spectrum analyzer.
    // ----------------------------
    // 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.
    // 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 : Informational Website Constructicons

Informational Website
Construction Company based in Florida

Print & Graphic Design : Logo & Business Card Design Credit Union Insurance

Logo & Business Card Design
CUinsure Branding

Web Development : Video Subscription Site Daily Almanac

Video Subscription Site
Classroom Fitness Series


"My coffee café, Cherries, benefited greatly from Maxwell's dual talents. Not only was he able to do the technical requirements to promote my business, his creative talents gave the business the logo and charm a unified distinctive style. He is a one stop shop, from the logo design, to menu, to commercial he produced a product greater than even our own vision. "

- Hedy Langdon, Farmington, Maine
View More Testimonials

More Tutorials!