Flash Training: Animation

Home Food Mates • Members Tutorials Forum Buy Templates Contact Us 

 


Flash Tutorials

   

Flash Animation- Graphic Equalizer

 

Free Animation Tutorial


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

 

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

         

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 
 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.