Flex Examples

A simple example of creating auto-repeat Button controls that dispatch the buttonDown event as long as the user is pressing the button.

Note that in the following example we listen for the buttonDown event and not the click event. The click event only gets dispatched when the user releases the mouse cursor over the Button control.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            private function moveLeft(target:UIComponent):void {
                target.x = Math.max(target.x - 10, 0);
            }

            private function moveRight(target:UIComponent):void {
                target.x = Math.min(target.x + 10, Application.application.width - target.width);
            }
        ]]>
    </mx:Script>

    <mx:Box id="box" width="100" height="100" backgroundColor="red" />

    <mx:HBox>
        <mx:Button label="left" autoRepeat="true" buttonDown="moveLeft(box)" />
        <mx:Button label="right" autoRepeat="true" buttonDown="moveRight(box)" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

You can also control the amount of delay and the repeat interval between buttonDown events by setting the repeatDelay and repeatInterval styles on the Button, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            private function moveLeft(target:UIComponent):void {
                var t1:int = target.x - 10;
                var t2:int = 0;
                target.x = Math.max(t1, t2);
            }

            private function moveRight(target:UIComponent):void {
                var t1:int = target.x + 10;
                var t2:int = Application.application.width - target.width;
                target.x = Math.min(t1, t2);
            }
        ]]>
    </mx:Script>

    <mx:Box id="box" width="100" height="100" backgroundColor="red" />

    <mx:HBox>
        <mx:Button id="leftButton"
                label="left"
                autoRepeat="true"
                repeatDelay="{button_repeatDelay.value}"
                repeatInterval="{button_repeatInterval.value}"
                buttonDown="moveLeft(box)" />

        <mx:Button id="rightButton"
                label="right"
                autoRepeat="true"
                repeatDelay="{button_repeatDelay.value}"
                repeatInterval="{button_repeatInterval.value}"
                buttonDown="moveRight(box)" />
    </mx:HBox>

    <mx:Form>
        <mx:FormItem label="repeatDelay ({button_repeatDelay.value}):">
            <mx:HSlider id="button_repeatDelay"
                    minimum="50"
                    maximum="950"
                    value="100"
                    snapInterval="50"
                    tickInterval="100"
                    dataTipPrecision="0" />
        </mx:FormItem>
        <mx:FormItem label="repeatInterval ({button_repeatInterval.value}):">
            <mx:HSlider id="button_repeatInterval"
                    minimum="10"
                    maximum="910"
                    value="10"
                    snapInterval="10"
                    tickInterval="100"
                    dataTipPrecision="0" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.