flex 3 programmatically enlarging a flex buttons hitArea

Question

Does anybody know how to programmatically enlarge a flex 3 button's hitArea. Is there some function that i can override? There is no function in the button class called hitArea.

WHat i have done is, i have created a programmaticskin for a button. The form of the skin consists out four arrows. In between the arrows there is nothing (meaning transparant). Because of the way the skin is shaped, it's difficult to click on the button. The skin has alter the buttons hitArea. What i'm looking for is a way to enlarge the hitArea and alter the hitArea shape in to an square. (the hit area must ofcourse still be invisble).

Does anybody know how to accomplish this?

Thanks

DJ

Answer 1

The way I've handled this in the past is to fill the rect with a nearly invisible fill by setting the alpha to 0.001 (or something similar). That way the button thinks the area is drawn and therefore hittable, but it's too transparent for the user to see. It's cute/hackish, but it works. :)

Answer 2

For every Object that extends UIComponent (like your button) you can assign a Sprite as a custom hitarea. I would just add a creationComplete Handler to the button and draw a rectangular sprite (width&height equal to button's width and height) and then assign it as the buttons's new hitarea.

Answer 3

I haven't been able to test this with Flex - but here's a way to programatically extend a button's dimension for a normal SimpleButton - which is what a FLA file's button is.

Hopefully you can use a similar way for Flex.

Usage:

// extends the hit area of 'Add' button in the addToCart panel
extendButtonHitArea(addToCartPanel.btnAdd, 10);

// extends the hit area of 'Add' button to the entire 'Add to cart panel' + 10px
extendButtonHitArea(addToCartPanel.btnAdd, 5, addToCartPanel);

Function:

Note: testMode is set to true by default. You'll want to change this to false.

 public function extendButtonHitArea(button:SimpleButton, extendBy:int, 
                          hitSprite:DisplayObject=null, testMode:Boolean=true)
    {
        if (hitSprite == null) {
            hitSprite = button;
        }

        var bounds:Rectangle = hitSprite.getBounds(button);

        // create hit area - extended by 'extendBy' all the way aroudn
        var hitArea:Sprite = new Sprite();
        hitArea.graphics.beginFill(0xCCFF00, .5);
        hitArea.mouseEnabled = false;
        hitArea.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

                    // set hit state of button to our new sprite
        button.hitTestState = hitArea;

        // in test mode add an outline to the 'upState'
        if (testMode) 
        {
            var hitAreaVisual:Sprite = new Sprite();
            hitAreaVisual.graphics.lineStyle(1, 0xCCFF00, .7);
            hitAreaVisual.mouseEnabled = false;
            hitAreaVisual.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

            (button.upState as DisplayObjectContainer).addChild(hitAreaVisual);
        }
    }

Answer 4

This isn't specific to buttons - but for doing this for the general case you can use the following function to extend a hitArea.

Edit: I just added a second answer specific to buttons that uses the proper hitState instead of hitArea.

---

This will find the bounds of an object and create a hit area larger than the sprite by the 'extendBy' amount all the way around. Only really works for square objects - but generally this should work well. For more complex hit areas you'll need something more complex if you want to do it programatically.

addHitAreaToParent=true 
adds the hit area to the parent (so child bounds don't change)

addHitAreaToParent=false (default) 
adds the hit area to the sprite itself. the bounds of this sprite will change, 
but if the sprite is moved inside its parent container the hit area will move too

Hope this helps!

 public function extendHitArea(symbol:Sprite, extendBy:int, addHitAreaToParent:Boolean=false, visibleHitArea:Boolean=true) {

        // get bounds of existing sprite
        var bounds:Rectangle = addHitAreaToParent ? symbol.getBounds(symbol.parent) : symbol.getBounds(symbol);

        // create hit area - extended by 'extendBy' all the way aroudn
        var hitArea:Sprite = new Sprite();
        hitArea.graphics.beginFill(0xCCFF00, .5);
        hitArea.mouseEnabled = false;
        hitArea.graphics.drawRect(bounds.x - extendBy, bounds.y - extendBy, bounds.width + (extendBy * 2), bounds.height + (extendBy * 2));

        // add hit area either to the sprite itself (default) - or to the parent
        (addHitAreaToParent ? symbol.parent : symbol).addChild(hitArea);
        symbol.hitArea = hitArea;

        // hide the hit area (by default)
        hitArea.visible = visibleHitArea;

    }