Flash Lite & Touch: build an iPhone-like dynamic list

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

Leonardo Risuleo

mobile developer/designer

http://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();