Creating Random Equalizer Bars

By Dr Diablo | Flash CS3 | ActionScript 1+2 | Beginner

This tutorial will teach you how to create a vertical randomly moving bar equalizer. These bars are going to move in a random manner by having a random value for their _yscale property on each frame. Even though the movement of the bars is random, it can be played along with music to mimic a musical flow.

Our tutorial will be divided into two simple stages:

  1. Creating the graphical bar movie clip.
  2. Coding the effect.

Creating the Object

Open up Flash and start off with a 380x200 px new document, set the background color to white #FFFFFF, change the Frame Rate value to 18, and set the ActionScript version to 2.0.

New Document Properties

Grab the Rectangular Tool from your Tool Panel on the left side of your workspace and draw a rectangular shape as shown in the screenshot. In my sample, the Rectangle I drew is 10 px wide and 17 px high.

Main Object

We are going now to convert this shape object to a Movie Clip. Click on the rectangular you just drew, press F8 and choose Movie Clip while keeping in to set the Registration Point to lower center position. Moving the registration point to this position will ensure that bar scales from the bottom up and not from the center or any other direction.

Convert to Movie Clip Symbol

Applying the Code

Now that the rectangular is a movie clip, we can add actions which will make it vertically scale in a random manner. While your rectangular is selected, press F9 to bring up the Actions Panel and input the following actions.

onClipEvent(enterFrame){
_yscale = Math.random()*500 + 10;
}

In normal speech our code means that at the entry of each new frame, the vertical scale of our object will have its value equal to a random number between 0 and 500, PLUS 10. So that means the value can be anything between 10 and 510. Our random number is generated by using the Math.random() method that generates a random floating number between 0 and 1 (ie 0.243 or 0.546) which we can multiple with any number to generate a random value between that number and zero.

You can press Ctrl+Enter to test your movie to see how your bar randomly changes in size.

For an alternative method on how to generate a random number in ActionScript you can review our Random Movement Tutorial which uses that deprecated random() method.

You can duplicate this bar to as many times as you like by simply holding the Ctrl button and dragging the rectangle to the position in which you would like it to be duplicated.

The movement speed of the bars depends on your frame rate that you have set in the beginning of this tutorial to 18 frames per second. Increasing the frame rate would in it's turn increase the speed of the random moving bars..

You can apply this technique to all sorts of applications as mentioned in the introduction. Here are my results at a rate of 18 frames per second.

This concludes our tutorial, I hope that you've learnt something new from it, feel free to email me on diablo@republicofcode.com for any questions. You can also alternatively post in the Oman3D Forum to get instant feedback.

- End of Tutorial.