50
©2010 Adobe Systems Incorporated. All Rights Reserved. The Flash Platform For Multiple Screens Paul Trani [email protected] www.paultrani.com @paultrani

Flash for Mobile Devices

Embed Size (px)

DESCRIPTION

Understanding and creating Flash content for mobile devices.

Citation preview

Page 1: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

The Flash PlatformFor Multiple Screens

Paul Trani [email protected] www.paultrani.com @paultrani

Page 2: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved. 2

Digital Explosion Across Multiple Screens

Consumer Electronics

Personal Computers

Mobile Phones

Page 3: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player on most smartphones shipping in 2012, >250M cumulative

Source: Strategy Analytics smartphone forecast (January 2010) and Adobe adoption estimates

Milli

ons o

f Sm

artp

hone

s

9%

35%

53%

Page 4: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Agenda

1. Design considerations

2. Flash and screens

3. Flash best practices

4. Flex on mobile?

5. AIR on mobile devices

6. Resources

Page 5: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Design Considerations

Page 6: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved. 7

Context

Page 7: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Screens

Page 8: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved. 9

44px≠

Finger

Page 9: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved. 10

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Usually, a finger comes with a hand

Page 10: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Native keyboard

Page 11: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash for Multiple Screens

Page 12: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Adobe® Flash® Media Server

FamilyAdobe® BlazeDS

Adobe® LiveCycle®

Data Services

Flash Platform Overview

Applications, Content and Video

MULTISCREEN CONTENT AND APPLICATIONS

CLIENT RUNTIMES

Adobe® Flash® Player Adobe®

AIR®

SERVERS & SERVICES

Adobe® Flash® Professional CS5

Adobe® Flash®

Catalyst™

Adobe® Flash® Builder™

Adobe® Creative Suite 5

TOOLS

Page 13: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player 10.1

Page 14: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player 10.1

Designed For New PlatformsGreater Performance

Enhanced Rich Media Support

Page 15: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Just released! The only consistent runtime for connected devices Targeting desktops, mobile phones, netbooks, tablets, and the Digital Home Runtimes will be available over-the-air through marketplaces and Adobe.com

Flash Player 10.1

Page 16: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Technology Partners

Open Screen Project

Content Partners

Page 17: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Designed for New Platforms

Brings full Flash Player feature set to devices

Mobile-ready features that take advantage of native device capabilities:

Mobile text input Multi-touch and gestures Accelerometer input Geolocation Optimized SWF management for mobile Sleep mode Graphics hardware acceleration H.264 video hardware decoding

Page 18: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Accelerometer

import flash.sensors.Accelerometer;import flash.events.AccelerometerEvent;Accelerometer.isSupported;

var accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);

function update(e:AccelerometerEvent):void{

e.accelerationX;e.accelerationY;e.accelerationZ;

}

Page 19: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Gestures

cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);function onZoom(e:TransformGestureEvent):void{

cell.scaleX *= e.scaleX;cell.scaleY = cell.scaleX;

}cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);

function onRotate(e:TransformGestureEvent):void{

cell.rotation += e.rotation;}

Page 20: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Geolocation

var geo: Geolocation;

if (Geolocation.isSupported) {            geo = new Geolocation();            geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);            geo.setRequestedUpdateInterval(10000);}else {            log.text = "Geolocation feature not supported"; }

Page 21: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Hardware Keys

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);

function onKeyDown(event:KeyboardEvent):void { //Back Key  if (event.keyCode == 94)  {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  } //Menu Key  if (event.keyCode == 95)  {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }}

Page 22: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Greater Performance

Improvements in: Rendering/scripting performance Start-up time Battery and CPU optimizations Hardware acceleration of graphics and video Memory utilization and management

Memory usage reduction (often by 50% of more)

Page 23: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

HTTP streaming Content protection Peer-assisted networking Buffered stream catch-up Stream reconnect* Smart Seek* Fast Switch* Microphone Access+ Dynamic frame rate+

Media Support

* FMS server + Desktop only

Page 24: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

AIR on Mobile

Page 25: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

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

Adobe AIR for smartphones (and tablets)

Everything Flash Player 10.1 has and then some Adobe AIR allows developers to build standalone applications using Flash Public support from RIM and Motorola First mobile operating system to be supported is Android Provides Flash developers access to app stores

Page 26: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

AIR Packaging & Distribution Workflow

.ipa

.air (swf, jpg, mp3)

.air

.apk

.exe

.dmg

Page 27: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Professional CS5

Page 28: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

What’s New In Flash Pro CS5

ExpressivenessNew Text Engine*Spring for Bones*New Deco tools*

Enhanced ScriptingFlash Builder IntegrationCode Snippets Panel Custom Class Introspection

Improved ProductivityXML based FLAs Share assets via FXGVideo improvements

*Not ideal for mobile

Page 29: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash for Android

Page 30: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Creating an Android App: Setup

Get the Android SDK: http://developer.android.com/sdk Allows you to create and install apps on your device

Android - SDK Manager to install packages etc. ADB – Android Device Debugger installs apps on your device DDMS - Dalvik Debug Monitor for desktop simulation.

Join the AIR Prerelease http://labs.adobe.com/technologies/air/ Get AIR for Android runtime .apk installed Get the AIR for Android Extension for Flash CS5 to make apps

Page 31: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash CS5 AIR for Android Extension

Create, install and launch an .apk using Flash Professional CS5

.apk

Page 32: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Optimization

Page 33: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Graphics

Consider bitmaps over vectors Keep bitmaps as small as possible Minimize number of vectors Test your animations with different qualities of Stage

Avoid, if possible: Filters Blend modes Transparency Perspective distortion

Page 34: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Reuse objects!

Page 35: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Text

Use opaque background over transparencyAvoid TLFTest different anti-aliasing technics (animation, bitmap text...) Avoid frequently-updated text

Lorem Ipsum dolor…

Page 36: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Redraw Regions

Text If an object's properties are animated, its bounding box is a redraw region Objects that overlap the redraw region are redrawn

See which areas of your movie are refreshed every frame. Test Movie. View > Show Redraw Regions Right-click > Show Redraw Regions (debug player only)

Page 37: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Graphical optimizations

Page 38: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

It’s all about Timing

Set frame rate as low as possible Dynamically adjust frame rate Use enterFrame event when necessary Consolidate into a single handler instead of multiple ones

Avoid, if possible: High-frequency timers UpdateAfterEvent

Page 39: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Horizontal? Vertical? Both?

Content should dictate orientation, but don’t forget about the keyboard.Consider adjusting content based on layout:

stage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;

function setPosition():void{vidHolder.x = stageWidth/2 - vidHolder.width/2;vidHolder.y = stageHeight/2 - vidHolder.height/2;

//If the layout is verticalif (stage.stageWidth < stage.stageHeight){//Adjust graphics}

}setPosition();

stage.addEventListener(Event.RESIZE, resizeLayout);function resizeLayout(e:Event):void{

setPosition();}

800p

x

480px

800px

480px

Page 40: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Display Objects

Objects that aren’t interactive, use Shape();trace(getSize(new Shape()));// output: 216

Interactive but no timeline? Use Sprite();trace(getSize(new Sprite()));// output: 396

Need animation? Use Movieclip();trace(getSize(new MovieClip()));// output: 416

Use the appropriate type of display objectgetSize(); will return object size

Page 41: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Freeing MovieClips

TextAlpha? RemoveChild? Visible?Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event.

runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate);function deactivate(e:Event):void{ e.currentTarget.removeEventListener(Event.ENTER_FRAME,handleMovement); e.currentTarget.stop();}

Page 42: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Bitmap Caching

cacheAsBitmap - the object is rendered into an offscreen bitmap

Automatically used when: Object overlaps a redraw region and the object is unchanged (except position)

Bitmap caching issues: Uses a lot of memory (width * height * 4 bytes) Objects with cached bitmaps are more expensive to change

Don’t use cacheAsBitmap when: Animating object’s size Animating position of object’s child

Page 43: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Video

Page 44: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Video performance problems

■ Inappropriate video encoding■ Inefficient video player

Page 45: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Video encoding format

Preferred AlternateVideo codec H.264 Constrained Baseline

Profile, up to 30 fpsOn2 VP6 Simple Profile or Sorensen Spark, up to 30 fps

Audio codec AAC-LC, 44.1 kHz, stereo MP3, 44.1 kHz, stereo

Wi-Fi 3G EDGE/1x-RTTCombined bit rate (audio and video)

500 kbps(350 kbps for On2 VP6 and Sorensen Spark)

350 kbps 100 kbps

Max resolution 480 x 320 320 x 240

Max audio bit rate 160 kbps(128 kbps for On2 VP6 and Sorensen Spark) 

64 kbps 32 kbps

Page 46: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Video Player Don’ts

■ Minimize redraw region during video playback■ Reduce frequency of non-video updates (i.e. move playhead once per second) ■ Avoid graphics that overlap the video (video controls, transparent overlay)■ Set x and y to be on pixel boundary

No transformations■ No rotation, skew, perspective projection■ No cacheAsBitmap, filters, scrollRect, z■ No color transforms, alpha

No other activity■ No ActionScript timers or enterFrame handlers■ No callbacks registered with NetStream■ Stop all timelines

Page 47: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flex on Mobile?

Page 48: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Challenges: Performance of the SDK, Different screen sizes and densities.

Solution: Slider - the Flex Mobile Framework Optimizes both the performance and user experience New mobile development capabilities:

Managing application “screens” Resolution-independent layout

New user interface components designed for mobile form factors

Flex on Mobile?

Page 49: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Resources

Page 50: Flash for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

Resources

■ Adobe TV■ Optimization guides:

■ Flash Player optimization for mobile devices■ Optimization for the iPhone■ AIR best practices for mobile devices■ Ads optimization

■ Technical articles:■ http://www.adobe.com/devnet/flashplayer/articles/

fplayer10.1_hardware_acceleration.html■ http://www.RIAgora.com■ http://www.paultrani.com ■ http://www.gotoandlearn.com■ http://www.flashmobileblog.com