Best Practices for Suspending Buttons in Actionscript 3

Question

Ok, so my first question here was so well answered I figure I'd try my luck at this little query.

Is there a better way to set up a flash project with lots of navigation than having to do this?:

bottomNav.contact_btn.addEventListener(MouseEvent.CLICK, changeContent);
bottomNav.portfolio_btn.addEventListener(MouseEvent.CLICK, changeContent);
bottomNav.news_btn.addEventListener(MouseEvent.CLICK, changeContent);
bottomNav.inspiration_btn.addEventListener(MouseEvent.CLICK, changeContent);
bottomNav.home_btn.addEventListener(MouseEvent.CLICK, changeContent);


secondaryNav.about_btn.addEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.services_btn.addEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.home_btn.addEventListener(MouseEvent.CLICK, changeContent);

secondaryNav.inspiration_btn.addEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.inspiration_archive_btn.addEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_showcase_btn.addEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_archive_btn.addEventListener(MouseEvent.CLICK, changeContent);

and if not, there are always moments between animations where the last thing you want to happen is for someone to click a button and have another function fire off in the middle of your beautiful wipe between two scenes. You end up with (or at least I do) countless errors and a pissed off client.

What do you do to suspend all of those listeners without adding a function to the end of every other function to temporarily disable them?

Please, if someone has the magic practice, I'd love to hear it.

in regards to how I do it I've been writing something like this:

function suspendBtns():void
{
secondaryNav.inspiration_archive_btn.removeEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_showcase_btn.removeEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_archive_btn.removeEventListener(MouseEvent.CLICK, changeContent);

}

and would add suspendBtns(); to the end of every function that would transition between clips.
then obviously another function called enactBtns() or something like that.

I tried once just adding one event listener to the stage:

stage.addEventListner(MouseEvent.CLICK, doFunction);

and then the function would find the name of the btn like:

function doFunction(e:Event):void{

 switch(e.target.name){     
    case"home_btn":
    doThis();
    break;

    case"away_btn":
    doThat();
    break;

  }

}

and so on. That didn't work so hot, it felt as though I had to click every button twice to get it to work.

And I still had to suspend the event listener in between actions.

Thanks in advance for your thoughts.

Answer 1

Perhaps to save some typing you could push all the buttons into an array. Then, for when you are adding or removing listeners you could loop through each element on the array with a simple for loop?

Answer 2

A simple boolean flag, such as ignoreUI, would work as well. In the event code, check ignoreUI to see if the function should immediately return. That way nothing would occur when the user clicked a button, a drop-down, etc. if it should not do so.

Answer 3

I see this bug so often on flash sites and I think it should be considered a bug.

I wouldn't agree with the Boolean flag, because even with that Boolean check, the rollover and rollout effects would work (and I dont like them to be enabled when a transition is happening).

What I do in my flash projects is that all my buttons extend a SimpleButton class with public functions like and . Within those public functions I assign and remove all rollover/out/press/release listeners so those functions become available to all buttons.

Plus, when dispatching events of click etc, I extend Event class and pass on an extra argument to parent class to let it know which button was clicked. That parent class can keep track of which button is active Now and which was the Last button, in variables like activeButton_New and activeButton_Last to store there numeric value.

And, yes they all should be within an array so it fairly becomes easy to assign/remove them, something like this:

for ( var i:int = 0; i < this.arrayForButtons.length; i ++ ) { SimpleButton ( this.arrayForButtons[ i ] ).removeListeners (); }

and vice versa for assignment of listeners. Hope this helps.

Answer 4

An alternative to removing listeners, to temporally disable buttons, like in the suspendBtns example function above, is to set mouseEnabled to false.

so instead of:

function suspendBtns():void
{
secondaryNav.inspiration_archive_btn.removeEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_showcase_btn.removeEventListener(MouseEvent.CLICK, changeContent);
secondaryNav.portfolio_archive_btn.removeEventListener(MouseEvent.CLICK, changeContent);
}

... you would have:

function suspendBtns():void
{
secondaryNav.inspiration_archive_btn.mouseEnabled = false;
secondaryNav.portfolio_showcase_btn.mouseEnabled = false;
secondaryNav.portfolio_archive_btn.mouseEnabled = false;
}

That way, the suspendBtns function won't need to know what listeners to remove, and correspondingly to be added again when the buttons are to be enabled again. It will also disable other MouseEvent's, like MOUSE_OVER and so on.

And I'd also recommend storing the buttons in an array, as suggested by Allan and Tahir.