Flash Training: Animation

Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Animation- Graphic Equalizer

Free Animation Tutorial

Step 2 << Previous • Intro 1 2 • >> >> Webwasp Mates

Step Two: Preparing the Stage

Place 20 of these rectangles and lines on the stage, in pairs, with the lines over the top of the rectangles.
Give each rectangle a name "lineX" and each line a name "topperX" where X is the number 1 to 20.
Line up everything using your align dialog so it looks like the picture below.
Name each line, from left to right is named “topper1” to “topper20”.
Name each rectangle, from left to right is named “line1” to “line20”.
Group all objects on the stage so it’s all one piece. This will make things easier for when you use the equalizer in another movie.
Add code, bake at 400 degrees in a dutch oven, being careful to tent aluminium foil over the equalizer or the top will burn!

Sorry, got carried away there. Just add the following code to the first frame of the movie:

// Project: make a fake equalizer like movie clip for use when music is playing in Flash
// project has lines and toppers, each labeled linex & topperx where x is 1 to 20.
// the lines make up the tall parts of the equalizer, the toppers are just a line placeholder
// for the max value of the lines
// define initial arrays

barboty=new Array(); //holds bottom of each line's _y registration point

randheight=new Array(); //holds randomly generated height of line

toppery=new Array(); //holds _y registration point of topper

decfraction=new Array(); //holds the fraction of random height of line that will be used to decrement the line's height

numbars=20; //defines number of lines

maxheight=40; //defines max height of line

minheight=1; //defines min height of line

gap=2; //defines distance between top of line and topper

topperdrop=.075; //defines value to decrement _y value of topper

numsteps=7; //defines number of steps to decrement height of line

// this function sets values for the heights of each line in the equalizer

function initbars() {

for (i=1;i<_root.numbars+1;i+=1) {

barboty[i]=eval("_root.line"+i)._y;

randheight[i]=Math.random()*maxheight;

toppery[i]=barboty[i]-randheight[i]-gap;

decfraction[i]=randheight[i]/(_root.numsteps);

// set initial line height and position of topper

setProperty(eval("_root.line"+i),_height,_root.randheight[i]+_root.minheight);

setProperty(eval("_root.topper"+i),_y,barboty[i]-randheight[i]-_root.gap-_root.minheight);

}

// this function will get executed at the playing frame rate of the movie, even if the movie is stopped

_root.onEnterFrame = function() {

for (j=1;j<_root.numbars+1;j+=1) { //set height of each line for each j in numbars

setProperty(eval("_root.line"+j),_height,_root.randheight[j]);

if (_root.randheight[j]<=_root.minheight) { // if the line height is less than the min, then:
// set line height to the min then redo the line heights etc

setProperty(eval("_root.line"+j),_height,_root.minheight);

_root.initbars(); // the entire function initbars could be placed here if you like rather than being called.

} else { //if not too short, decrement height of lines and position of topper

_root.randheight[j]=_root.randheight[j]-_root.decfraction[j];

setProperty(eval("_root.topper"+j),_y,eval("_root.topper"+j)._y+_root.topperdrop);

}

Step 2 << Previous • Intro 1 2 • >> >> Webwasp Mates

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us