I’ve made a Navigation.as class that generates a tabbed nav bar. The class builds itself out using a graphical tab class, NavTab.as. I have everything working, except for disabling the mouse events on an active tab.
Here are the tab creation function and event handlers for the NavTab.as instances inside Navigation.as:
private function renderNav():void
{
trace(":: Navigation.renderNav() ::");
var _nav_tab:NavTab;
var _nav_shift:Number = 0;
for (var i:uint = 0; i < _labelData.length; i++)
{
// create new instance of tab graphic sprite
_nav_tab = new NavTab(_labelData*.toUpperCase(), _actColorTop, _actColorBottom, _inactColorTop, _inactColorBottom);
// give each instance an incremental instance name
_nav_tab.name = "nav_tab_" + i;
// shift each new instance to the right to create overlapping tabs
_nav_tab.x += _nav_shift;
// incremement the cumulative x shift until you reach the last tab
if (i < _labelData.length)
{
_nav_shift += TAB_SPACING_X;
}
// set the sprite button mode to true
_nav_tab.buttonMode = true;
_nav_tab.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
_nav_tab.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
_nav_tab.addEventListener(MouseEvent.CLICK, onMouseClick);
// add the tab instance to the display list
addChild(_nav_tab);
}
// dispatch NAV_COMPLETE event to Shell.as; settle bubbling to true
dispatchEvent(new Event(NAV_COMPLETE, true));
}
public function onMouseOver(e:MouseEvent):void
{
trace(":: Navigation.onMouseOver() ::");
// show the active background on the NavTab instance
e.currentTarget.getChildByName("background_active").visible = true;
}
public function onMouseOut(e:MouseEvent):void
{
trace(":: Navigation.onMouseOut() ::");
// hide the active background on the NavTab instance
e.currentTarget.getChildByName("background_active").visible = false;
}
public function onMouseClick(e:MouseEvent):void
{
trace(":: Navigation.onClick() ::");
if (currentTab)
{
lastTab = currentTab;
}
currentTab = e.currentTarget.name;
trace(":: Navigation.onClick() : currentTab : " + currentTab + " ::");
trace(":: Navigation.onClick() : lastTab : " + lastTab + " ::");
dispatchEvent(new Event(NAV_CLICK, true));
}
How do I disable a given tab once I’ve clicked on it? With MovieClips, I had the “enabled” property, but NavTab.as extends Sprite, as does Navigation.as. I tried doing this in the onMouseClick event handler, but I still got rollover events:
I don’t know anything about that mouseChildren property to be honest. But it would be pretty simple to remove the eventlisteners on click of that tab, and then just add them again if you want to return functionality to the tab. Also removing eventListeners is good practice as they are one of the main causes for memory leaks.
I found a solution to the problem noted above. I would appreciate any critique of the method I used to resolve it.
Basically, I threw all the repetitive NavTab.as instances into an array – soooo much easier to reference things that way (thanks to those who asked that question elsewhere). Then I came up with this onMouseClick event handler:
private function onMouseClick(e:MouseEvent):void
{
trace(":: Navigation.onClick() ::");
// had to do all this to make the buttons NOT cancel out the visibility of the "background_active" sprite
e.currentTarget.mouseEnabled = e.currentTarget.mouseChildren = false;
e.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
e.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
e.currentTarget.getChildByName("background_active").visible = true;
for (var i:uint = 0; i < _navItems.length; i++)
{
if (e.currentTarget.name != _navItems*.name)
{
_navItems*.mouseEnabled = _navItems*.mouseChildren = true;
_navItems*.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
_navItems*.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
_navItems*.getChildByName("background_active").visible = false;
}
}
if (currentTab)
{
lastTab = currentTab;
}
currentTab = e.currentTarget.name;
trace(":: Navigation.onClick() : currentTab : " + currentTab + " ::");
trace(":: Navigation.onClick() : lastTab : " + lastTab + " ::");
dispatchEvent(new Event(NAV_CLICK, true));
}
Basically – had to do BOTH the removal of the event listeners AND the mouse disabling. Why is that?
