AS3 example Button

Introduction

This example belongs to the AS3 Tutorials Novice and is part of our Actionscript 3 tutorial series.

You will learn how to create buttons and also how to create Event handlers, i.e. code that can deal with user interaction, e.g. user click on a button or user moves the mouve over a button.

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.height = 20;
              textLabel.width = 70;
              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 physical 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. We need to add extends Sprite after the class definition to inherit the drawable area and drawing functions of Sprite Objects. If we were to forget to add extends Sprite, we wouldn't be able to use the addChild(sprite) construct.

---

         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. This *must* have the same name as the class definition (ButtonInteractivity). The class constructor always takes this format: public function ClassName() {

---

             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" (pushing on the mouse button so that it ends up in a down position... which typically happens when we click on 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.height = 20;
             textLabel.width = 70;
             textLabel.selectable = false;
             button.addChild(textLabel)
         }

A function that takes care of drawing a button like graphic. It is made of a rounded rectangle and a text string on top of it. Note that the text box's height and width must be specified, this is because the text box is clickable and default to being quite large.

---

         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 defined in 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

Clarifications

I expect that at least some of you will have this comment: "When I use Flash CS3 or Flex Builder, I can use a built-in button object. I don't want to be rude, but your button is a bit primitive. The CS3 of FB ones are way more professional looking. Can I not not use that built-in button?"

The short answer is: yes, you can use it.

But there is a bit of complexity associated to this. This complexity could get in the way of having you properly understand the way interactivity is managed (the event listener logic). We will explain how to use the built-in button control later (Beginner stage).