Sunday, 11 July 2010

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.

4 comments:

Shabnum Amin Khan 24 February 2013 at 17:33  

Can you teach us how to stop this sound effect? If i want to stop this sound by clicking these bar, then how will I do?

iliketo 25 February 2013 at 12:52  

@Shabnum,

Firstly, add a click event to the bars then remove the enter frame event.

Shabnum Amin Khan 26 February 2013 at 13:19  

Sorry I couldn't understand.Please post this tutorial with detail.

iliketo 27 February 2013 at 15:17  

@@Shabnum,

Please explain what you don't understand?

Adding and removing events are very simple.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP