Digital Fun for the Digital Home

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Renaun Erickson – Last updated 2011.05.06

Digital Fun for the Digital Home: TV, Tablets, & Smartphones


About Me

2

Renaun EricksonDeveloper Evangelist, Adobe Systems Inc

[email protected]

http://github.com/renaun

@renaun

http://renaun.com/blog

Code in the Flash Player (local mic access)

Mobile application developer

Device Junkie

Based in Henderson, NV, USA

Like Games, Jeeps, and Archaeology

Enjoys 4 lovely kids

mailto:[email protected]



What is the Digital Home?

3


Can Mean a lot of Things!

Cable & Broadcast Media

Home Theatre / Televisions

Home Automation

Tablets

4

What are the digital home and digital living?

The digital home is an evolution of the idea that PCs, consumer electronics and mobile devices should work together seamlessly through a wired or wireless network to share digital content within a home environment. Digital living extends that idea to include sharing content on the go as well.

Digital Living Network Alliance (DLNA) dlna.org

Appliances

Telecommunication

Gaming Consoles

Smartphones


The Center of Digital Fun

5


Digital Fun for the Digital Home

6

Smart TV (w/ AIR) Wireless Router

Tablets Smartphones


Device Landscape for Adobe Runtimes

7

Desktop

Netbooks

Android

RIM Playbook

Apple iOS

Google TV

Televisions

WebOS

Open Screen Project Tons of OS & Chipsets No single control of

runtime releases Abstracting as much of

device fragmentation as possible

Remember early stages of device OS and runtimes, constant change


Snapshot of Current Hardware

8

Samsung Smart TV

Sony Google TV

Logitech Revue

Android Phones

RIM PlayBook

Apple iPad2/iPhone4

Android Tablets

Palm Pre 2

Presentation Demos MAX 2010 AIR for TV

Dev Kit Router Motorola Atrix / with

WebTop iPad2 iPod 5th gen iPhone 3GS Galaxy Tab Nexus One

2011AIR 2.5

AvailableFP 10.1

AvailableFP 10.1

AvailableFP 10.2/AIR 2.6


AvailableAIR 2.6


AvailableFP 10.1


Concepts of Digital Fun

Create multi device and user experiences.

Device discovery should be automatic or simple.

Make use of a wide range of inputs:

Multitouch, Gestures, Mic, Camera, Geolocation, Accelerometer, etc…

Pixels – different device screen resolution and their relationships matter.

Panels – the physical size of devices do not equal screen resolution.

Creating one controller application for multiple content.

A brain in each application, but only one active at a time.

Interaction time: to real time or not to real time the application.

Applications that change based upon connected device topology. 9


Demos

10

PickQuickCanvasExpoMADHVideoEidenCoinFlipPhotoshop Touch SDK - DeviceCompViewer


PickQuick

Discovery using NetGroup and GroupSpecifier (RTMFP).

One application for all platforms.

TV remote control input.

Designed for tablet, scaled down for specific size & ppi.

Every app is full game.

11


CanvasExpo


TV is canvas application.

Smartphones and Tablets are the input mechanism.

Uses multitouch and gestures.

Supports multiplayer at the same time.

12


CoinFlip


Accelerometer used on mobile browser where present, but not on desktop.

Browser based application, no download.

Supports multiplayer at the same time.

Every app is full application and runs the same code.

13


Mini Dodgem AIR Hockey (MDAH)


Multiple game board devices, TV & Tablets

Smartphone controllers

Supports two players at the same time.

Accelerometer & multitouch inputs.

14


Eiden – Wiimote/WebTop

Wii Controller Android application for Wiimote IME.

Atrix WebTop for HDMI mirroring.

Input is keyboard keyCodes.

Supports two Wiimotes, for 2 player game.

15


DeviceCompViewer

Photoshop Touch SDK ActionScript 3 Library

TCP based IP configured & password required setup

Sends ExtendScript JS & special Touch SDK commands

Hard to check comps on a device

16


VideoAware

17


Context of TV app changes Mobile app to controller


Device Discoverability

18

RTMFP – multicast over a local network No internet needed, just router with broadcast enabled (typical home

router setup)

AS3 only

A lot like mDNS (Bonjour) and UPnP discovery part

Configuration NetConnection’s connection string conn.connect(“rtmfp:”)

IP in the multicast range - 224.0.0.0 to 239.255.255.255 with 224.0.0.0/225 for special use (http://www.iana.org/assignments/multicast-addresses/multicast-addresses.xml)

Port – any valid port

GroupSpecifier name – allows for multiple groups/apps on same ip/port – group management


Using Multitouch and Gestures

MultitouchInputMode.GESTURES – Gestures

Multitouch.supportedGestures

Multitouch.supportedGestureEvents

MultitouchInputMode.TOUCH_POINT - Raw Touch Point

Multitouch.supportedTouchEvents

Can build your own gesture library with raw data points? http://gestureworks.com/ - Commercial Product

http://gestureworks.com/


Accelerometer


Physical Size / Pixels Per Inch

Screen Resolutions are Independent of Physical Screen Size

Device Resolution PPI Physical

Nexus One / Droid Incredible / HTC Desire

800x480 254 3.7’

HTC Evo 4G / HTC Desire HD 800x480 217 4.3’

Droid / Droid 2 854x480 265 3.7’

Droid X 854x480 228 4.3’

Samsung Galaxy S Vibrant 800x480 232 4.0’

iPhone 3GS and lower 480x320 163 3.5’

iPhone 4 960x640 326 3.5’

iPad 1024x768 132 9.7’

Galaxy Tab/PlayBook 1024x600 170 7’


Approaches

Scale content to same physical size using PPI.

Use PPI and screen physical size to scale only certain devices.

Create different view/layout based on screen resolution and physical size (tablet vs smartphone).

Different view/layout for each device.

Dynamic layouts to fill up space.

MOST LIKELY WHAT YOU WILL DO

Hybrid of the above approaches


AIR Profiles

* May be present

“desktop” Profile “mobileDevice” ProfileCapabilities

“tv” Profile

SQLiteFullscreen Mode

File SystemNetworking*

TLF RenderingCamera/

Microphone*

NativeWindowPDF, PrintingContext MenuNotification

AS2 VMDRM

WebKit

renderMode=GPU Accelerometer cacheAsBitmapMatrix Orientation SystemIdleMode Camera Roll

DRMAS2 VM

http://bit.ly/aOlHQ3


AIR Application Compile & Package

24

ActionScript SWF

Compiling

AIR Application

Packaging


AIR Current Packagers

25

Compiling

adt – Desktop, Android, TV, & iOSCreates: .air, .exe, .dmg, .apk, .ipa

Packagers

pfi - iDevice uses Packager for iPhoneCreates: .ipa Now part of adt (AIR 2.6)

blackberry-airpackager – PlayBookCreates: .bar


How Packaging AIR apps for iOS Works

.ipa

Runtime is cross compiled down to ARM instructions and is part

of each application.

ADT

SWFAsset

s

Captive runtime – The term used for this process. This is a highly requested feature for Android.

Flex support for AIR for iOS is coming in AIR 2.7 in 2011. http://www.surveymonkey.com/s/flexprerelease

ActionScript


Discussion Time

27

Q/AThank you for attending

[email protected]


@renaun

http://renaun.com/blog

mailto:[email protected]


Digital Fun for the Digital Home

Technology

Transcript of Digital Fun for the Digital Home