Mobile revolution

e mobile revolution
Serge Jespers - EMEA Platform Evangelist - serge@adobe.com - @sjespers

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

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

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

Flash & AIR

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

Flash vs AIR

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


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


Flash Player 10.1

 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


Automatic Memory Reduction

40MB
Gamma Bros
0 15MB

47MB
Wall-E
0 26MB

57MB
FP10 Demo
0 23MB

69MB
Flex Photo Album
0 25MB

13MB
Yahoo Ad
0 4MB

32MB
Flex Data Grid
0 17MB Flash Player 10

Flash Player 10.1


Ba ery usage

Active State Active State Low Power
with Video with Animation with Animation
4 hours 6.5 hours 14.5 hours
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8

Flash Player 10.1
Showcase


Complementary deployment mechanisms for mobile

Bundled with System Downloaded through Browser Download
So ware Updates on-device catalog


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

.exe
.air
(swf, jpg, mp3)
.dmg

.apk


AIR Showcase


Design


Context


®

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

FlashWrap
by Ted Patrick
®

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

Built with
Xcode
$12 99

TripLog/1040

®


Screens

800px

480px 800px

480px


Finger

7mm

44px
≠


Usually, a nger comes with a hand


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

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 / Gestures
public 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 orientation
import flash.events.StageOrientationEvent;

stage.addEventListener("orientationChange", orientationChangedHandler);

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

®


Accelerometer

®


Accelerometer
• Diﬀerent from screen rotation

• Converts movement in to three dimensional coordinates

• X, Y and Z acceleration

®


Accelerometer
var 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 location
import 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


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


Questions?


Thank you!

serge@adobe.com
http://www.webkitchen.be
http://twitter.com/sjespers


Mobile revolution

More Related Content

What's hot

Similar to Mobile revolution

Recently uploaded

Mobile revolution