Tagged:cursor

Replacing the buttonMode hand cursor icon in FP 10.2+

Thought I’d share a little snippet from a project I worked on a month or so back – it takes advantage of the Mouse.cursor property introduced in Flash Player 10.2. MouseCursor, as you may know, beats the ass of previous cursor replacement solutions because it modifies the OS pointer, and thus is not at the whim of slow stage framerates or the various other painful snags that come with faking it; hiding the system cursor and manually positioning a graphic in its place.

There’s a decent amount of documentation out there on how to use it, but my specific requirement was to replace the cursor only when mousing over buttons and other clickable items. I wanted it to show up wherever the hand cursor would normally appear, across a whole project.

This is the kind of behaviour I needed:

catswitch
Click to run the example. The buttons show a custom mouse-over cursor only when they’re enabled.

Now, if you look at the Adobe docs on the topic, you can register a cursor by passing in a String constant and a MouseCursorData object like so:

Mouse.registerCursor("PointerCursor", mouseCursorData);

Additionally, you can spy a number of static String constants inside the MouseCursor class – such as IBEAM and HAND – which certainly made me wonder whether I could do something like the following:

Mouse.registerCursor(MouseCursor.HAND, mouseCursorData);

But as you may have guessed, this does not work as hoped; it’s not possible just to override the graphic used for the hand cursor.

So here’s my workaround for achieving this kind of behaviour, which I opt to keep inside a centralised class (the filthy singleton). I’ve set up a git repository for the full example, but here’s the crux (a few extra functions aren’t shown here):

public function buttonMode_set(target:Sprite, buttonMode:Boolean):void {
	
	//If the dictionary hasn't been initialised, do so and set up the custom mouse cursor//
	if (! _buttonModeDictionary) {
		_buttonModeDictionary = new Dictionary();
		var pointerCursor = new MouseCursorData();
		pointerCursor.data = new <BitmapData>[new Cursor32Shadow()];
		pointerCursor.frameRate = 0;
		pointerCursor.hotSpot = new Point(3, 1);
		Mouse.registerCursor("PointerCursor", pointerCursor);
	}
	
	//Check whether the Sprite has already been registered for use//
	if (target in _buttonModeDictionary) {
		
		//Only add/remove listeners if the buttonMode state is actually changing//
		if (_buttonModeDictionary[target] != buttonMode) {
			_buttonModeDictionary[target] = buttonMode;
			if (buttonMode) {
				target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, true);
			} else {
				target.removeEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.removeEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, false);
			}
		}
		
	//Only add the new entry if pseudo-buttonMode is being turned on//
	} else if (buttonMode) {
		
		_buttonModeDictionary[target] = true;
		target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
		target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
		mouseOver_check(target, true);
	}
}

And then it can be turned on and off for each object like this:

buttonMode_set(button1, true);	//button1.buttonMode = true;
buttonMode_set(button2, false);	//button2.buttonMode = false;

The full example can be downloaded from github here: https://github.com/hanenbro/CursorDemo

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.