Hi,
I have a navigation with 4 buttons. Each button has a listener for rollover, out and click. When you click on one, the last one that was clicked gets enabled, a variable changes to the value of the button that you just clicked on, and that button gets disabled. When you first load it, one of the buttons gets disabled because that section loads automatically.
It’s all working perfectly, except that when the disable function gets called, the button doesn’t change color. The color changes on rollover, rollout and when the button gets enabled work fine, but for some reason once the button is disabled it stays the same way it was when it was active. It’s really bizarre, I tried switching from TweenLite to just a colorTransform but I still had the same problem.
Here’s the code (summarized version, it’s so long):
function buildNav():void
{
// services btn
services_btn = new NavBtn("SERVICES");
nav.addChild(services_btn);
services_btn.buttonMode = true;
services_btn.useHandCursor = true;
services_btn.x = 0;
//--*** after that I make three more buttons the same way with different names
// event listeners for rollovers and click
services_btn.addEventListener(MouseEvent.CLICK, onNavClick, false, 0, true);
services_btn.addEventListener(MouseEvent.MOUSE_OVER, onNavOver, false, 0, true);
services_btn.addEventListener(MouseEvent.MOUSE_OUT, onNavOut, false, 0, true);
//--*** after that, listeners for the other three buttons
init();
}
private function init()
{
// bring up Services to start with
var _services:Sprite = new Services();
addChild(_services);
curSection = _services;
curBtn = services_btn;
// disable services button
disableBtn();
}
// nav onClick function
private function onNavClick(e:MouseEvent):void
{
enableBtn();
removeChild(curSection);
// make sectionName equal to the text in the button
sectionName = e.target.parent._label.text;
// check what button we clicked on by checking what the text is in that button
switch (sectionName)
{
case "SERVICES":
var _services:Sprite = new Services();
addChild(_services);
curSection = _services;
curBtn = services_btn;
disableBtn();
break;
//--*** after that, same code for the three other buttons
}
}
private function enableBtn():void
{
TweenLite.to( curBtn, 0, { tint:0xffff00 } );
curBtn.mouseEnabled = curBtn.mouseChildren = true;
curBtn.addEventListener(MouseEvent.MOUSE_OVER, onNavOver, false, 0, true);
curBtn.addEventListener(MouseEvent.MOUSE_OUT, onNavOut, false, 0, true);
curBtn.addEventListener(MouseEvent.CLICK, onNavClick, false, 0, true);
curBtn.buttonMode = true;
curBtn.useHandCursor = true;
}
private function disableBtn():void
{
TweenLite.to( curBtn, 0, { tint:0xffffff } );
curBtn.buttonMode = false;
curBtn.useHandCursor = false;
curBtn.mouseEnabled = false;
curBtn.mouseChildren = false;
curBtn.removeEventListener(MouseEvent.ROLL_OVER, onNavOver);
curBtn.removeEventListener(MouseEvent.ROLL_OUT, onNavOver);
curBtn.removeEventListener(MouseEvent.CLICK, onNavClick);
}
private function onNavOver(e:MouseEvent):void
{
TweenLite.to( e.currentTarget, 0, { tint:0xffffff } );
}
// nav rollout
private function onNavOut(e:MouseEvent):void
{
TweenLite.to( e.currentTarget, 0, { tint:0xffff00 } );
}