Question

This is probably really simple but i cant figure it out. Take a look at the code, i moved 2 instances of this button class (CategoryButton) onto the stage. As you can see when you click a button it should gotoAndPlay(3), record itself as the selectedBtn. When the second button is clicked, it should re-enable the listener for the first button, remove listeners for itself and set itsself as the newly selected button. Unfortunately this code is not doing that. When i click on the first button it moves the button to frame 3, and removes its listeners. I click the second button and it does the same thing, except it does not add listeners for the first button again.

Im new to AS3, any help is greatly appreciated, thank you.

package classes {
    import flash.events.MouseEvent;
    import flash.display.MovieClip;
    import flash.display.Sprite;

    public class CategoryButton extends MovieClip{

        //this stores the currently selected button
        public var selectedBtn:Object;

        public function CategoryButton() {
            // listen for over
            addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);

        }

        protected function rolloverToggle(event:MouseEvent):void {
            gotoAndStop(2);
            removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
            addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
            addEventListener(MouseEvent.CLICK, buttonToggle);
        }

        protected function rolloutToggle(event:MouseEvent):void {
            gotoAndStop(1);
            removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
            addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
        }

        protected function buttonToggle(event:MouseEvent):void {
            if(selectedBtn) {
                trace(selectedBtn.name)
                selectedBtn.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
                selectedBtn.gotoAndStop(1);

                event.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
                event.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
                event.currentTarget.removeEventListener(MouseEvent.CLICK, buttonToggle);

                event.currentTarget.gotoAndStop(3);

                selectedBtn = event.currentTarget;
            }else {

                selectedBtn = event.currentTarget;
                trace(selectedBtn.name);
                selectedBtn.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
                selectedBtn.removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
                selectedBtn.removeEventListener(MouseEvent.CLICK, buttonToggle);

                selectedBtn.gotoAndStop(3);
            }
        }

    }

}

Answer 1

How i fixed it:

1. Button A is clicked (A is set as selectedBtn, listeners disabled, state changed to frame 3)
2. Button B is clicked (selectedBtn’s listener is reset, state changed, selectedBtn is set to Button B)

This is where the problem was, A’s listener was set as follows:

addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);

This was causing Button B to come alive again. The fix was to simply change the listener to the currentTarget and also the gotoAndStop, for the over and out states.

event.currentTarget.gotoAndStop(1);
event.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);


package classes {
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;

public class CategoryButton extends MovieClip{

    //this stores the currently selected button
    public static var selectedBtn:Object;

    public function CategoryButton() {
        // listen for over
        addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
        trace("called");

    }

    protected function rolloverToggle(event:MouseEvent):void {
        event.currentTarget.gotoAndStop(2);
        event.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
        event.currentTarget.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
        event.currentTarget.addEventListener(MouseEvent.CLICK, buttonToggle);
    }

    protected function rolloutToggle(event:MouseEvent):void {
        event.currentTarget.gotoAndStop(1);
        event.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
        event.currentTarget.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
    }

    protected function buttonToggle(event:MouseEvent):void {
        if(selectedBtn) {
            trace(selectedBtn.name);
            selectedBtn.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
            selectedBtn.gotoAndStop(1);

            event.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
            event.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
            event.currentTarget.removeEventListener(MouseEvent.CLICK, buttonToggle);

            event.currentTarget.gotoAndStop(3);

            selectedBtn = event.currentTarget;
        }else {

            selectedBtn = event.currentTarget;
            selectedBtn.removeEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
            selectedBtn.removeEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
            selectedBtn.removeEventListener(MouseEvent.CLICK, buttonToggle);

            selectedBtn.gotoAndStop(3);

        }
    }

}

}