RollOver and RollOut effect in buttons

Question

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.

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});

}

Answer 1

How I have always done this is with the built in buttons instead of doing it with code. If you click window up in the top bar then click on components (near the bottom) it will bring up a little window then if you expand the user interface folder and drag and drop from the button item. Then with that button on the stage if you double click on it you will go into the edit symbol screen and it will have pictures of each state that the button and if you double click on the state you want then you can visually edit that version of the button.

Hope this helped.

Note: I first started with flash pro-cs5.5 and your tag says flash-cs5 I don't know for sure if that function is available or not in 5.

Answer 2

I am unfamiliar with Tweenlite, but I'm guessig that what it does in this case is simply change the color, am I right? If so, I'd suggest creating the color changes on your timeline and using framelabels combined with gotoAndStop to create the different effects. This should also solve your problem concerning the button not working after it has been clicked once.