title: RollOver and RollOut effect in buttons
body: <p>I'm using the code bellow to change the color of button on rollover and rollout and clicked. I have following issues in this 
   1. The color did not changed when button is clicked.
   2. Button wont work after once clicked.</p>
  
  <pre><code>pages.gotoAndStop("home");
  
  
  // list of button instance names
  var previousClicked:DisplayObject;
  var buttonsss:Array = [home, menudown.about, menudown.portfolio, menudown.clients,     menudown.pricing, menudown.contact];
  
  
  for each ( var mc:MovieClip in buttonsss)
  {
  mc.buttonMode = true;
  mc.mouseChildren = false;
  mc.addEventListener(MouseEvent.MOUSE_UP, onClick);
  mc.addEventListener(MouseEvent.ROLL_OVER, rolloverEffect);
  mc.addEventListener(MouseEvent.ROLL_OUT, rolloutEffect);
  
  }
  
  
  function onClick(e:MouseEvent):void
  {
  
  pages.gotoAndStop(e.target.name);
  e.currentTarget.mouseEnabled  = false;  
  TweenLite.to(e.currentTarget,2,{tint:0x666666, ease:Strong.easeOut});
  TweenLite.to(previousClicked,2,{tint:null , ease:Strong.easeOut});// set the     previous clicked to null tint
  previousClicked.addEventListener(MouseEvent.ROLL_OUT, rolloutEffect);// restore the Roll_Over effect
  previousClicked = DisplayObject(e.target); // update the last clicked button
  e.target.removeEventListener(MouseEvent.ROLL_OUT, rolloutEffect);
  
  }
  
  function rolloverEffect(e:MouseEvent):void{
  
  TweenLite.to(e.currentTarget,2,{tint:0x666666, ease:Strong.easeOut});
  
  }
  function rolloutEffect(e:MouseEvent):void{
  
  //should change tint to null just when its enabled, but its changing always     (enabled or disabled)
  TweenLite.to(e.currentTarget,2,{tint:null , ease:Strong.easeOut});
  
  }
  </code></pre>