20 x Tips to better Optimize your Flash content

@EladElrom

#1: Flash Player 10.1 “out of the box” optimization

• Instance Management

• Screensaver ModeNativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;

• GPU Hardware AccelerationOpenGL ES 1.1 allows bitmap blittingOpenGL ES 2.0 stops using software (CPU) rendering altogether

#2: Profiling ur App

• Flash Benchmark 8: http://www.kongregate.com/games/SnailsAnimation/flash-benchmark-08 or http://www.timo-ernst.net/misc/riabench-start/

• Flash Builder Profiler• Profiling with System Tools• Grant Skinner’s Benchmark AS3• FlexUnit 4.1 Benchmark• FrameStats - Monitor Frame Rate• Open Source Profiler - http://jpauclair.net/flashpreloadprofiler/

#2: Profiling ur App

• OHHH…. I almost forgot!!!• you can just do: getSize

to find out the memory size of an object

#3: Architecting

• Micro-architecture frameworks?

Tip #4: I/O

• AMF, RTMP. Use James Ward’s tool to benchmark and see the memory difference: http://www.jamesward.com/census/.

• Use lazy loading whenever possible.• Strong type the data with AMF on client and server side to increase performance.

Tip #5: Manipulating swf Framerate

• Reducing fps when your app is inactive• Increase the fps once the app is active again• Increase fps while animation is playing to

create a more smooth experience and keeping a stack of all the animations being played to know when we can drop the fps.

• Provide a cross platform API (Pure AS3, Flex, AIR)

https://github.com/EladElrom/Flash-Optimizing-Tools

framerateManager:FrameRateOptimizer = new FrameRateOptimizer( this, true );

Tip #6: Reduce memory usage

Memory leaks due to listeners that have been set by us or someone else and never removed from memory:

Solution: Listeners API

movieClip.addEventListener( listeners.type = MouseEvent.CLICK, listeners.handler = onClick );

movieClip.addEventListener( listeners.type = MouseEvent.DOUBLE_CLICK, listeners.handler = onDoubleClick );

listeners.removeAllListeners( movieClip );

Tip #7: Avoid memory leaks

Call gc twice, or in AIR system.gc(): Ensure GC will do his job correctly:

• Set weekly references - where possible: addEventListeners and Dictionary classes.

• Don’t keep references - nulling objects with events don’t unhook them.

Tip #8: Update screen once per frame

Elastic Racetrack• Frame starts - Event.ENTER_FRAME• Frame actions executed - Event.FRAME_CONSTRUCTED• End of Frame cycle - Event.EXIT_FRAME• Pre-render phase starts - Event.RENDER• Final user code is executed• Player renders changes to display• Cycle completed

• Avoid using updateAfterEvent, since it interrupt the Player and increases the player work load. • Handle invalidation on your own using the stage.invalidate() property

Tip #9: Decrease nesting

Tip #10: Reduce complexity

• ShapeConstructor code of children executed: 276

• SpriteConstructor code of children executed: 399

• UIComponentConstructor code of children executed: 1078

• GroupConstructor code of children executed: 1195

• Use low level classes such as TextField, SimpleButton (when possible) over halo and Spark. It will require more coding but will improve performance.

• Avoid using TLF - when possible.• Use Halo components over Spark components.• When creating custom components use Sprite over

MovieClip and UIComponent over Group• When creating graphics it’s recommended to use

Shape display object.

• TextFieldConstructor code of children executed: 68Player renders changes display list: 168

• mx:TextConstructor code of children executed: 743Player renders changes display list: 685

• s:LabelConstructor code of children executed: 1136Player renders changes display list: 198

• s:RichTextConstructor code of children executed: 416Player renders changes display list: 3224

Tip #11: Avoid expensive operations

• Bitmap filters and perspective distortion• Frequently-updated Text

Tip #12: Decreasing execution time

• Primitives vs generic object• Typing over generic objects• Loops• Array vs ByteArray vs Vector• Callbacks and events• Regex and search string• Databinding• Sealed vs. dynamic classes

• if...else statements• Use strict mode• Flex related tips• Use e4x with caution• Increasing rendering speed• Manual cache as BitmapData or Bitmap• Cache as bitmap matrix• Set all children caching policy• Check the status of all children

Tip #13: Avoiding initializing and reference to unused classes

Tip #14: Set redraw region to min

Tip #15: Reducing swf file size

• Limit font unicode-range• Implement RSL in your project - Runtime

Shared Libraries• Load assets on runtime and reduce assets file

size• Export Release Build• Using strict mode

#16: Use Tools to reduce swf file size

• Apparat• SWF Optimizer

Tip #17: Splitting apps into modules

Tip #18: Reuse objects - Object pooling

Tip #19: Working with external assets

• caching data in the memory• cache data on the local device• Image blitting

#20: be poactive & keep optimizing

• Be Proactive: take into account benchmark and memory usage when writing your code.

• Write code first: create your application and after it’s running, take time to optimize.

Q&A

• http://insideria.com/2010/11/flash-player-101-mobile-optimi.html

• http://insideria.com/2010/11/optimize-flash-content-and-imp.html

• http://elromdesign.com/blog

@EladElrom

24