Mobile revolution

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Serge Jespers - EMEA Platform Evangelist - [email protected] - @sjespers"e mobile revolution


In this session: Introduction to Flash Player 10.1 and AIR 2 Design considerations New APIs in Flash Player 10.1 and AIR 2 Tools Q & hopefully A

2

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 3

Flash & AIR


Web content & applications Standalone applications(Inside the browser) (Outside the browser)

Flash vs AIR


Flash Player 10.1

"e only consistent browser-based runtime for connected devices

Targeting desktops, mobile phones, netbooks, tablets, and the Digital Home

On track for delivery to consumers in !rst half of 2010

Runtimes will be available over-the-air through marketplaces and Adobe.com


Brings full Flash Player feature set to devices

New Features:

Multi-touch & gestures

Accelerometer

Screen orientation

Mobile text input

Device capabilities discovery

Globalization support (GSLib)

Mobile se#ings manager

Global error handling

Flash Player 10.1


17MB

4MB

25MB

23MB

26MB

15MB

Flash Player 10

Flash Player 10.1

Gamma Bros

Wall-E

FP10 Demo

Flex Photo Album

Yahoo Ad

Flex Data Grid0

0

0

0

0

0

32MB

13MB

69MB

57MB

47MB

40MB

Automatic Memory Reduction


Active State with Animation

6.5 hours

Low Powerwith Animation14.5 hours

Active State with Video4 hours

8

Ba#ery usage


Flash Player 10.1 Showcase


Browser Download

Complementary deployment mechanisms for mobile

Downloaded through on-device catalog

Bundled with System So$ware Updates


Adobe AIR for smartphones (and tablets)

Adobe AIR allows developers to build standalone applications using Flash technology

Public support from Google, RIM and Motorola

First mobile operating system to be supported is Android

Provides Flash developers access to app stores

11


AIR Packaging & Distribution Work%ow

.air (swf, jpg, mp3)

.air

.apk

.exe

.dmg


AIR Showcase


Design

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Context

15

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. #adobeAUG XL351

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. #adobeAUG XL351

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. #adobeAUG XL351

FlashWrap by Ted Patrick

®


TripLog/1040

$12 99Built with

Xcode


800p

x

480px

20

Screens

800px

480p

x


44px7mm

≠

21

Finger


Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con!dential.

22

Usually, a !nger comes with a hand


Native keyboard


Optimize your code!

http://adobe.com/go/optimize


New APIs

®


Multi-touch

®


Multi-touch• Similar to multiple mouse events

• Both multi-touch events and gesture events

• Requires multi-touch hardware (Pre#y obvious)

• Amount of touch points only limited by the hardware

• Supported in AIR 2 and FP10.1 (if the browser supports multi-touch)

®


Multi-touch / Gesturespublic function init():void

{ Multitouch.inputMode = MultitouchInputMode.GESTURE; logo.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate ); logo.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom );}private function onRotate(evt:TransformGestureEvent):void{ // pssst... you should try rotationX or Y logo.rotation += evt.rotation;}private function onZoom(evt:TransformGestureEvent):void{ logo.scaleX *= evt.scaleX; logo.scaleY *= evt.scaleY;}

®


Screen orientation

®


Screen orientation• Tells you if your app is viewed in landscape or portrait mode

• Reformat your application based on the orientation

®


Screen orientationimport flash.events.StageOrientationEvent;

stage.addEventListener("orientationChange", orientationChangedHandler);

function orientationChangedHandler(event:StageOrientationEvent){ dummy.width = stage.stageWidth - 20; dummy.height = stage.stageHeight - 20;}

®


Accelerometer

®


Accelerometer• Different from screen rotation

• Converts movement in to three dimensional coordinates

• X, Y and Z acceleration

®


Accelerometervar accelerometer = new Accelerometer();

accelerometer.addEventListener(AccelerometerEvent.UPDATE, onMove);accelerometer.setRequestedUpdateInterval(40);

function onMove(event:AccelerometerEvent):void{ var ax = event.accelerationX*20; var ay = (event.accelerationY*20)*-1; var az = event.accelerationZ; football.x += ax; football.y += ay; football.scaleX = football.scaleY = az;}

®


Geo location

®


Geo location• Get the device location coordinates

• Latitude, longitude, altitude, speed and heading

• Build your own Tom Tom ;-)

®


Geo locationimport flash.sensors.Geolocation;import flash.events.GeolocationEvent;

var geo = new Geolocation();geo.setRequestedUpdateInterval(1000);

geo.addEventListener(GeolocationEvent.UPDATE, onTravel);

function onTravel(event:GeolocationEvent):void{ long.text = event.latitude.toString(); lat.text = event.longitude.toString(); heading.text = event.heading.toString(); speed.text = event.speed.toString(); hacc.text = event.horizontalAccuracy.toString(); vacc.text = event.verticalAccuracy.toString();}


Tools


Flash Builder & Flash Professional CS5


Adobe Device Central CS5


•All Major Device Platforms

•680 Pro!les, all Flash versions

•Custom Pro!les

•Location API support (KML, GPX)

•Accelerometer Emulation

•Improved Search Filters

•HTML5 Webkit Integration

•

Adobe Device Central CS5


Questions?


Thank you!

[email protected]://www.webkitchen.behttp://twitter.com/sjespers

Technology

Mobile revolution