Question

I’m trying to make it so when you press down on a button, the hitbox of the button gets bigger, so if the user slides the mouse off the edge of the already held down button, it requires it to travel further before it no longer counts for clicking.

This is to be used on a touch screen device, where users will go to click, but slide their finger before releasing, which won’t finish the click event.

I’m using the standard flash buttons (flash.display.SimpleButton), so ideally would like something that works with them – I keep looking at the hitTestState as the solution, but nothing I’m trying works.

Let’s say the button starts as size 50, 50

When a user triggers a mouse_down event, I’d like it to become 100 by 100, centred as a hitbox (not the actual button, just the hit) – then on click, or release, it’ll fade back to the 50,50 size.

Any ideas?

Thanks
John

Answer 1

Replace your button with a movie clip. There are any number of ways to do it, but here’s one structure that works.

A smaller hit area in the up and over frames:

With a larger area in the down frame:

(Obviously you would make the hit area zero alpha, but I’ve coloured it so you can see what’s happening.)

Then all you need is a very straightforward bit of code. Given an instance on the stage called MyButton:

import flash.display.MovieClip;
import flash.events.MouseEvent;

var MyButton:MovieClip;
MyButton.buttonMode = MyButton.useHandCursor = true;

function handleMouseOver($e:MouseEvent):void
{
    MyButton.gotoAndStop("Over");
}

function handleMouseDown($e:MouseEvent):void
{
    MyButton.gotoAndStop("Down");
}

function handleMouseUp($e:MouseEvent):void
{
    MyButton.gotoAndStop("Up");
}

MyButton.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
MyButton.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
MyButton.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);

If you want to re-use this several times, it can easily be refactored into a class which your MovieClips can extend.

Hope this helps.