Your SlideShare is downloading. ×
0
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Flash Lite & Touch: build an iPhone-like dynamic list
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,962

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • This is not so worthy, without a working example file, for the new comers to the touch process for Flash Lite.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,962
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×