best practices for flash applications on mobile devices

39
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential. Best practices for mobile development with the Flash Platform Mark Doherty | Flash Platform Evangelist

Upload: michael-chaize

Post on 08-May-2015

5.781 views

Category:

Technology


0 download

DESCRIPTION

I presented best practices for mobile development with the Flash platform at the FFK10 conference in Germany

TRANSCRIPT

Page 1: Best practices for Flash applications on mobile devices

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

Best practices for mobile development with the Flash PlatformMark Doherty | Flash Platform Evangelist

Page 2: Best practices for Flash applications on mobile devices

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

Before starting...

2

3 questions

Page 3: Best practices for Flash applications on mobile devices

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

Why Mark looks so French today?

3

Page 4: Best practices for Flash applications on mobile devices

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

Ok then... who are you ?

4

Michaël ChaizeFlash Platform Evangelist

My blog: www.RIAgora.com

@mchaize

Page 5: Best practices for Flash applications on mobile devices

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

Best-practices for mobile development ?

5

“Hopefully everyone understands that Michael Chaize commenting

on mobile development is equivalent to Tiger Woods

commenting on PaperVision 3D”

Lee Brimelow

Page 6: Best practices for Flash applications on mobile devices

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

Menu du jour

6

Flash and screens

Design considerations

Flash best practices

Flex on mobile ?

AIR on mobile devices

Resources

Page 7: Best practices for Flash applications on mobile devices

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

Flash and screens

Page 8: Best practices for Flash applications on mobile devices

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

Applications are beginning adapt to context

RIA Cloud Devices

Adobe Systems Inc.| FOTB2009

> >

Page 9: Best practices for Flash applications on mobile devices

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

9

Digital Explosion Across Multiple Screens

Consumer Electronics

Personal Computers

Mobile Phones

Page 10: Best practices for Flash applications on mobile devices

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

Flash Platform - A complete system for web innovation

Page 11: Best practices for Flash applications on mobile devices

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

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

Page 12: Best practices for Flash applications on mobile devices

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

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

Page 13: Best practices for Flash applications on mobile devices

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

Flash Player 10.1 API and testing

Page 14: Best practices for Flash applications on mobile devices

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

Design considerations

Page 15: Best practices for Flash applications on mobile devices

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

Context

15

Page 16: Best practices for Flash applications on mobile devices

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

320px

480p

x

800p

x

480px

16

Screens

Page 17: Best practices for Flash applications on mobile devices

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

44px7mm

17

Finger

Page 18: Best practices for Flash applications on mobile devices

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

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

18

Usually, a "nger comes with a hand

Page 19: Best practices for Flash applications on mobile devices

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

Native keyboard

Page 20: Best practices for Flash applications on mobile devices

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

Flash best practices

Page 21: Best practices for Flash applications on mobile devices

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

Graphical optimizations

90%

10%

rendering pure algorithm

Page 22: Best practices for Flash applications on mobile devices

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

Understand its behavior

FPS and enterFrame

events

Avoid high-rate timers

Keep FPS as low as possible

Set dynamic FPS

Page 23: Best practices for Flash applications on mobile devices

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

Memory optimizations and the getSize() method

trace(getSize(new Shape()));// output: 236

trace(getSize(new Sprite()));// output: 412

trace(getSize(new MovieClip()));// output: 440

Display Objects Primitive types

var a:Number;trace(getSize(a));// output: 8

var b:int;trace(getSize(b));// output: 4

var name:String;trace(getSize(name));// output: 4

name = "";trace(getSize(name));// output: 24

Page 24: Best practices for Flash applications on mobile devices

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

Reusing objects

Page 25: Best practices for Flash applications on mobile devices

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

Freeing memory

var mySprite:Sprite = new Sprite();

mySprite = null;

Remember that when an object is set to null, it is not necessarily removed from memory. Sometimes the garbage collector does not run, if available memory is not considered low enough. Garbage collection is not predictable.

Object pooling

Page 26: Best practices for Flash applications on mobile devices

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

Freeing MovieClips

Text

runningBoy.addEventListener(Event.ADDED_TO_STAGE,activate);runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate);

function activate(e:Event):void{ e.currentTarget.addEventListener(Event.ENTER_FRAME,handleMovement);}

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

Rectangle ? Alpha ? RemoveChild ? Visible ?

Page 27: Best practices for Flash applications on mobile devices

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

Bitmaps

Consider bitmaps vs. vectors.

Avoid filters and blend modes.

Transparency is very expensive.

Keep bitmaps as small as possible.

cacheAsBitmap is not that easy

Page 28: Best practices for Flash applications on mobile devices

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

Text

Feel the transparency > opaqueBackground

Avoid TLF

Test different anti-aliasing technics (lisibility, animation...)

Test your animations with different qualities of Stage

Page 29: Best practices for Flash applications on mobile devices

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

Video

H264

Page 30: Best practices for Flash applications on mobile devices

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

Flex on mobile ?

Page 31: Best practices for Flash applications on mobile devices

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

Slider : Flex Mobile Framework

Flex applications run on Flash Player 10.1, but...

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

Based on the Flex 4 codebase, Slider will include signi"cant changes to optimize both the performance and user experience on more constrained device environments.

Slider will include new capabilities speci"cally designed for mobile development, such as a new construct for managing application “screens”. Resolution-independent layout.

A new set of user interface components will be added which are designed for mobile form factors and input methods.

31

Page 32: Best practices for Flash applications on mobile devices

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

AIR on mobile devices

Page 33: Best practices for Flash applications on mobile devices

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

Adobe AIR for smartphones (and tablets)

Adobe AIR allows developers to build standalone applications using Flash technology

Public support from RIM and Motorola

First mobile operating system to be supported is Android

Provides Flash developers access to app stores

AIR applications can be repackaged for the iPhone

33

Page 34: Best practices for Flash applications on mobile devices

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

AIR Packaging & Distribution Work%ow

.ipa

.air (swf, jpg, mp3)

.air

.apk

.exe

.dmg

Page 35: Best practices for Flash applications on mobile devices

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

Resources

Page 36: Best practices for Flash applications on mobile devices

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

Resources

■ Slides and samples on my blog: h#p://www.RIAgora.com

■ Adobe TV

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

■ Technical articles:■ h#p://www.adobe.com/devnet/%ashplayer/articles/

fplayer10.1_hardware_acceleration.html

■ h#p://www.%ashmobileblog.com/

36

Page 37: Best practices for Flash applications on mobile devices

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

Fight !

Page 38: Best practices for Flash applications on mobile devices

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

Questions?

Page 39: Best practices for Flash applications on mobile devices

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

Remember... slide "ve...

39

“Hopefully everyone understands that Michael Chaize commenting

on mobile development is equivalent to Tiger Woods

commenting on PaperVision 3D”

Lee Brimelow