Flash Lite & Touch: build an “iPhone-Like” dynamic list

Leonardo Risuleomobile developer/designerhttp://mobile.actionscript.it/http://www.scriptamanentgroup.net/byte/

Mobile Dev Day, March 6th 2009 - Rome

Touchscreen Devices“A touchscreen is a display which can detect the presence and location of a touch within the display area…”

Many devices, many touchscreen technologies…

• Resistive

• Surface acoustic wave

• Capacitive

• Projected Capacitance

• Optical

• Others…

Not all touchscreen technologies are suitable for all applications.

Gestural interfaces: new ways of interactions

• The best gestural interfaces need to be discoverable:

how can I activate? what are the controls?• Tap, drag, pinch, spread, slide…

• Coherence and consistency with platform

• React to system’s events (incoming call, low battery, orientation change…)

• React to environment (day/night contrast, noise…)

• Examine possible use cases

• Define UI design focusing on input type

Usability & functionality

Flash Lite & Touch

Flash Lite definitely supports touchscreen!

In Flash Lite 1.x:

• we can use buttons to detect touch screen presses/releases…

• trackAsMenu and System.capabilities.hasStylus not supported

In Flash Lite 2.x and 3.x:

• we can use buttons to detect touch screen presses/releases…

• trackAsMenu and System.capabilities.hasStylus supported

• we can locate exact position _xmouse, _ymouse

• Mouse object is supported providing proper events: onMouseDown, onMouseUp, onMouseMove

Build an “iPhone-Like”dynamic list

Layout considerations

• Display dimension and orientation

• Good contrast and clear focus

• Hit areas large enough for fingers

• support 2 hand control

• Intuitive use and navigation

List navigation and input detection

• Discard use of buttons for advanced control

• Use buttons just for simple task (es. softkey)

• Define separate listeners to handle mouse events

• Define the scrollable area

• Implement selection and slide scrolling

• Use EventDispatcher to dispatch events

// Attaching actions for touch softkey

top_bottom.exit_b.trackAsMenu = true;

top_bottom.exit_b.onRelease = function() {

// Quit command

fscommand2("Quit");

};

• Use buttons just for simple task:

// Assign listener functions

_downListener.onMouseDown = Delegate.create(this, handleMouseDown);

_upListener.onMouseUp = Delegate.create(this, handleMouseUp);

_moveListener.onMouseMove = Delegate.create(this, handleMouseMove);

// Initialize just down listener

Mouse.addListener(_downListener);

• Define separate listeners to handle mouse events:

private function handleMouseDown():Void {

if (_xmouse < _theX || _xmouse > (_theX + _theHeight) || _ymouse < _theY || _ymouse > (_theY + _theHeight)) {

// Tap outside the scrollable area

return;

}

// Add up / move listeners

Mouse.addListener(_moveListener);

Mouse.addListener(_upListener);

• Define scrollable area:

private function handleMouseMove():Void {

var totalY:Number = _ymouse - firstPos_y;

if (Math.abs(totalY) > scrollFactorY)

isDragging = true;

if (isDragging) {

// move content

}

...

• Implement slide scrolling:

private function handleMouseUp():Void {

// Remove listeners

Mouse.removeListener(_moveListener);

Mouse.removeListener(_upListener);

if (isDragging) {

// Enterframe initialization for animation

_content.onEnterFrame = Delegate.create(this, handleEnterFrame);

...

• Implement slide scrolling:

// Initialize EventDispatcher

EventDispatcher.initialize(this);

// EventDispatcher methods

public function addEventListener

(type : String, obj : Object) : Void { }

public function removeEventListener

(type : String, obj : Object) : Void { }

private function dispatchEvent

(event : Object) : Void { }

• Use EventDispatcher to dispatch events…

dispatchEvent( { type:TAP_EVENT, target:this, position:getPosition() } );

myTouch.addEventListener( TouchScreen.tapEvent, onTap );

function onTap(evt:Object):Void {

var absoluteY:Number = Math.round(evt.position ... );

var iter:Number = Math.floor(absoluteY / off_set);

var itemIter:Number = iter + firstCount;

...

_items[iter].activate();

• …and select the right item to focus:

Performance considerations

• Consider and test both vectors and bitmaps

• Vector gradients, alphas, and curves to a minimum

• One or two simultaneous animations on the screen

• Avoid long actionscript loops

• Use one single onEnterFrame: just one main loop that takes care of the various operations to carry on

Conclusions:

questions…

• Flash Lite CAN be used for touch-enabled casual games and applications

• Flash Lite 2.x more complete and powerful API

• Easy & fun to implement

• Fast prototyping

Thank you!