Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Metro + Metro Like
Metro + Metro Like
Loading in …3
×
1 of 31

Getting Web Multi-Touch Working

6

Share

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Getting Web Multi-Touch Working

  1. Getting Web Multi-Touch Working for a Fast-Paced Game Aidan Wu May 19, 2012 13:40 - 14:10
  2. Screen Interactions
  3. On the desktop we worry about ‘browsers’ box-shadow:10px 10px 5px #000; -moz-box-shadow:10px 10px 5px #000; -webkit-box-shadow:10px 10px 5px #000;
  4. On mobile we worry about ‘users’
  5. Fast, Faster, Fastest
  6. 回不去了… Touch Interfaces Everywhere
  7. Mobile + Touch Device + Web
  8. Design pattern from design view
  9. M How to make a continuous interface
  10. Limited Navigation Space Lorem ipsum dolor sit Lorem ipsum dolor Nunc vel vehicula Nunc vel vehicula amet, consectetur sit ante. Etiam ante. Etiam adipiscing elit. Aliquam amet, consectetur bibendum iaculis bibendum iaculis sodales urna non odio adipiscing elit. libero, eget libero, eget egestas tempor. Nunc vel Aliquam sodales molestie nisl molestie nisl vehicula ante. Etiam urna non bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
  11. Manipulating UI Elements
  12. V How to make an interface looks touchable
  13. C How to make an interface touchable Source: www.lukew.com
  14. MVC • M - Moving toward (continuous) • V - Looking touchable • C – Touch(Gesture)-aware
  15. Handling Multi-Touch Events <div ontouchstart = "touchStart(e);” ontouchmove = "touchMove(e);” ontouchend = "touchEnd(e);” </div>
  16. Touches Arrays addEventListener('touchmove', function(e) { • e.touches – a list of all fingers currently on the screen. • e.targetTouches – a list of fingers on the current DOM element. • e.changedTouches – changed touches for this event
  17. TouchEvent Object var touch = e.changedTouches[0]; • dentifier • touch.pageY • touch.screenX • touch.clientX
  18. Javascript Gesture Library jGestures Hammer.js More in  http://goo.gl/h5M7B
  19. jGestures • jQuery(’#el').bind('swipeup', log); • jQuery(’#el').bind('swiperightup',log); • jQuery('#el').bind('taptwo',log); • jQuery('#el').bind('rotate',log);
  20. Tips • <meta name="viewport" content="width=device-width; initial- scale=1.0;maximum-scale=1.0; user- scalable=0;"> • preventDefault();
  21. Finger Interactions for Games Source: Vans Finger Fracture
  22. issues 1. Resizing and scaling 2. Pre-loading 3. Touch and mouse-aware 4. Sprites / animations / Transitions 5. GUI / Z-index

×