Simulated Flash Audio Spectrum Analyzer

Category: Adobe Flash Tutorials
Added: 05/02/2007
Views: 101,342
Category: Adobe Flash Tutorials
Added: 05/02/2007
Views: 101,342
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.
Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 550 x 400
Frame Rate: 12 fps
Background: Black
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.
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
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 )
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.
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!
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.
Touch Screen Kiosk
32" Touch Screen Kiosk featuring the hall of fame inductees of La Salle University.
"We were looking for a company that could work with us and develop our ideas into an attractive, informative, and easy-to-use web page for our constituents. The web page is now complete, and I have to say that Pixel Hive Design did an outstanding job in accomplishing the task. Based on our initial ideas, they provided a set of designs for our review and revised them multiple times, each time improving the outcome. The company showed great flexibility and patience to make sure that we were happy and satisfied with the final product."
- Professor and Chair, Electrical and Computer Engineering Department, University of Maine