best practices for flash applications on mobile devices
DESCRIPTION
I presented best practices for mobile development with the Flash platform at the FFK10 conference in GermanyTRANSCRIPT
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Best practices for mobile development with the Flash PlatformMark Doherty | Flash Platform Evangelist
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Before starting...
2
3 questions
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Why Mark looks so French today?
3
©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
©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
©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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 7
Flash and screens
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Applications are beginning adapt to context
RIA Cloud Devices
Adobe Systems Inc.| FOTB2009
> >
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
9
Digital Explosion Across Multiple Screens
Consumer Electronics
Personal Computers
Mobile Phones
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Platform - A complete system for web innovation
© 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
© 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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 13
Flash Player 10.1 API and testing
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 14
Design considerations
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Context
15
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
320px
480p
x
800p
x
480px
16
Screens
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
44px7mm
≠
17
Finger
©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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 19
Native keyboard
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash best practices
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Graphical optimizations
90%
10%
rendering pure algorithm
©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
©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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Reusing objects
©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
©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 ?
©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
©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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Video
H264
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex on mobile ?
© 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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
AIR 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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
AIR Packaging & Distribution Work%ow
.ipa
.air (swf, jpg, mp3)
.air
.apk
.exe
.dmg
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Resources
©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
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Fight !
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Questions?
©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