SimpleButton and Events in AS3

The Sprite as a button trick from the menu tutorials works, but you end up wiring every hover and every press by hand, one listener at a time, forever. SimpleButton is the built in that already knows what a button is supposed to do. You hand it four faces and it quietly manages the rest, which is the correct amount of work for a rectangle that lights up.

package {
    import flash.display.Sprite;
    import flash.display.SimpleButton;
    import flash.events.MouseEvent;

    public class ButtonDemo extends Sprite {
        public function ButtonDemo() {
            var button:SimpleButton = new SimpleButton(
                makeFace(0x2b2b2b),   // up      (resting)
                makeFace(0x3d7f7a),   // over    (hover)
                makeFace(0x1f5c58),   // down    (pressed)
                makeFace(0x000000)    // hitTest (clickable region)
            );
            button.x = 40;
            button.y = 40;
            addChild(button);

            button.addEventListener(MouseEvent.CLICK, onClick);
        }

        private function makeFace(color:uint):Sprite {
            var face:Sprite = new Sprite();
            face.graphics.beginFill(color);
            face.graphics.drawRoundRect(0, 0, 150, 44, 12, 12);
            face.graphics.endFill();
            return face;
        }

        private function onClick(event:MouseEvent):void {
            trace("Clicked.");
        }
    }
}

The four faces

A SimpleButton takes four display objects, and the order is the whole idea: up, over, down, and hitTest. Up is the resting state. Over is hover. Down is pressed. The runtime swaps between them automatically, so you do not write a single ROLL_OVER or MOUSE_DOWN listener for the visuals. It just happens, the way it always should have.

The fourth face, hitTest, is the sleeper. It defines the clickable region and it is almost always invisible. Make it slightly larger than the visible button, because users are not surgeons, fingers are not styluses, and a button that only responds when clicked dead center is a button people quietly decide is broken. Generosity in the hit area is free and nobody ever notices it, which is exactly what good interface work feels like.

Why CLICK and not MOUSE_DOWN

Use MouseEvent.CLICK and resist the urge to reach for MOUSE_DOWN. Down fires the instant the mouse button goes down, so a user can press, panic, drag the cursor off the button, and release somewhere safe, except you already fired the event and did the thing. CLICK waits for a full press and release on the same target. It is the difference between a button and a landmine.

SimpleButton is deeply unfashionable now, and that is fine, because the state model it hardcoded (idle, hover, active, and a separate target region) is the exact model every CSS hover and active pseudo class is still quietly running today. The runtime died in 2020. The mental model did not get the memo, and it never will.