Flash Lite & Touch: build an “iPhone-Like” dynamic list <ul><li>Leonardo Risuleo </li></ul><ul><li>mobile developer/design...
Touchscreen  Devices “ A touchscreen is a display which can detect the presence and location of a touch within the display...
Many devices, many touchscreen technologies… <ul><li>Resistive </li></ul><ul><li>Surface acoustic wave </li></ul><ul><li>C...
Gestural interfaces: new ways of interactions <ul><li>The best gestural interfaces need to be discoverable: how can I acti...
<ul><li>Coherence and consistency with platform </li></ul><ul><li>React to system’s events (incoming call, low battery, or...
Flash Lite & Touch Flash Lite definitely supports touchscreen! <ul><li>In Flash Lite 1.x: </li></ul><ul><li>we can use but...
<ul><li>In Flash Lite 2.x and 3.x: </li></ul><ul><li>we can use buttons to detect touch screen presses/releases… </li></ul...
Build an “iPhone-Like” dynamic list
Layout considerations <ul><li>Display dimension and orientation </li></ul><ul><li>Good contrast and clear focus </li></ul>...
List navigation and input detection <ul><li>Discard use of buttons for advanced control </li></ul><ul><li>Use buttons just...
// Attaching actions for touch softkey top_bottom.exit_b.trackAsMenu = true; top_bottom.exit_b.onRelease = function() { //...
// Assign listener functions _downListener.onMouseDown = Delegate.create(this, handleMouseDown); _upListener.onMouseUp = D...
private function handleMouseDown():Void { if (_xmouse < _theX || _xmouse > (_theX + _theHeight)  || _ymouse < _theY || _ym...
private function handleMouseMove():Void { var totalY:Number = _ymouse - firstPos_y; if (Math.abs(totalY) > scrollFactorY) ...
private function handleMouseUp():Void { // Remove listeners Mouse.removeListener(_moveListener); Mouse.removeListener(_upL...
// Initialize EventDispatcher EventDispatcher.initialize(this); // EventDispatcher methods public function addEventListene...
dispatchEvent( { type:TAP_EVENT, target:this, position:getPosition() } ); myTouch.addEventListener( TouchScreen.tapEvent, ...
Performance considerations <ul><li>Consider and test both vectors and bitmaps </li></ul><ul><li>Vector gradients, alphas, ...
Conclusions: questions… <ul><li>Flash Lite CAN be used for touch-enabled casual games and applications </li></ul><ul><li>F...
Thank you!
Nächste SlideShare
Wird geladen in …5
×

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

5.234 Aufrufe
5.084 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
1 Kommentar
1 Gefällt mir
Statistik
Notizen
  • This is not so worthy, without a working example file, for the new comers to the touch process for Flash Lite.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
5.234
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
393
Aktionen
Geteilt
0
Downloads
60
Kommentare
1
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Flash Lite & Touch: build an “iPhone-Like” dynamic list <ul><li>Leonardo Risuleo </li></ul><ul><li>mobile developer/designer </li></ul><ul><li>http://mobile.actionscript.it/ </li></ul><ul><li>http://www.scriptamanentgroup.net/byte/ </li></ul>Mobile Dev Day, March 6th 2009 - Rome
  2. 2. Touchscreen Devices “ A touchscreen is a display which can detect the presence and location of a touch within the display area…”
  3. 3. Many devices, many touchscreen technologies… <ul><li>Resistive </li></ul><ul><li>Surface acoustic wave </li></ul><ul><li>Capacitive </li></ul><ul><li>Projected Capacitance </li></ul><ul><li>Optical </li></ul><ul><li>Others… </li></ul>Not all touchscreen technologies are suitable for all applications.
  4. 4. Gestural interfaces: new ways of interactions <ul><li>The best gestural interfaces need to be discoverable: how can I activate? what are the controls? </li></ul><ul><li>Tap, drag, pinch, spread, slide… </li></ul>
  5. 5. <ul><li>Coherence and consistency with platform </li></ul><ul><li>React to system’s events (incoming call, low battery, orientation change…) </li></ul><ul><li>React to environment (day/night contrast, noise…) </li></ul><ul><li>Examine possible use cases </li></ul><ul><li>Define UI design focusing on input type </li></ul>Usability & functionality
  6. 6. Flash Lite & Touch Flash Lite definitely supports touchscreen! <ul><li>In Flash Lite 1.x: </li></ul><ul><li>we can use buttons to detect touch screen presses/releases… </li></ul><ul><li>trackAsMenu and System.capabilities.hasStylus not supported </li></ul>
  7. 7. <ul><li>In Flash Lite 2.x and 3.x: </li></ul><ul><li>we can use buttons to detect touch screen presses/releases… </li></ul><ul><li>trackAsMenu and System.capabilities.hasStylus supported </li></ul><ul><li>we can locate exact position _xmouse, _ymouse </li></ul><ul><li>Mouse object is supported providing proper events: onMouseDown, onMouseUp, onMouseMove </li></ul>
  8. 8. Build an “iPhone-Like” dynamic list
  9. 9. Layout considerations <ul><li>Display dimension and orientation </li></ul><ul><li>Good contrast and clear focus </li></ul><ul><li>Hit areas large enough for fingers </li></ul><ul><li>support 2 hand control </li></ul><ul><li>Intuitive use and navigation </li></ul>
  10. 10. List navigation and input detection <ul><li>Discard use of buttons for advanced control </li></ul><ul><li>Use buttons just for simple task (es. softkey) </li></ul><ul><li>Define separate listeners to handle mouse events </li></ul><ul><li>Define the scrollable area </li></ul><ul><li>Implement selection and slide scrolling </li></ul><ul><li>Use EventDispatcher to dispatch events </li></ul>
  11. 11. // Attaching actions for touch softkey top_bottom.exit_b.trackAsMenu = true; top_bottom.exit_b.onRelease = function() { // Quit command fscommand2(&quot;Quit&quot;); }; <ul><li>Use buttons just for simple task: </li></ul>
  12. 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); <ul><li>Define separate listeners to handle mouse events: </li></ul>
  13. 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); <ul><li>Define scrollable area: </li></ul>
  14. 14. private function handleMouseMove():Void { var totalY:Number = _ymouse - firstPos_y; if (Math.abs(totalY) > scrollFactorY) isDragging = true; if (isDragging) { // move content } ... <ul><li>Implement slide scrolling: </li></ul>
  15. 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); ... <ul><li>Implement slide scrolling: </li></ul>
  16. 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 { } <ul><li>Use EventDispatcher to dispatch events… </li></ul>
  17. 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(); <ul><li>… and select the right item to focus: </li></ul>
  18. 18. Performance considerations <ul><li>Consider and test both vectors and bitmaps </li></ul><ul><li>Vector gradients, alphas, and curves to a minimum </li></ul><ul><li>One or two simultaneous animations on the screen </li></ul><ul><li>Avoid long actionscript loops </li></ul><ul><li>Use one single onEnterFrame: just one main loop that takes care of the various operations to carry on </li></ul>
  19. 19. Conclusions: questions… <ul><li>Flash Lite CAN be used for touch-enabled casual games and applications </li></ul><ul><li>Flash Lite 2.x more complete and powerful API </li></ul><ul><li>Easy & fun to implement </li></ul><ul><li>Fast prototyping </li></ul>
  20. 20. Thank you!

×