Flash Lite & Touch: build an iPhone-like dynamic list
Download as PPT, PDF1 like1,142 views
The document discusses building touchscreen interfaces for mobile devices using Flash Lite. It covers touchscreen technologies, gestural interfaces, coherence with platforms, and considerations for Flash Lite and touch including supporting touch events, building dynamic lists, and performance. Example code is provided to attach listeners for touch events, define the scrollable area, and implement scrolling and selection.
![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:](https://image.slidesharecdn.com/flashlitetouch-090305032526-phpapp01/85/Flash-Lite-Touch-build-an-iPhone-like-dynamic-list-17-320.jpg)
Flash Lite & Touch: build an iPhone-like dynamic list
- 1. 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
- 2. Touchscreen Devices “ A touchscreen is a display which can detect the presence and location of a touch within the display area…”
- 3. Many devices, many touchscreen technologies… Resistive Surface acoustic wave Capacitive Projected Capacitance Optical Others… Not all touchscreen technologies are suitable for all applications.
- 4. 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…
- 5. 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
- 6. 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
- 7. 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
- 8. Build an “iPhone-Like” dynamic list
- 9. 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
- 10. 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
- 11. // 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:
- 12. // 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:
- 13. 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:
- 14. private function handleMouseMove():Void { var totalY:Number = _ymouse - firstPos_y; if (Math.abs(totalY) > scrollFactorY) isDragging = true; if (isDragging) { // move content } ... Implement slide scrolling:
- 15. 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:
- 16. // 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…
- 17. 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:
- 18. 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
- 19. 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
- 20. Thank you!