@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
Top Related