Customizable ActionScript BitmapButton

BitmapButton.as

import flash.display.Sprite;
import flash.display.Bitmap;
import flash.events.MouseEvent;

/**
 * A reusable Button class that can be skinned by Bitmaps
 */
public class BitmapButton extends Sprite {
	private var defaultBitmap:Bitmap = new Bitmap();
	private var onHoverBitmap:Bitmap = new Bitmap();
	private var data:Object = null;
	
	public function BitmapButton(defaultBitmap:Bitmap, onHoverBitmap:Bitmap) {
		this.defaultBitmap = defaultBitmap;
		this.onHoverBitmap = onHoverBitmap;
		
		addChild(onHoverBitmap);
		addChild(defaultBitmap);
		onHoverBitmap.visible = false;
		defaultBitmap.visible = true;
		
		this.width = defaultBitmap.width;
		this.height = defaultBitmap.height;

		addEventListener(MouseEvent.MOUSE_OVER, mouseOver_EventHandler);
		addEventListener(MouseEvent.MOUSE_OUT, mouseOut_EventHandler);
	}
	

	/**
	 * The data Object field can store whatever you might need to retrieve
	 *  when the button receives a Click or any other event.
	 */
	public function setData(data:Object) {
		this.data = data;
	}
	public function getData():Object {
		return this.data;
	}
	

	/**
	 * The class handles its own MouseOver and MouseOut so that it can
	 *   swap the Bitmaps in and out.
	 */
	protected function mouseOver_EventHandler(evt:MouseEvent) {
		this.defaultBitmap.visible = false;
		this.onHoverBitmap.visible = true;
	}
	protected function mouseOut_EventHandler(evt:MouseEvent) {
		this.defaultBitmap.visible = true;
		this.onHoverBitmap.visible = false;
	}
}

UseBitmapButton.as

import BitmapButton;

/**
 * Renders the "add comment" button bitmaps
 */
function renderAddCommentBitmap(myImportantData:Object) {
	// The Sprite will be our temporary drawing surface
	var tempSprite:Sprite = new Sprite();

	// The TextField will render the button text
	var tempTextLabel:TextField = new TextField();
	var btnColor:uint = 0x38B0DE;
	
	tempTextLabel.selectable = false;
	tempTextLabel.text = "add comment";
	tempTextLabel.width = 120
	tempTextLabel.height = 50;
	tempSprite.addChild(tempTextLabel);
	
	var myTextFormat:TextFormat = new TextFormat();
	myTextFormat.font = "Verdana";
	myTextFormat.align = "center";
	myTextFormat.size = 25;
	myTextFormat.color = 0xffffff;
	myTextFormat.bold = true;
	tempTextLabel.setTextFormat(myTextFormat);

	// Render the default button state with a dark ringed border
	tempSprite.height = 1.2*tempTextLabel.textHeight;
	tempSprite.width = 1.5*tempTextLabel.textWidth;
	tempSprite.scaleX = tempSprite.scaleY = 1.0;
	tempSprite.graphics.beginFill(btnColor - 0x101010, 1.0);
	tempSprite.graphics.drawRoundRect(0,0,tempSprite.width, tempSprite.height, 5);
	tempSprite.graphics.endFill();
	tempSprite.graphics.beginFill(btnColor, 1.0);
	tempSprite.graphics.drawRoundRect(2,2,tempSprite.width-4, tempSprite.height-4, 5);
	tempSprite.graphics.endFill();
	
	// Render the Sprite surface into a BitmapData var
	var defaultStateBitmapData:BitmapData = new BitmapData(tempSprite.width, tempSprite.height, true, 0x000000);
	defaultStateBitmapData.draw(tempSprite);
	
	
	// Now generate a lighter BitmapData for the onHover version
	//   Since we've already saved the first BitmapData, we can re-use the Sprite
	tempSprite.graphics.clear();
	tempSprite.graphics.beginFill(btnColor - 0x101010, 1.0);
	tempSprite.graphics.drawRoundRect(0,0,tempSprite.width, tempSprite.height, 5);
	tempSprite.graphics.endFill();
	tempSprite.graphics.beginFill(btnColor + 0x202020, 1.0);
	tempSprite.graphics.drawRoundRect(2,2,tempSprite.width-4, tempSprite.height-4, 5);
	tempSprite.graphics.endFill();
	
	// Again, render the Sprite onto a BitmapData
	var onHoverStateBitmapData:BitmapData = new BitmapData(tempSprite.width, tempSprite.height, true, 0x000000);
	onHoverStateBitmapData.draw(tempSprite);

	// Clean-up the temporary helper objects
	tempSprite.removeChild(tempTextLabel);
	tempTextLabel = null;
	tempSprite = null;
	myTextFormat = null;
	
	// Link the BitmapData to a Bitmap var
	var defaultBitmap:Bitmap = new Bitmap();
	defaultBitmap.bitmapData = defaultStateBitmapData;

	// Same for the onHover/Selected version
	var onHoverBitmap:Bitmap = new Bitmap();
	onHoverBitmap.bitmapData = onHoverStateBitmapData;

	// Now instantiate the BitmapButton var and pass in the two button state Bitmaps
	var addCommentButton:BitmapButton = new BitmapButton(defaultBitmap, onHoverBitmap);

	// Stuff whatever data Object you need to into the BitmapButton
	addCommentButton.setData(myImportantData);

	// Wire it up to come back here when it's clicked
	addCommentButton.addEventListener(MouseEvent.CLICK, addCommentButton_MouseClick_EventHandler);

	// Add the BitmapButton to the parent object or the stage or wherever
	addChild(addCommentButton);
}

function addCommentButton_MouseClick_EventHandler(evt:Event) {
	// Retrieve the BitmapButton from the Event
	var addCommentButton:BitmapButton = evt.target as BitmapButton;

	// Retrieve the data Object that you stuffed into the BitmapButton!
	var myImportantDataIsBack:SomeDataType = addCommentButton.getData() as SomeDataType;
	
	// Do whatever you need to do to respond to the button being clicked
	myImportantDataIsBack.doSomething();
}

UseBitmapButton_onClick_snippet.as

function addCommentButton_MouseClick_EventHandler(evt:Event) {
	// Retrieve the BitmapButton from the Event
	var addCommentButton:BitmapButton = evt.target as BitmapButton;

	// Retrieve the data Object that you stuffed into the BitmapButton!
	var myImportantDataIsBack:SomeDataType = addCommentButton.getData() as SomeDataType;

	// Do whatever you need to do to respond to the button being clicked
	myImportantDataIsBack.doSomething();
}

UseBitmapButton_snippet.as

var addCommentButton:BitmapButton = new BitmapButton(defaultBitmap, onHoverBitmap);
addCommentButton.setData(myImportantData);
addCommentButton.addEventListener(MouseEvent.CLICK, addCommentButton_MouseClick_EventHandler);

addChild(addCommentButton);