Create a button with Actionscript 3.0

[Flep]

Another new feature of Actionscript 3.0 is the SimpleButton Class. It is basically the old Actionscript 2.0 Button Class but with a few new Methods.
With Flash CS3, it is possible to create buttons in runtime using Actionscript and act on the 4 states of the button which as been introduced as methods:
- upState
- overState
- downState
- hitTestState
In fact, if we think about it, the classic Flash button symbol always has had 4 keyframes in which we could control its different states.

Let's see how to handle them with Actionscript'

I create a FLA and save it as 'bottone_fla' (button_fla)
I create a Document Class, an AS file saved as 'Bottone.as' (button.as), implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Bottone extends MovieClip
	{
		private var my_button:SimpleButton;
		
		public function Bottone()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			creaBottone();
			addChild(my_button);
			aggiungiListener();
		}
		
		private function creaBottone():void
		{
			my_button=new SimpleButton();
			my_button.x=50;
			my_button.y=50;
			
			my_button.upState=disegnaCerchio(25);
			my_button.overState=disegnaCerchio(35);
			my_button.downState=disegnaCerchio(50);
			my_button.hitTestState=my_button.upState;
		}
		
		private function disegnaCerchio(raggio:Number):Shape
		{
			var cerchio:Shape=new Shape();
			cerchio.graphics.beginFill(0x000000,1);
			cerchio.graphics.drawCircle(my_button.x,my_button.y,raggio);
			cerchio.graphics.endFill();
			return(cerchio);
		}
		
		private function aggiungiListener():void
		{
			my_button.addEventListener(MouseEvent.CLICK,cliccato);
			function cliccato(m:MouseEvent):void
			{
				trace('ok');
			}
		}
	}
}

The result:

Let's take a look at the code:
We shall concentrate on the init method of the Class Bottone :
- first of all, we call the creaBottone method
- then, we add the button to the Display Object (otherwise it would be invisible)
- I add a listener awaiting the click of the mouse on the button.
What's the use of the creaBottone method:
I create a button
my_button=new SimpleButton();
I position it
my_button.x=50;
my_button.y=50;
I assign to the upState (neutral state), which is nothing else that the upState method of the button just created, the function disegnaCerchio to which I pass the radius of the circle as a numerical value. The function will draw the circle and return an instance of the Shape Class.
my_button.upState=disegnaCerchio(25);
I assign to the overState (the state when the mouse touch the button), which is nothing else that the overState method of the button just created, the function disegnaCerchio to which I pass the radius of the circle as a numerical value. The function will draw the circle and return an instance of the Shape Class.
my_button.overState=disegnaCerchio(35);
I assign to the downState (the state when the mouse is clicked on the button), which is nothing else that the downState method of the button just created, the function disegnaCerchio to which I pass the radius of the circle as a numerical value. The function will draw the circle and return an instance of the Shape Class.
my_button.downState=disegnaCerchio(50);
To the method hitTestState (the hit zone into which will be recognised the click of the mouse), I assign the upState method (neutral) of the same button
my_button.hitTestState=my_button.upState;

Let's see what the function disegnaCerchio does:
I create an instance of the Shape Class
var cerchio:Shape=new Shape();
I start the drawing of the graphics
cerchio.graphics.beginFill(0x000000,1);
I draw a circle with a radius of the value passed directly to the function
cerchio.graphics.drawCircle(my_button.x,my_button. y,raggio);
I close the drawing parts of the graphics
cerchio.graphics.endFill();
I return the shape
return(cerchio);

So, for each state of the button, I use an unique function to which I pass each time (depending on the state) a different value of the radius of the circle which will be designed by the function.

What the use of the function aggiungiListener:
I add a listener to the click of the mouse on the button and perform an action (in this case the trace)
my_button.addEventListener(MouseEvent.CLICK,clicca to);
function cliccato(m:MouseEvent):void
{
trace('ok');
}

See you soon!