flash lite & touch: build an iphone-like dynamic list
TRANSCRIPT
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!