Best practices for Flash applications on mobile devices

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

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

Before starting...

3 questions

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

Why Mark looks so French today?


Ok then... who are you ?

Michaël Chaize
Flash Platform Evangelist

My blog: www.RIAgora.com

@mchaize


Best-practices for mobile development ?

“Hopefully everyone understands
that Michael Chaize commenting
on mobile development is
equivalent to Tiger Woods
commenting on PaperVision 3D”

Lee Brimelow


Menu du jour

Flash and screens

Design considerations

Flash best practices

Flex on mobile ?

AIR on mobile devices

Resources


Flash and screens


Applications are beginning adapt to context

> >

RIA Cloud Devices

Adobe Systems Inc.| FOTB2009

Digital Explosion Across Multiple Screens

Consumer
Electronics
Mobile
Phones

Personal
Computers

9

Flash Platform - A complete system for web innovation


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

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

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


Flash Player 10.1 API and testing


Design considerations

Context


Screens

800px
480px

480px
320px


Finger

7mm

44px
≠


Usually, a nger comes with a hand

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

Native keyboard


Flash best practices

Graphical optimizations

10%

90%

rendering pure algorithm


Understand its behavior

Avoid high-rate timers

Keep FPS as low as possible

Set dynamic FPS
FPS and
enterFrame
events


Memory optimizations and the getSize() method

Display Objects Primitive types

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

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

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

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


Reusing objects


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


Freeing MovieClips

Text
Rectangle ? Alpha ? RemoveChild ? Visible ?

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();
}


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


Text

Feel the transparency > opaqueBackground

Avoid TLF

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

Test your animations with different qualities of Stage


Video

H264

Flex on mobile ?

Slider : Flex Mobile Framework

 Flex applications run on Flash Player 10.1, but...
 Challenges: Performance of the SDK, Diﬀerent 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

AIR on mobile devices


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

AIR Packaging & Distribution Work ow

.air

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

.ipa

.apk


Resources


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/


Fight !


?
Questions


Remember... slide ve...

“Hopefully everyone understands
that Michael Chaize commenting
on mobile development is
equivalent to Tiger Woods
commenting on PaperVision 3D”

Lee Brimelow


Best practices for Flash applications on mobile devices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to Best practices for Flash applications on mobile devices

Similar to Best practices for Flash applications on mobile devices (20)

More from Michael Chaize

More from Michael Chaize (8)

Recently uploaded

Recently uploaded (20)

Best practices for Flash applications on mobile devices