AS3 example Button

The educational technology and digital learning wiki
Jump to navigation Jump to search

Program

 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);
             button.graphics.drawRoundRect(0, 0, 80, 25, 10, 10);
             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 > 200) { 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


     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 > 200) { 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