A FlashPunk World that shows how to make a simple button as well as Text manipulation and some fun tricks.

ButtonWorld.as

package  
{
	import flash.display.*;
	import flash.geom.*;
	import net.flashpunk.*;
	import net.flashpunk.graphics.*;
	import net.flashpunk.utils.*;
	
	/**
	 * A FlashPunk World that shows how to make a simple button as well as Text manipulation and some fun tricks.
	 * @author Zachary Lewis ([email protected]) 
	 */
	public class ButtonWorld extends World 
	{
		private var buttonImage:Image;
		private var buttonText:Text;
		private var fullButton:Graphiclist;
		private var button:Entity;
		private var textArea:Text;
		private const hoverColor:uint = 0xffff3366;
		private const clickColor:uint = 0xffc4274e;
		private var clickStarted:Boolean = false;
		private var clicks:uint = 0;
		
		public function ButtonWorld() 
		{
			// Create a simple button image with a BitmapData
			var bmd:BitmapData = new BitmapData(128, 32);
			
			// Give it a nice border. Cute!
			bmd.fillRect(new Rectangle(2, 2, 124, 28), 0xffdddddd);
			bmd.fillRect(new Rectangle(4, 4, 120, 24), 0xffffffff);
			
			// Create the Image for the button's background.
			buttonImage = new Image(bmd);
			
			// Create our button text.
			buttonText = new Text("Press me!", 0, 6, { align:"center", color:0xff444444, width:buttonImage.width } );
			
			// Compile our completed button graphic by adding images to our Graphiclist, bottom-up.
			fullButton = new Graphiclist(buttonImage, buttonText);
			
			// Create a text area.
			textArea = new Text("The button has not been pressed.", 0, 0, { align:"center" } );
			
			super();
		}
		
		override public function begin():void 
		{
			// Save our button image as an entity to allow us to do collision checking against it.
			button = addGraphic(fullButton, 0, FP.width / 2 - buttonImage.width / 2, FP.height / 2 - 64);
			
			// Set a Hitbox for our button to be our hit zone.
			button.setHitbox(buttonImage.width, buttonImage.height, 0, 0);
			
			// Add our text to the screen.
			addGraphic(textArea, 0, FP.width / 2 - textArea.width / 2, FP.height / 2);
			
			super.begin();
		}
		
		override public function update():void 
		{
			// Check to see if the mouse is touching our button.
			if (button.collidePoint(button.x, button.y, Input.mouseX, Input.mouseY))
			{
				// The mouse is hitting the button. Show hover color.
				if (!clickStarted)
				{
					buttonImage.color = hoverColor;
					buttonText.color = 0xff360208;
				}
				else
				{
					buttonImage.color = clickColor;
					buttonText.color = 0xff350a15;
				}
				
				// Time for our input handling.
				// We will use a two-part click system:
				// clickStarted == false	Mouse not started the click.
				// clickStarted == true		Mouse has been pressed on the button.
				// This will let us check for a click and release on the button, even if the user leaves the button area.
				if (Input.mousePressed)
				{
					// Start our click.
					clickStarted = true;
				}
				else if (Input.mouseReleased && clickStarted)
				{
					// We have successfully clicked!
					clickStarted = false;
					onButtonClick();
				}
			}
			else
			{
				// The mouse is not hovering over our button. Stop coloring it.
				buttonImage.color = 0xffffffff;
				buttonText.color = 0xff444444;
				if (Input.mouseReleased)
				{
					// The mouse was released outside our button.
					// The click has not been started.
					clickStarted = false;
				}
			}
			
			super.update();
		}
		
		/**
		 * Our actual button functionality. This function just increments a click counter and updates our text field.
		 */
		private function onButtonClick():void
		{
			// Increment our click counter.
			clicks++;
			
			// Update our text area (and do some silly inline if shit to make me not sound stupid).
			var s:String = (clicks != 1) ? "s" : "";
			textArea.text = "The button has been clicked " + clicks + " time" + s + ".";
		}
	}
}