Flash Animation Tutorial
Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 

 

Flash Tutorials

   
Flash Animation- Graphic Equalizer

 

Free Animation Tutorial

 

 

Intro

 

The aim of the tutorial is to learn how to make a fake Equalizer for use when music is playing in Flash.

 

Example: Download the Flash file Int 110a

The equaliser looks cool if you don’t look at the equalizer too closely and realize it’s not synchronized with the beat .

Step One: Creating the Symbols

  1. Draw a rectangle so that it’s taller than it is wide (although you could really make it any shape or size).
  2. Convert this rectangle to a movie clip named “mc_bar” with a middle bottom registration point.
  3. Draw a line the same width as the rectangle you just drew.
  4. Convert this line to a movie clip named "mc_topper” with a centred registration point.

Step Two: Preparing the Stage

  1. Place 20 of these rectangles and lines on the stage, in pairs, with the lines over the top of the rectangles.
  2. Give each rectangle a name "lineX" and each line a name "topperX" where X is the number 1 to 20.
  3. Line up everything using your align dialog so it looks like the picture below.


  4. Name each line, from left to right is named “topper1” to “topper20”.
  5. Name each rectangle, from left to right is named “line1” to “line20”.
  6. 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.
  7. 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);
    }
  }
}

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

Webwasp Community: Webwasp Mates & Dates

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

 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.