Digital Fun for the Digital Home


Published on

Interactivity with devices of all sizes in a digital home setting. Learn how to leverage the AIR runtime across platforms and screens to create engaging user experiences. Come play with cool applications across AIR for Android, iOS, PlayBook and TV, and then get a deep dive into the code and technology behind the applications.

Published in: Technology, Business
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • What does Digital Home mean? This word is used for a lot of different things.
  • Here are a lot list of the different uses of Digital Home
  • PickQuick – TV, iPad, iPhone, iPod, N1CanvasExpoMADHVideoEidenCoinFlipPhotoshop Touch SDK - DeviceCompViewer
  • Uses iPad2,iPhone 3GS, TV, Droid X
  • Galaxy Tab, Droid X, TV
  • Droid X and Laptop
  • Droid X, Atrix and TV & Galaxy Tab
  • Atrix to WebTop with WiiMotes
  • Droid X to Laptop with Photoshop Touch SDK
  • Galaxy Tab with TV
  • Renaun Border the images and
  • Renaun
  • Digital Fun for the Digital Home

    1. 1. Digital Fun for the Digital Home: TV, Tablets, & Smartphones<br />Renaun Erickson – Last updated 2011.05.06<br />
    2. 2. About Me<br />2<br />Renaun Erickson<br />Developer Evangelist, Adobe Systems Inc<br /><br /><br />@renaun<br /><br /><ul><li>Code in the Flash Player (local mic access)
    3. 3. Mobile application developer
    4. 4. Device Junkie
    5. 5. Based in Henderson, NV, USA
    6. 6. Like Games, Jeeps, and Archaeology
    7. 7. Enjoys 4 lovely kids</li></li></ul><li>What is the Digital Home?<br />3<br />
    8. 8. Can Mean a lot of Things!<br />Cable & Broadcast Media<br />Home Theatre / Televisions<br />Home Automation<br />Tablets<br />4<br /><ul><li>Appliances
    9. 9. Telecommunication
    10. 10. Gaming Consoles
    11. 11. Smartphones</li></ul>What are the digital home and digital living? <br />The digital home is an evolution of the idea that PCs, consumer electronics <br />and mobile devices should work together seamlessly through <br />a wired or wireless network to share digital content within <br />a home environment. Digital living extends that idea to <br />include sharing content on the go as well. <br />Digital Living Network Alliance (DLNA)<br />
    12. 12. The Center of Digital Fun<br />5<br />
    13. 13. Digital Fun for the Digital Home<br />6<br /><ul><li>Smart TV (w/ AIR)
    14. 14. Wireless Router
    15. 15. Tablets
    16. 16. Smartphones</li></li></ul><li>Device Landscape for Adobe Runtimes<br />Desktop<br />Netbooks<br />Android<br />RIM Playbook<br />Apple iOS<br />Google TV<br />Televisions<br />WebOS<br /><ul><li>Open Screen Project
    17. 17. Tons of OS & Chipsets
    18. 18. No single control of runtime releases
    19. 19. Abstracting as much of device fragmentation as possible
    20. 20. Remember early stages of device OS and runtimes, constant change</li></ul>7<br />
    21. 21. Snapshot of Current Hardware<br />Samsung Smart TV<br />Sony Google TV<br />Logitech Revue<br />Android Phones<br />RIM PlayBook<br />Apple iPad2/iPhone4<br />Android Tablets<br />Palm Pre 2<br />Presentation Demos<br /><ul><li>MAX 2010 AIR for TV Dev Kit
    22. 22. Router
    23. 23. Motorola Atrix / with WebTop
    24. 24. iPad2
    25. 25. iPod 5th gen
    26. 26. iPhone 3GS
    27. 27. Galaxy Tab
    28. 28. Nexus One</li></ul>2011<br />AIR 2.5<br />Available<br />FP 10.1<br />Available<br />FP 10.1<br />Available<br />FP 10.2/AIR 2.6<br />Available<br />FP 10.1/AIR 2.5<br />Available<br />AIR 2.6<br />Available<br />FP 10.2/AIR 2.6<br />Available<br />FP 10.1<br />8<br />
    29. 29. Concepts of Digital Fun<br />Create multi device and user experiences.<br />Device discovery should be automatic or simple.<br />Make use of a wide range of inputs:<br />Multitouch, Gestures, Mic, Camera, Geolocation, Accelerometer, etc…<br />Pixels – different device screen resolution and their relationships matter.<br />Panels – the physical size of devices do not equal screen resolution.<br />Creating one controller application for multiple content.<br />A brain in each application, but only one active at a time.<br />Interaction time: to real time or not to real time the application.<br />Applications that change based upon connected device topology.<br />9<br />
    30. 30. Demos<br />10<br />PickQuick<br />CanvasExpo<br />MADH<br />Video<br />Eiden<br />CoinFlip<br />Photoshop Touch SDK - DeviceCompViewer<br />
    31. 31. PickQuick<br />Discovery using NetGroup and GroupSpecifier (RTMFP).<br />One application for all platforms.<br />TV remote control input.<br />Designed for tablet, scaled down for specific size & ppi.<br />Every app is full game.<br />11<br />
    32. 32. CanvasExpo<br />Discovery using NetGroup and GroupSpecifier (RTMFP).<br />TV is canvas application.<br />Smartphones and Tablets are the input mechanism.<br />Uses multitouch and gestures.<br />Supports multiplayer at the same time.<br />12<br />
    33. 33. CoinFlip<br />Discovery using NetGroup and GroupSpecifier (RTMFP).<br />Accelerometer used on mobile browser where present, but not on desktop.<br />Browser based application, no download.<br />Supports multiplayer at the same time.<br />Every app is full application and runs the same code.<br />13<br />
    34. 34. Mini Dodgem AIR Hockey (MDAH)<br />Discovery using NetGroup and GroupSpecifier (RTMFP).<br />Multiple game board devices, TV & Tablets<br />Smartphone controllers<br />Supports two players at the same time.<br />Accelerometer & multitouch inputs.<br />14<br />
    35. 35. Eiden – Wiimote/WebTop<br />Wii Controller Android application for Wiimote IME.<br />Atrix WebTop for HDMI mirroring.<br />Input is keyboard keyCodes.<br />Supports two Wiimotes, for 2 player game.<br />15<br />
    36. 36. DeviceCompViewer<br />Photoshop Touch SDK ActionScript 3 Library<br />TCP based IP configured & password required setup<br />Sends ExtendScript JS & special Touch SDK commands<br />Hard to check comps on a device<br />16<br />
    37. 37. VideoAware<br />17<br /><ul><li>Discovery using NetGroup and GroupSpecifier (RTMFP).
    38. 38. Context of TV app changes Mobile app to controller</li></li></ul><li>Device Discoverability<br />18<br />RTMFP – multicast over a local network<br /><ul><li>No internet needed, just router with broadcast enabled (typical home router setup)
    39. 39. AS3 only
    40. 40. A lot like mDNS (Bonjour) and UPnP discovery part</li></ul>Configuration<br /><ul><li>NetConnection’s connectionstring conn.connect(“rtmfp:”)
    41. 41. IP in the multicast range - to with for special use (
    42. 42. Port – any valid port
    43. 43. GroupSpecifier name – allows for multiple groups/apps on same ip/port – group management</li></li></ul><li>Using Multitouch and Gestures<br />MultitouchInputMode.GESTURES – Gestures<br />Multitouch.supportedGestures<br />Multitouch.supportedGestureEvents<br />MultitouchInputMode.TOUCH_POINT - Raw Touch Point<br />Multitouch.supportedTouchEvents<br />Can build your own gesture library with raw data points?<br /> - Commercial Product<br />
    44. 44. Accelerometer<br />
    45. 45. Physical Size / Pixels Per Inch<br />Screen Resolutions are Independent of Physical Screen Size<br />
    46. 46. Approaches<br /><ul><li>Scale content to same physical size using PPI.
    47. 47. Use PPI and screen physical size to scale only certain devices.
    48. 48. Create different view/layoutbased on screen resolution and physical size (tablet vs smartphone).
    49. 49. Different view/layout for each device.
    50. 50. Dynamic layouts to fill up space.</li></ul> MOST LIKELY WHAT YOU WILL DO<br /><ul><li>Hybrid of the above approaches</li></li></ul><li>AIR Profiles<br />Capabilities<br />“mobileDevice” Profile<br />“desktop” Profile<br />NativeWindow<br />PDF, Printing<br />Context Menu<br />Notification<br />AS2 VM<br />DRM<br />WebKit<br />renderMode=GPU Accelerometer<br />cacheAsBitmapMatrix<br /> Orientation<br />SystemIdleMode<br /> Camera Roll<br />SQLite<br />Fullscreen Mode<br />File System<br />Networking*<br />TLF Rendering<br />Camera/Microphone*<br />DRM<br />AS2 VM<br /><br />“tv” Profile<br />* May be present<br />
    51. 51. AIR Application Compile & Package<br />24<br />Compiling<br />Packaging<br />ActionScript<br />AIR Application<br />SWF<br />
    52. 52. AIR Current Packagers<br />25<br />Compiling<br />Packagers<br />adt – Desktop, Android, TV, & iOS<br />Creates: .air, .exe, .dmg, .apk, .ipa<br />pfi - iDevice uses Packager for iPhone<br />Creates: .ipa Now part of adt (AIR 2.6)<br />blackberry-airpackager– PlayBook<br />Creates: .bar<br />
    53. 53. How Packaging AIR apps for iOS Works<br />ADT<br />.ipa<br />SWF<br />Assets<br />Runtime is cross compiled down to ARM instructions and is part of each application.<br />ActionScript<br />Captive runtime – The term used for this process. <br />This is a highly requested feature for Android.<br />Flex support for AIR for iOS is coming in AIR 2.7 in 2011. <br /><br />
    54. 54. Discussion Time<br />27<br />Q/A<br />Thank you for attending<br /><br /><br />@renaun<br /><br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.