Tips and Tricks for Mobile Flash Development

@paultrani

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

MOBILE FLASH DEVELOPMENTTips and Tricks for

@paultrani

Live

Work

Love

Ride

Play

Paul Trani, Adobe Evangelist

@paultrani

Tips and Tricks

Overview of mobile Take advantage of mobile specific capabilities Learn effective ways to optimize Flash content

@paultrani

UNDERSTANDING MOBILEMobile Flash Development

@paultrani

Understanding Mobile

@paultrani

Processing Power

@paultrani

Bandwidth

@paultrani

Internet Users

@paultrani

Screen Size

@paultrani

Think first.

@paultrani

Don’t think mobile last

@paultrani

LET’S START THINKING…Mobile Flash Development

@paultrani

Device Sizes

1024x768

120ppi

1024x600

240ppi

854x480

240ppi

800x480

240ppi

480x320

160ppi

960x640

326ppi

Capabilities

@paultrani

Design for Real Hand Sizes

45x45px15x15px

Start Button

@paultrani

Navigation != Buttons

@paultrani

Gestures

Pinch to zoom Click for more info Swipe for additional items GPS for nearby stores?

@paultrani

Mouse/Touch Events

Touch Events have more overhead than Mouse Events

Can disable with

mouseEnabled

mouseChildren

Don’t use MouseEvent.MOUSE_MOVE

Check Mouse position at interval

@paultrani

Mulitouch Accelerometer Orientation Microphone Keyboard GPS Camera

Device CapabilitiesSwipe/Accelerometer

@paultrani

WORKFLOWMobile Flash Development

@paultrani

Flash/AIR Across Devices

@paultrani

Flash/AIR Across Devices

@paultrani

DIFFERENT MOBILE PLATFORMSMobile Flash Development

@paultrani

Don’t Resize. Recreate.

@paultrani

iOS User Experience

Back

Home

New/Edit

@paultrani

Options Menu

Android User Experience

Back Home

@paultrani

BlackBerry Playbook User Experience

Application Switching

Application Switching

Minimize Application

Bring up Keyboard

Orientation Change

Context Menu

Flash Silk

@paultrani

One Project. Multiple Platforms.

@paultrani

OPTIMIZATIONMobile Flash Development

@paultrani

The Elastic Racetrack

@paultrani

GRAPHICS & RENDERINGMobile Flash Development

@paultrani

Reuse Objects

Consider bitmaps over vectors Keep bitmaps as small as possible

@paultrani

Things to Avoid

FiltersBlend modes:Layer, Alpha, Erase, Overlay, Hard Light, Lighten, Darken

@paultrani

Text

@paultrani

Display Objects

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

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

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

@paultrani

Off Screen Display Objects

Visible = false

@paultrani

Clean Up

alpha = 0 rendering still occurs Set visible = false Events and other costs are still incurred when visible=false.

removeChild instead.

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

@paultrani

Software Rendering

@paultrani

Prevent Excessive Redraws

@paultrani

Hardware Rendering

@paultrani

Cache as Bitmap

Object is rendered into an offscreen bitmap Use when an object changes position only

@paultrani

Cache as Bitmap Matrix

Scale, skew, rotate, and translate the object without triggering bitmap regeneration.

@paultrani

CPU vs. GPUOtherworld

@paultrani

Blitting

Draw vector content to a bitmap before it ever gets rendered to the stage.

Like painting on the stage.

Blitting

@paultrani

Test, Test, Test

Elliot Mebane http://www.roguish.com

Aliens!

@paultrani

ACTIONSCRIPT PERFORMANCEMobile Flash Development

@paultrani

Performance Tests

https://github.com/mrdoob/Hi-ReS-Stats

@paultrani

Flex Profiler

@paultrani

Time Management

In General, ENTER_FRAME performs better than Timer Use single listener, and then dispatch

@paultrani

Loading and Unloading SWFs

unloadAndStop() Handles the freezing natively and forces the GC process to run:

var loader:Loader = new Loader(); loader.load ( new URLRequest ( "content.swf" ) ); addChild ( loader );

stage.addEventListener ( MouseEvent.CLICK, unloadSWF );function unloadSWF ( e:MouseEvent ):void {

// Unload the SWF file with automatic object deactivation loader.unloadAndStop();

}

@paultrani

Instance Allocation

@paultrani

Instance Allocation

@paultrani

Event Propagation

Can be very expensive, especially deeply nested display list instances.

Event.stopPropagation(); Event.stopImmediatePropagation();

@paultrani

Event Propagation

@paultrani

Thank You

Optimizing Mobile Content for the Adobe Flash PlatformThibault Imbertwww.bytearray.org/?p=1363

Flash Pro New Features@flashplatform – Tom Barclay & Richard Galvan

Paul Trani [email protected] www.paultrani.com

@paultrani

Thank You

Optimizing Mobile Content for the Adobe Flash PlatformThibault Imbertwww.bytearray.org/?p=1363

Flash Pro New Features@flashplatform – Tom Barclay & Richard Galvan

Lynda.com free 30-day pass at this URL:www.lynda.com/freepass/ptrani

Paul Trani [email protected] www.paultrani.com