AS3 example Button
<pageby nominor="false" comments="false"/>
Program
Copy and paste this code in a text file. Save that textfile as "ButtonInteractivity.as". The name of the file *must* be the same as the name of the main class.
package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.*;
public class ButtonInteractivity extends Sprite {
private var button:Sprite = new Sprite();
public function ButtonInteractivity() {
drawButton()
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addChild(button);
}
private function drawButton():void {
var textLabel:TextField = new TextField()
button.graphics.clear();
button.graphics.beginFill(0xD4D4D4); // grey color
button.graphics.drawRoundRect(0, 0, 80, 25, 10, 10); // x, y, width, height, ellipseW, ellipseH
button.graphics.endFill();
textLabel.text = "Click Me!";
textLabel.x = 10;
textLabel.y = 5;
textLabel.selectable = false;
button.addChild(textLabel)
}
private function mouseDownHandler(event:MouseEvent):void {
button.x += 20
if (button.x > 400) { button.x = 0}
}
}
}
Walkthrough
package {
The main class needs to be embedded in a package
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
We need to import the classes that we will use in this program, Sprite, TextField, and MouseEvent. These classes are located in different regions of the code space. flash.display, flash.text, and flash.events, respectively.
public class ButtonInteractivity extends Sprite {
We need at the very least one class definition that has the same name as the ".as" file
private var button:Sprite = new Sprite();
We declare a button variable, to hold the properties of a Sprite object. We need to declare it between the class definition and the class constructor because the button variable will be used in different parts of the program (not just in the constructor)
public function ButtonInteractivity() {
Class constructor. This is the class that gets executed whenever the class gets instantiated
drawButton()
calls a function that will take care of drawing a mix of graphics and text objects that look like a button
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
This is the new element and what this example is about. We want the button to react to on screen events. For this, it is required that we "listen" to actions performed on the button. In this case, we want to listen to a mousedown event (i.e., click with the mouse).
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
This broadly means, start listening for events that occur on the button object. Specifically, listens for a mouse event of type "mouse down" (clicking with the mouse). Whenever this event happens, execute the function mouseDownHandler defined elsewhere in this program (see below)
addChild(button);
Let's not forget to explicitely add the button sprite on the screen. Otherwise, the button will not show up
}
end of the constructor function
private function drawButton():void {
var textLabel:TextField = new TextField()
button.graphics.clear(); // clear the sprite of any graphics previously drawn onto it.
button.graphics.beginFill(0xD4D4D4); // grey color
button.graphics.drawRoundRect(0, 0, 80, 25, 10, 10); // x, y, width, height, ellipseW, ellipseH
button.graphics.endFill();
textLabel.text = "Click Me!";
textLabel.x = 10;
textLabel.y = 5;
textLabel.selectable = false;
button.addChild(textLabel)
}
A function that takes care of drawing a button like graphic. It is made of a rounded rectangle (
---
private function mouseDownHandler(event:MouseEvent):void {
button.x += 20
if (button.x > 400) { button.x = 0}
}
The function to execute whenever the mouseDownHandler is called. Given the parameters given to the addEventListener function call, this function is being executed any time a mousedown event takes place on the button object.
The button is moved by 20 pixels to the right. If the position is too far to the right (possibly going over the right border of the screen), the position is reset to 0, the most left-side position
} }
Any parenthesis or bracket that has been opened needs to be closed
Variants
Change this:
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
into this:
button.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
Then this:
private function mouseDownHandler(event:MouseEvent):void {
Into this:
private function mouseOverHandler(event:MouseEvent):void {
Then this:
button.x += 20
Into this:
button.x += 85
This will make a silly game where the button move around the screen, out of reach any time the user tries to click on it