Question

I’m currently working through a AS3 game tutorial on Lynda.com and am coming across a problem with the MouseEvent.CLICK and child indexes. The game is a simple point and shoot, where the player must shoot all of the approaching enemies before they get too close. It works initially, however the custom cursor I added displays behind the enemies. However when I try and adjust the index (I’ve used the addChildAt function and moving the addChild(cursor) line of code below the enemy container initializer) the on click interaction, which is supposed to remove the enemy when clicked on, doesn’t work.

My document class:

package {
import flash.display.*;
import flash.utils.*;
import flash.events.*;
import flash.ui.*;

public class Game extends MovieClip {
    public var cursor:Cursor;
    public var enemy:Enemy;
    public var numberOfEnemies:uint;
    public var enemyContainer:MovieClip;
    public var enemyTimer:Timer;

    public function Game() {
        addEventListener(Event.ADDED_TO_STAGE, init);
        Mouse.hide();
    }

    public function init(event:Event):void {
        cursor = new Cursor;
        addChild(cursor);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCursor);

        numberOfEnemies = 10;
        enemyTimer = new Timer(1000, numberOfEnemies);
        enemyContainer = new MovieClip();
        addChild(enemyContainer);

        enemyTimer.addEventListener(TimerEvent.TIMER, createEnemies);
        enemyTimer.start();
    }

    public function dragCursor(event:MouseEvent) {
        cursor.x = this.mouseX;
        cursor.y = this.mouseY;
    }

    public function createEnemies(event:TimerEvent):void {
        enemy = new Enemy();
        enemy.x = 25 + Math.random() * (stage.stageWidth - 75);
        enemy.y = 25 + Math.random() * (stage.stageHeight - 75);
        enemyContainer.addChild(enemy);
        enemy.timerStart();
    }
}
}

My enemy class:

package {
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.ui.Mouse;
import flash.events.*;

public class Enemy extends MovieClip {
    public var scaleObj:Number = 0.50;
    public var growTimer:Timer;

    public function Enemy() {
        scaleX = scaleObj;
        scaleY = scaleObj;
        addEventListener(MouseEvent.CLICK, shootEnemy);
    }

    public function timerStart() {
        growTimer = new Timer(50);
        growTimer.addEventListener(TimerEvent.TIMER, objectGrow);
        growTimer.start();
    }

    public function objectGrow(event:TimerEvent):void {
        if(scaleObj <= 1.0) {
            scaleObj += 0.01;
            scaleX = scaleObj;
            scaleY = scaleObj;
        }
        else {
            killEnemy();
        }
    }

    public function killEnemy():void {
        this.parent.removeChild(this);
        growTimer.stop();
    }

    public function shootEnemy(event:MouseEvent):void {
        killEnemy();
    }
}
}

There also is a cursor class, however there is no code beyond the package and class definers. Please let me know of any questions or comments you might have, thanks.

Answer 1

Most likely the Cursor object is intercepting the mouse click since it is above the Enemy object.

You can stop the Cursor from intercepting mouse events by setting in the cursor class:

this.mouseEnabled = false;
this.mouseChildren = false;

Also, you should ideally be using a native mouse cursor instead of manually creating your own. Check out this Adobe tutorial for an example.