Touch mouse keyboard

User interaction

User interaction, whether by keyboard, mouse or touch is the foundation of interactivity. In Flambe, identifying and responding to user interaction primarily involves listening to signals.

Pointer

The Pointer subsystem is for unified mouse/touch events. When creating interactive content for mobile and desktop, this is a nice interface to use. Functions related to the environment's pointing device. On desktop computers, this is a mouse. On touch screens, it's a finger.

System.pointer.up.connect(handlePointerUp);
System.pointer.down.connect(handlePointerDown);
System.pointer.move.connect(handlePointerMove);

function handlePointerUp(event:PointerEvent) {
   trace("pointer up. id:" + event.id);
}
function handlePointerDown(event:PointerEvent) {
   trace("pointer down. id:" + event.id);
}
function handlePointerMove(event:PointerEvent) {
   trace("pointer move. id:" + event.id + " - x:" + event.viewX + ", y:" + event.viewY);
}

Creating interactive sprites

Every sprite has these signals, pointerDown, pointerMove, pointerUp, pointerIn, pointerOut. These signals uses the Pointer subsystem.

mySprite.pointerIn.connect(handleSpriteIn);
mySprite.pointerOut.connect(handleSpriteOut);

function handleSpriteIn(event:PointerEvent) {
   trace("Roll over");
}

function handleSpriteOut(event:PointerEvent) {
   trace("Roll out");
}

It's possible to disable pointer events using the pointerEnabled property.

Learn more about using Signals on Signal Event System

Global interaction

Keyboard events
The Keyboard subsystem, for access to the environment's physical keyboard.

System.keyboard.up.connect(handleKeyUp);
System.keyboard.down.connect(handleKeyDown);

function handleKeyUp(event:KeyboardEvent) {
   trace("key up. " + event.key);
}
function handleKeyDown(event:KeyboardEvent) {
   trace("key down. " + event.key);
}

(Multi)Touch events
The Touch subsystem, for direct access to the multi-touch. Every touch event has an identifier (id) which is unique per finger.

System.touch.up.connect(handleTouchUp);
System.touch.down.connect(handleTouchDown);
System.touch.move.connect(handleTouchMove);

function handleTouchUp(event:TouchPoint) {
   trace("touch up. id:" + event.id);
}
function handleTouchDown(event:TouchPoint) {
   trace("touch down. id:" + event.id);
}
function handleTouchMove(event:TouchPoint) {
   trace("touch move. id:" + event.id + " - x:" + event.viewX + ", y:" + event.viewY);
}

Mouse events
The Mouse subsystem, for access to the environment's mouse. 🐭

System.mouse.up.connect(handleMouseUp);
System.mouse.down.connect(handleMouseDown);
System.mouse.move.connect(handleMouseMove);

function handleMouseUp(event:MouseEvent) {
   trace("mouse up");
}
function handleMouseDown(event:MouseEvent) {
   trace("mouse down");
}
function handleMouseMove(event:MouseEvent) {
   trace("mouse move: x:" + event.viewX + ", y:" + event.viewY);
}

Learn more about using Signals on Signal Event System

Discovering input support

You can detect if the current device support certain input types:

Detect keyboard support

// True if the environment has a physical keyboard. Phones and tablets will generally return false here.
System.keyboard.supported; 

Detect pointer support

// True if the environment has a pointing device.
System.pointer.supported;  

Detect mouse support

// True if the environment has a mouse.
System.mouse.supported; 

Detect touch support

// True if the environment has a touch screen. 
System.touch.supported; 

// Returns the maximum number of touch points that can be detected at once.
System.touch.maxPoints;