Besides the predefined events in ActionScript 3 (MouseEvent, KeyboardEvent, etc.) you can also create other new events (Custom Events), by extending the EventDispatcher class.
- "EventDispatcher" is the base class for events.

To learn how to create a new event, study the following example.
We create a class (named Game) as an extension of the "EventDispatcher" class (see the explanations in code).

Game Class

// Game Class (with a "Custom Event")
package {
  // Imports the classes whose methods are used
  import*;           // To be able to use /extend the EventDispatcher Class
  import flash.utils.*;            // Necessary for setTimeout

 // Create the Game class which extends the EventDispatcher
 public class Game extends EventDispatcher
  // Define a constant that will represent the name of the new event
  // Its value gives the name of the event
  public static const GAME_OVER:String = 'gameOver';

  // Private property, used only in the class to store a counting
  private var sec:int = 0;

  // Constructor
  public function Game(end:int)
    // Call the "count()" function with the property "sec" as argument

    // The function "count()" inside the constructor
    function count(sec:int):void
      // If the property 'sec' has the value of 3, calls the "endGame()" method
      if(this.sec==end) endGame();
        trace(sec);                  // Displays in Output the value of the 'sec' parameter
        this.sec = sec+1;            // Modify the value of the "sec" property
        // "this.sec" is the property, 'sec' is the function's parameter

        // Calls the function "count()" every second, with the property "sec" as argument
        setTimeout(count, 1000, this.sec);

  // The private method, called when "sec" reaches the value of the "end" parameter
  // "end" is the constructor's parameter and must be passed when the instance of the classe is created
  private function endGame():void
    // Trigger the event created and represented by this class
    dispatchEvent(new Event(Game.GAME_OVER));
- The Game class contains a constant "GAME_OVER" that will represent the event's name, a private property "sec" (used only in the class body) and a private method "endGame()" that will trigger the event created by this class.
- The constructor increments the value of the "sec" property every second, and displays the number in Output panel. When this number becomes equal with the value passed as argument when the instance was created, calls the method "endGame()", that will trigger the event "Game.GAME_OVER".
- This class must be added in a "ActionScript 3.0 Class" document, then saved with the name "" in the same folder as the FLA document that will use it.

In the Flash document add the following ActionScript code:
// Create an instance of the Game class
var game:Game = new Game(3);

// Register an event listener to detect the Game.GAME_OVER event
game.addEventListener(Game.GAME_OVER, gameOverListener);

// You can also use the value of the GAME_OVER constant ('gameOver', gameOverListener)

// Function called when the event is triggered
function gameOverListener (evt:Event):void
  trace('The game is over!');
- The event created by the Game class ( Game.GAME_OVER ) is registered as any other type of event, with the "addEventListener()" method applied to this class instance. "Game" represents the event, and "GAME_OVER" is its name.
- When the "sec" property of the Game class reaches the value of 3 ( or any other number added to 'new Game(nr)'), it calls the "endGame()" method, that triggers the event. This action is detected by the event listener registered with "addEventListener()", and will call the "gameOverListener()" function.
- In Output will be displaied:   0 1 2 The game is over!.

Usually the class that represents the event is used in conjunction with another class that access it when declaring the event.

To download the FLA file and "" with the example from this lesson, click: Creating new events

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Creating new events

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (15558)
  2. Moving html element to a random direction (84)
  3. XHTML References - Old (15)
  4. Star shapes with CSS (4464)
  5. Get and Modify content of an Iframe (12618)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (387)
  2. Register and show online users and visitors (355)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (327)
  4. Insert, Select and Update NULL value in MySQL (256)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (254)