Buttons & Menus Part 1: A Simple Centered Button

So I’ve seen a lot of crappy buttons out there. So that’s going to change now! So here comes my tutorial on how to change a (unusually) bad button, to a good button. See them both below. The left side shows how the button looks before compiling (the stroke is just there for your sake so you can see where the textfield is), and the right side is how it looks and works after compiling.

CAUTION. While using this way of handeling menus in projects, I found it a little annoying, and I will look into making a re-write when I get the time for it.

So start of making a MovieClip, and inside that make a stroke like this – make sure you aling it to center after:

You can do that with the rectangel tool and setting the rectangel options like this:

Then we’re going to make a textfield that is way out of propotions like this:

So now we’ve made the same button as I showed before :) Here it is again:

As you might notice it’s quite hard to push the upper ‘bad’ button, actually you can only push it when you’re hitting it here:

That not so good is it?
No! So there is some things we can do in designer mode:
Resize the textfield like this:

Turn off the selectable:

Make an invisible fill that people can click on:
First fill the stroke with some kind of visible colour, I picked green:

Then make a new layer called hit:

Move it down so it is lowest:

Then select the fill and cut the fill (Ctrl+x) and paste it in place in the new layer (Ctrl+Shift+v), and lastly change the alpha to 0:

So, let try it out:

Did all your changes work? Not quite. Now we can also click the stroke at the bottom, but we can’t click the middle of the buttom. That not really good. So, now it’s time to add some actionscript (YAY!).

Make a new class called CenterButton and let it extend MovieClip – because our symbol is a movieclip, our class needs to extend movieclip for now it would not matter, but later on we’re gonna use the CenterButton class as base class, and then it matters. Also export the movieclip you made as CenterButton. Mine looks like this:

package  
{
	import flash.display.MovieClip;
 
	public class CenterButton extends MovieClip
	{
		public function CenterButton() 
		{
 
		}
	}
}

So that’s a start. Now we need to refer to our textfield, we could do that by making an instance name like this:

But we’re not going to do that today, because we’re smart! So we’re going to import the TextField class as well as making a variable for it:

package  
{
	import flash.display.MovieClip;
	import flash.text.TextField;
 
	public class CenterButton extends MovieClip
	{
		protected var buttonText:TextField;
 
		public function CenterButton() 
		{
			for (var i:int = 0; i < this.numChildren; i++)
			{
				if (this.getChildAt(i) is TextField)
				{
					buttonText = (this.getChildAt(i) as TextField);
					break;
				}
			}
		}
 
	}
}

The protected keyword just means that only this class and any classes we would make that are extending this class can acces this variable!
The script in the creator function is checking all the display objects in our movieclip, and when it finds a textfield it sets the buttonText variable. The reason it’s smart is that the user doesn’t have to give his textfield an instance every time that we want to use this.

Now that we can acces the textfield, let’s make two changes to the creator funtion, add this:

			this.buttonMode = true;
 
			buttonText.mouseEnabled = false;

As we saw before, disabeling the selecable proprety on the textfield wasn’t enough. So we need so disable all mouse interaction with it.
Also, we can make the little hand show up with the buttonMode, so now it looks like this:

So now we could change the alingment in the designer mode to center the textfield completely and make everything look nice, but why not let actionscript handle that for us?
Before we start, make sure that the behavior of the textfield is set to ‘single line’, like this:

Why do we need to do this? Because we’re gonna call the autoSize property, and it only works with single line, don’t know why it’s like that, but we just need to remember it (And it’s not enough to set buttonText.multiline = false – at least it didn’t work for me)
anyway, add this to your constructor code:

			buttonText.autoSize = "center";
			buttonText.x = 0 - buttonText.width / 2;

So now we have adjusted the size of the textfield and placed in horizontially in center. But we havn’t set the alingment yet, this is the way to do it. I’ve put all of the class in here because there have been added code 4 different places, added //new to those so you can find them, also, the class is finished:

package  
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFormat; //new
 
	public class CenterButton extends MovieClip
	{
		protected var buttonText:TextField;
		protected var centerFormat:TextFormat;  //new
 
		public function CenterButton() 
		{
			for (var i:int = 0; i < this.numChildren; i++)
			{
				if (this.getChildAt(i) is TextField)
				{
					buttonText = (this.getChildAt(i) as TextField);
					break;
				}
			}
			centerFormat = new TextFormat();  //new
			centerFormat.align = "center";  //new
 
			this.buttonMode = true;
 
			buttonText.mouseEnabled = false;
			buttonText.autoSize = "center";
			buttonText.x = 0 - buttonText.width / 2;
			buttonText.setTextFormat(centerFormat);  //new
		}
	}
}

So now I’ve changed the text to good button, and it all works:

You can grap a ZIP with the files here.