Transcript
Page 1: 20 x Tips to better Optimize your Flash content

20 x Tips to better Optimize your Flash content

@EladElrom

Page 2: 20 x Tips to better Optimize your Flash content

#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

Page 3: 20 x Tips to better Optimize your Flash content

#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/

Page 4: 20 x Tips to better Optimize your Flash content

#2: Profiling ur App

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

to find out the memory size of an object

Page 5: 20 x Tips to better Optimize your Flash content

#3: Architecting

• Micro-architecture frameworks?

Page 6: 20 x Tips to better Optimize your Flash content

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.

Page 7: 20 x Tips to better Optimize your Flash content

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

Page 8: 20 x Tips to better Optimize your Flash content

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

Page 9: 20 x Tips to better Optimize your Flash content

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.

Page 10: 20 x Tips to better Optimize your Flash content

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

Page 11: 20 x Tips to better Optimize your Flash content

Tip #9: Decrease nesting

Page 12: 20 x Tips to better Optimize your Flash content

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

Page 13: 20 x Tips to better Optimize your Flash content

Tip #11: Avoid expensive operations

• Bitmap filters and perspective distortion• Frequently-updated Text

Page 14: 20 x Tips to better Optimize your Flash content

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

Page 15: 20 x Tips to better Optimize your Flash content

Tip #13: Avoiding initializing and reference to unused classes

Page 16: 20 x Tips to better Optimize your Flash content

Tip #14: Set redraw region to min

Page 17: 20 x Tips to better Optimize your Flash content

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

Page 18: 20 x Tips to better Optimize your Flash content

#16: Use Tools to reduce swf file size

• Apparat• SWF Optimizer

Page 19: 20 x Tips to better Optimize your Flash content

Tip #17: Splitting apps into modules

Page 20: 20 x Tips to better Optimize your Flash content

Tip #18: Reuse objects - Object pooling

Page 21: 20 x Tips to better Optimize your Flash content

Tip #19: Working with external assets

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

Page 22: 20 x Tips to better Optimize your Flash content

#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.

Page 23: 20 x Tips to better Optimize your Flash content

Q&A

• http://elromdesign.com/blog

• eladelrom-preso.googlecode.com/files/OptimizeFlashContnet.pptx

• http://www.slideshare.net/eladnyc

@EladElrom

Page 24: 20 x Tips to better Optimize your Flash content

24


Top Related