Chapter 2 - Haxe Flash Tutorial

This chapter is about basic interaction.

Table of Contents

• Simple Mouse Events

Simple Mouse Events

Basic but also mandatory is the ability to react on mouse events. Starting from a click event, this demo shows also simple highlighting when the mouse enters the button area.
We use the demo of chapter 1 as a starting point, but focus now on the event handling.

Source Code

class Demo05 {
  static var mc : MovieClip;
  static var stage : Dynamic;
  static var playBtn : Sprite;
  static var aniStar : Shape;
  // variables for animation
  static var f : Float;
  static var progressTimer : Timer;

  static function main() {
    mc = flash.Lib.current;
    stage = mc.stage;
    var g : Graphics;

    playBtn = new Sprite();
    var playShape : Shape = Graph.drawPlayButton(60,40,16);
    playShape.alpha=1;
    playBtn.addChild(playShape);
    playBtn.alpha = 0.7;
    playBtn.x = 10;
    playBtn.y = 10;
    // add the event listener
    playBtn.addEventListener(MouseEvent.MOUSE_OUT, outEntry);
    playBtn.addEventListener(MouseEvent.MOUSE_OVER, overEntry);
    playBtn.addEventListener(MouseEvent.MOUSE_DOWN, downEntry);
    mc.addChild(playBtn);
    
    // here starts the animation code
    aniStar = new Shape();
    g = aniStar.graphics;
    Graph.drawStar(g,102,5, 
      60, // radius
      0, // empty star
      0xff0000, // empty-border color
      0xff8080, // empty-fill color
      0x00ff00, // full-border color
      0x80ff80, // full-fill color
      1 
      );
    aniStar.x = 20;
    aniStar.y = 13;
    f = 0;
    mc.addChild(aniStar);
    
    // set up a timer 
    progressTimer = new Timer(10);
    progressTimer.addEventListener(TimerEvent.TIMER,updateProgress);
    progressTimer.stop();
    aniStar.visible = false;
  }
  
  static function overEntry(event:flash.events.MouseEvent){
    playBtn.alpha=0.9;
  }
  
  static function outEntry(event:flash.events.MouseEvent){
    playBtn.alpha=0.7;
  }
  
  // triggered when button is clicked
  static function downEntry(event:flash.events.MouseEvent){
    if(aniStar.visible==false){
      playBtn.visible = false;
      aniStar.visible = true;
      progressTimer.start();
    }
  }
  
  // timer for mini animation
  static function updateProgress(event:TimerEvent){
    try{
      if(f==0){
        f = 0.15;
        aniStar.visible = true;
      }else if(f>=1){
        aniStar.visible = false;
        progressTimer.stop();
        f = 0;
        playBtn.visible = true;
      }else{
        f = f * 1.05;
      }
      aniStar.scaleX = f;
      aniStar.scaleY = f;
    }catch(e:Dynamic){
      // Ignore any errors.
    }
  }
}

Explanation

Handling mouse events is quite simple, only the addEventListener function with the event type MouseEvent.MOUSE_DOWN is required:

  playBtn.addEventListener(MouseEvent.MOUSE_DOWN, downEntry);

The function downEntry handles the event, in order to acutally do something when the button is pressed, we scale a simple star von small to big and after all, return to the previous state.
Scaling is steered by the variable f but more interesting is the usage of a timer for periodic changes: Here we use a periodic timer, which is started when the button is hit and haltet at the end of the animation.

Please go on and change some things within the code and find out what else is possible.

Copyright/ Disclaimer

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see http://www.gnu.org/licenses.

    Copyright (C) 2008 by Siegmund Gorr