Sound visualisation effect in Actionscript 3

In this tutorial you will learn how to create a sound bar visualisation effect commonly seen in many audio players on the internet. The bars will move randomly up and down one after another by changing the height property. You will need the Tweenlite plug-in for this tutorial which can be downloaded here.


Sound visualisation in Actionscript 3


Step 1

Open a new AS3 file. Select the Rectangle tool and create five rectangles with 80px height and 10px width.

Step 2

Convert each of the rectangles into movie clips and set the registration point to the bottom left corner. Then give each of the movie clips the following instance names accordingly: mc1, mc2, mc3, mc4 and mc5.



Step 3

On timeline insert a new layer called ‘as’ then open up the Actions panel and enter the following code:

//Imports the tweenlite plugin.
import com.greensock.*;

//Counter to hold position of the array index.
var counter:int=0;

//Array to hold all the movie clip instances. 
var mcArray:Array=[mc1,mc2,mc3,mc4,mc5];

//Sets the starting height of the movie clips to 5 pixels.
mc1.height=mc2.height=mc3.height=mc4.height=mc5.height=5;

//This function is used to generate random numbers.
function randomNumbers(min:Number,max:Number) {
    var Results:Number=Math.floor(Math.random()*max)+min;
    return Results;
}

stage.addEventListener(Event.ENTER_FRAME, moveBar);

//This function tweens the bars to random heights.
function moveBar(event:Event):void {   
    if(counter==mcArray.length){
        counter = 0;
    }else{
    TweenLite.to(mcArray[counter], 0.5, {height: randomNumbers(10,50)});
    counter++;
    }
}

Step 4

Test your movie Ctrl + Enter. You should now have sound visualisation effect in Actionscript 3.