AS3 Buttons are buttons that are created in ActionScript 3.
Actionscript 3 is of course the coding language used to program the Adobe Flash Platform, which Flex and AIR are part of.
If you are using Flex you may want to create a Flex button, which I do not cover below,
but is covered here.
This tutorial covers the creation of an AS3 button purely with ActionScript.
It will cover:
- i. The creation of the graphic for the button using pure ActionScript code,
- ii. Setting this graphic to have the user experience of a button and,
- iii. Firing an event from the AS3 button.
Note: We will not cover creating a button within the Flash IDE.
What is an IDE? – Integrated Development Environmen
New to Actionscript 3, Flash, Flex or AIR?
If you are new to Actionscript, Flex, or AIR and you do not have enough cash to purchase the full license for Flash Builder, FDT or IntelliJ, like me! it’s worth looking at
http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page
Which is an open source development environment for Flash, Flex and AIR.
Ok now lets get this show on the road.
AS3 Button creation using Actionscript 3
First step is to create your graphic that you will use as a button. You can do this using the flash graphics class.
Let’s import the flash graphics
class.import flash.display.Graphics;Now you need to draw a shape for your button, for this example I’ve drawn a simple yellow box, beautiful!
I’ve used a Sprite because I don’t need a movieclip as “Sprite is an appropriate base class for objects that do not require timelines” and for what I’m currently writing I do not require a timeline.
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic button.graphics.
beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic button.
graphics.drawRect(0, 0, 200, 200);
//Apply the fill button.graphics.endFill();and add
private var button:Sprite;as an instance variable. This is so that we can refer to the button later on, ie. To change it’s look.
At this point if you run it you will see nothing on your stage.
Therefore we need to add the graphic you have just created to the stage,
we do this with the following line;
//Add Button Sprite to stage
this.addChild(button);Congratulations : Now you should have a yellow box in the top left hand corner of your stage.
You’ve just drawn your AS3 Button using code!
Your class should look something like this :
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
/**
* ...
* @author how-to-code.com
*/
public class Main extends Sprite
{
private var button:Sprite;
public function Main():void
{
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic button.
graphics.beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
//Apply the fill
button.graphics.endFill();
//Add Button Sprite to stage
this.addChild(button);
}
}
}Adding a Hand Cursor
Now you have a yellow box on the stage you need to communicate to the user that they are infact over the AS3 Button when they hover their mouse above the yellow box. We do this by adding the following code
//Add Handcursor,buttonMode, and mouseChildren
buttonMc.buttonMode = true;
buttonMc.useHandCursor = true;
buttonMc.mouseChildren = false;For exactly what buttonMode, useHandCursor and mouseChildren do it is worth checking out the Adobe Livedoc references which can be found at the bottom of this page.
Your code should now look like the following :
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
/**
* ...
* @author how-to-code.com
*/
public class Main extends Sprite
{
private var button:Sprite;
public function Main():void
{
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic
button.graphics.beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
//Apply the fill
button.graphics.endFill();
//Add useHandCursor, buttonMode, and mouseChildren if required
button.useHandCursor = true;
button.buttonMode = true;
button.mouseChildren = false;
//Add Button Sprite to stage
this.addChild(button);
}
}
}Adding Event Listeners
What use is the AS3 button if it does nothing when you press it!
We therefore need to make the button do ‘something’ when pressed on, but we can also get the AS3 button to do something when the user rolls over it, rolls off it, and more, as specified by MouseEvents.
To do this we need to add Event Listeners to our button.
Firstly lets add an Event Listener to listen to when are button is clicked upon. We add an Event Listener to a component by calling addEventListener on that component and telling it what exactly to listen out for.
So we add the following:
button.addEventListener(MouseEvent.CLICK, buttonClickHandler);The above Event Listener listens for a click mouse event on the button Sprite. AND when the user clicks the button Sprite it calls the function buttonClickHandler.
Now we need a method to be created called buttonClickHandler so that when the user clicks the button Sprite something happens!
Lets create the method to link to by adding a new method buttonClickHandler, and within this lets output “Button Clicked!” to the console using a trace statement.
So lets add the the buttonClickHandler method to our code
private function buttonClickHandler(event:MouseEvent):void
{
trace("Button clicked!");
}Whoa! Check out the event:MouseEvent parameter that is passed to this
method. Let’s not worry about this for now, but remember to include it.
Also make it return :void as this method will not be returning anything.
Your code will now look like
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
import flash.events.MouseEvent;
/**
* ...
* @author how-to-code.com
*/
public class Main extends Sprite
{
private var button:Sprite;
public function Main():void
{
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic
button.graphics.beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
//Apply the fill
button.graphics.endFill();
//Add useHandCursor, buttonMode, and mouseChildren if required
button.useHandCursor = true;
button.buttonMode = true;
button.mouseChildren = false;
button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
//Add Button Sprite to stage
this.addChild(button);
}
private function buttonClickHandler(event:MouseEvent):void
{
trace("Button clicked!");
}
}
}Congratulations you’ve created a button purely from ActionScript 3!
You can stop now with the tutorial!
Or continue to implement a rollover and rollout and then implement the button changing color on the different states of rollover and rollout.
AS3 Button Rollover and Rollout
Now have a go at creating a roll over and roll out for your button.
Here’s a tip : You will need to use MouseEvent.ROLL_OVER, and MouseEvent.ROLL_OUT
Below is the code implementation for rollover and rollout of the AS3 Button.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
import flash.events.MouseEvent;
/**
* ...
* @author how-to-code.com
*/
public class Main extends Sprite
{
private var button:Sprite;
public function Main():void
{
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic
button.graphics.beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
//Apply the fill
button.graphics.endFill();
//Add useHandCursor, buttonMode, and mouseChildren if required
button.useHandCursor = true;
button.buttonMode = true;
button.mouseChildren = false;
button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
button.addEventListener(MouseEvent.ROLL_OVER, buttonRollOverHandler);
button.addEventListener(MouseEvent.ROLL_OUT, buttonRollOutHandler);
//Add Button Sprite to stage
this.addChild(button);
}
private function buttonClickHandler(event:MouseEvent):void
{
trace("Button clicked!");
}
private function buttonRollOverHandler(event:MouseEvent):void
{
trace("Button roll over!");
}
private function buttonRollOutHandler(event:MouseEvent):void
{
trace("Button roll out!");
}
}
}AS3 Button Change of Color on Click, Rollover and Rollout.
Now you should try and make a more realistic button that changes color on Rollover and Rollout.
To do this you will need to change the color of the button on rollover and rollout, there are two ways I can think to implement this.
The way I’ve implemented it is below.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
import flash.events.MouseEvent;
/**
* ...
* @author how-to-code.com
*/
public class Main extends Sprite
{
private var button:Sprite;
public function Main():void
{
//Create a new instance of a Sprite to act as the button graphic.
button = new Sprite();
//Set the color of the button graphic
button.graphics.beginFill(0xFFCC00);
//Set the X,Y, Width, and Height of the button graphic
button.graphics.drawRect(0, 0, 200, 200);
//Apply the fill
button.graphics.endFill();
//Add useHandCursor, buttonMode, and mouseChildren if required
button.useHandCursor = true;
button.buttonMode = true;
button.mouseChildren = false;
button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
button.addEventListener(MouseEvent.ROLL_OVER, buttonRollOverHandler);
button.addEventListener(MouseEvent.ROLL_OUT, buttonRollOutHandler);
//Add Button Sprite to stage
this.addChild(button);
}
private function buttonClickHandler(event:MouseEvent):void
{
trace("Button clicked!");
turnButtonGreen();
}
private function buttonRollOverHandler(event:MouseEvent):void
{
trace("Button roll over!");
turnButtonRed();
}
private function buttonRollOutHandler(event:MouseEvent):void
{
trace("Button roll out!");
turnButtonYellow();
}
private function turnButtonRed():void
{
button.graphics.beginFill(0xFF0000);
button.graphics.drawRect(0,0,200,200);
button.graphics.endFill();
}
private function turnButtonYellow():void
{
button.graphics.beginFill(0xFFCC00);
button.graphics.drawRect(0,0,200,200);
button.graphics.endFill();
}
private function turnButtonGreen():void
{
button.graphics.beginFill(0x008000);
button.graphics.drawRect(0,0,200,200);
button.graphics.endFill();
}
}
}I hope this tutorial about creating an AS3 Button has helped you in creating and playing with your very own AS3 Button.
