Tutorials Home What's New Top Rated Submit myTutes Random!

Flash Audio Spectrum Analyser
Author: Inn Chan

Page 2
«prev 1 2 3 4 next»

Track Player and Spectrum analyser

You can refer to the source file "spectrumAnalyzer.fla" for this part of the tutorial. The setup for the track player looks something like this:



The first frame of the movie is the track selection menu, the second and the third frames are the track loader, the forth frame is the control panel of the track, the fifth and sixth frames updates the spectrum bars, the movie stops at frame 10 and back to the track selection menu in frame 1.

The laysers you have to pay attention to are the actionscript layer, the play button layer, and the display layer. The rest are just graphics.

The play button are presented throughout the movie, but users should not be allowed to play tracks when it hasn't been loaded. Give the button a name and disable it in the frame action, don't forget to stop the movie playing:

    playButton.enabled=false;
    stop();

Now create two button symbols one for track selection and one for playing the track, put one instance of the play button on the button layer and a track selection button for each of the tracks on the same layer.

Create an empty movie clip symbol, drag an instance of it on to a layer you remember and name the instance "track". This is used to load the track.swf we'll create later into the movie when the user select the button. Also create a directory for each track in the directory where you put the spectrumAnalyzer.swf, name it "track#" where # is the number of your track, you can use track name if you want as long as you specify in the "thePath" variable below. Now put the following code into each button and change the "thePath" value accordingly.

    on(press){
 var thePath="track1/";
 loadMovie(thePath add "track.swf",_root.track);
 _root.track.play();
 gotoAndPlay(2);
 }

We will do the code for the play button last so you will have a better understanding of how things works.

Frame one done. Now go to frame two and create a "loading" indication and extend it to frame three. put the following frame action into frame three.

    if(_root.track._currentframe==4){
 playbutton.enabled=true;
 gotoAndStop(4);
 }else{
 gotoAndPlay(2);
 }

don't use "_root.track.framesloaded>4" in the if clause. cos there is another loader in the track.swf movie.

Now create a movie symbol for the spectrum bar as follows:



if you are not doing a digital spectrum display like I did, you can create a shape tweened bar that goes from frame 124 to frame 200.
After you've finished, create a movie symbol for the spectrum display, drag ten spectrum bar instances into the spectrum display symbol and name them sbar1, sbar2,...sbar10.



Then put an instance of the spectrum display onto the root display layer and name it "spectrumDis" and go to frame 5 and put in the following frame action:

 theInterval = int( _root.track.soundChannel.position/_root.track.interval)+1;
 if (theInterval<_root.track.totalRow) {
 for (i=1; i<11; i++) {
 _root.spectrumDis["sbar" add String(i)].gotoAndStop(199+Number(_root.track["data" add String(theInterval)][i-1]));
 }
 }

Frame 5 and 6 is a loop that updates the spectrum display. Let me try to explain what is going on here. In order to make a spectrum analyser we need to get the amplitudes of frequencies at different time, Spectrum Lab does that job, it records data at adjustable intervals, we now need to know at which interval the track is playing, so that we can refer to the appropriate section of the data and set the spectrum bars. Spectrum Lab records amplitude in db range from 0 to -199, the data output at a particular interval (in this tutorial I refer to as one "row") looks something like this:

-17,-51,-55,-62,-65,-66,-64,-68,-69,-69,

And data at the next interval are written in the next line etc... The idea is to convert these rows into arrays of ten elements, or better still a two dimensional array. Either way works, this tutorial used the earlier. So an array represents one "row" and there are hundreds of these arrays for a one minute track. Now we want to know which array represents the spectrum data of the track's current position, we first have to calculate in which interval the track is playing. Then we check if it's at the last interval, if it's not we go into a for loop which goes through each spectrum bars, get values from the array[theInterval][loopcount] and tell the spectrum bar movie clip to go to the frame 199 + data(0 to -199 remember?), but from which only 0 to about -75 are audible, and that's why you created the shape tweened bar between frame 125 and 200 in the spectrum bar symbol.

To finish the rest of the loop go to frame 6 and put in the following frame action:

    if(theInterval<_root.track.totalRow){
 this.gotoAndPlay(4);
 }else{
 for(i=1;i<11;i++){
 _root.spectrumDis["sbar" add String(i)].gotoAndStop(124);
 }
 }

In which _root.track.totalRow is the total number of rows calcuated in the track.swf, if the current interval is not the last interval, go back to the previous frame and update the spectrum display, else set all the spectrum bars to "0%" .

When you've done the loop, go to frame 11 and tell it to goto the first frame.:

    gotoAndStop(1);

The last thing in this section - the scripts for the play button:

    on(press){
 if(_currentframe>4&&_currentframe<11){
 _root.track.soundChannel.stop();
 theInterval=_root.track.totalRow;
 gotoAndPlay(6);
 }else{
 _root.track.gotoAndStop(5);
 play();
 }
 }

One thing I need to explain here is that frame 5 in track.swf has the script that starts sound so _root.track.gotoAndStop(5) in effect plays the sound.

«prev 1 2 3 4 next»

» Level Intermediate

Added: : 2002-08-28 Rating: 8.75 Votes: 32 Hits: 3482

» Author

Multimedia Student eager to combine artistic skills, creativity and practical knowledge to innovate new concepts in interactive media

» Download

Download the files used in this tutorial.

Download (350 kb)

Get conversion and unzipping tools for PC and Mac here!

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1