20 x Tips to better
Optimize your Flash
     content
         @EladElrom
#1: Flash Player 10.1
“out of the box” optimization


• Instance Management

• Screensaver Mode
  NativeApplication.nativeApplication.systemI
  dleMode = SystemIdleMode.KEEP_AWAKE;

• GPU Hardware Acceleration
        allows bitmap blitting
        stops using software (CPU) rendering altogether
#2: Profiling ur App
• • Open Source Benchmark
  • Flash BuilderProfiler - Tools Rate
  Flash Benchmark 4.1 System
     FlexUnit 8: - Profiler
     Profiling withMonitor Frame
• • FrameStats Benchmark AS3
  Grant Skinner’s
  http://www.kongregate.com/games/SnailsAnimation/flash-benchmark-08
     http://jpauclair.net/flashpreloadprofiler/
  or http://www.timo-ernst.net/misc/riabench-start/
#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



•••StrongRTMP.the data with AMF on client and
   AMF, lazy loading James Ward’s tool to
    Use type Use whenever possible.
   server side to increase performance.
   benchmark and see the memory difference:
   http://www.jamesward.com/census/.
Tip #5: Manipulating swf Framerate

• Reducing fps when your app is inactive
• Increase the fps once the app is active again
https://github.com/EladElrom/Flash-Optimizing-Tools

• Increase fps while animation is playing to
framerateManager:FrameRateOptimizer =
   create a morenew FrameRateOptimizer(and keeping
                    smooth experience this, true );
   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)
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
    • Avoid using updateAfterEvent,
• End of Frame cycle - Event.EXIT_FRAME since it
• Pre-render phasePlayer- and increases the player
    interrupt the starts Event.RENDER
• Final user code is executed
    work load.
• Player renders changes to display own using the
    • Handle invalidation on your
• Cycle completed
   stage.invalidate() property
Tip #9: Decrease nesting
Tip #10: Reduce complexity
• Shape level classes such as
• TextField
• Constructor code of children executed: 68
  Use low
  Constructor code of children executed: 276
  Player renders changes display list: possible) over
  TextField, SimpleButton (when 168
• mx:Text Spark. It will require more coding but
• haloimprove performance.
  Spriteand
  will
  Constructor code of children executed: 743
• Player renders changes display list: executed: 399
  Constructor code of children 685
  Avoid using TLF - when possible.
• UIComponent
• s:Label
  Use Halo components over Spark components.
  Constructor code of children executed: 1136
• Player renders changes display list: executed: 1078
  Constructor code of children 198 use Sprite
  When creating custom components
  over MovieClip and UIComponent over Group
• Group
• s:RichText
• Constructor codegraphics it’s recommended to use
  When creating of children executed: 416
  Player renders changes display list: executed: 1195
  Constructor code of children 3224
  Shape display object.
Tip #11: Avoid expensive
          operations


• Bitmap filters and perspective distortion
• Frequently-updated Text
Tip #12: Decreasing execution time
•   Primitives vs generic object
    if...else statements
•
•   Use strict mode
    Typing over generic objects
•
•   Flex related tips
    Loops
•   Use e4x with caution
•   Array vs ByteArray vs Vector
•   Increasing rendering speed
•
•   Callbacks andas BitmapData or Bitmap
    Manual cache events
•
•   Regex as bitmap matrix
    Cache and search string
•   Databinding
    Set all children caching policy
•
•   Check the status of all children
    Sealed vs. dynamic classes
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://elromdesign.com/blog


• eladelrom-
  preso.googlecode.com/files/OptimizeFl
  ashContnet.pptx

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

                       @EladElrom
24

20 x Tips to better Optimize your Flash content

  • 1.
    20 x Tipsto better Optimize your Flash content @EladElrom
  • 2.
    #1: Flash Player10.1 “out of the box” optimization • Instance Management • Screensaver Mode NativeApplication.nativeApplication.systemI dleMode = SystemIdleMode.KEEP_AWAKE; • GPU Hardware Acceleration allows bitmap blitting stops using software (CPU) rendering altogether
  • 3.
    #2: Profiling urApp • • Open Source Benchmark • Flash BuilderProfiler - Tools Rate Flash Benchmark 4.1 System FlexUnit 8: - Profiler Profiling withMonitor Frame • • FrameStats Benchmark AS3 Grant Skinner’s http://www.kongregate.com/games/SnailsAnimation/flash-benchmark-08 http://jpauclair.net/flashpreloadprofiler/ or http://www.timo-ernst.net/misc/riabench-start/
  • 4.
    #2: Profiling urApp • OHHH…. I almost forgot!!! • you can just do: getSize to find out the memory size of an object
  • 5.
  • 6.
    Tip #4: I/O •••StrongRTMP.thedata with AMF on client and AMF, lazy loading James Ward’s tool to Use type Use whenever possible. server side to increase performance. benchmark and see the memory difference: http://www.jamesward.com/census/.
  • 7.
    Tip #5: Manipulatingswf Framerate • Reducing fps when your app is inactive • Increase the fps once the app is active again https://github.com/EladElrom/Flash-Optimizing-Tools • Increase fps while animation is playing to framerateManager:FrameRateOptimizer = create a morenew FrameRateOptimizer(and keeping smooth experience this, true ); 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)
  • 8.
    Tip #6: Reducememory 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 );
  • 9.
    Tip #7: Avoidmemory 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.
  • 10.
    Tip #8: Updatescreen once per frame Elastic Racetrack • Frame starts - Event.ENTER_FRAME • Frame actions executed - Event.FRAME_CONSTRUCTED • Avoid using updateAfterEvent, • End of Frame cycle - Event.EXIT_FRAME since it • Pre-render phasePlayer- and increases the player interrupt the starts Event.RENDER • Final user code is executed work load. • Player renders changes to display own using the • Handle invalidation on your • Cycle completed stage.invalidate() property
  • 11.
  • 12.
    Tip #10: Reducecomplexity • Shape level classes such as • TextField • Constructor code of children executed: 68 Use low Constructor code of children executed: 276 Player renders changes display list: possible) over TextField, SimpleButton (when 168 • mx:Text Spark. It will require more coding but • haloimprove performance. Spriteand will Constructor code of children executed: 743 • Player renders changes display list: executed: 399 Constructor code of children 685 Avoid using TLF - when possible. • UIComponent • s:Label Use Halo components over Spark components. Constructor code of children executed: 1136 • Player renders changes display list: executed: 1078 Constructor code of children 198 use Sprite When creating custom components over MovieClip and UIComponent over Group • Group • s:RichText • Constructor codegraphics it’s recommended to use When creating of children executed: 416 Player renders changes display list: executed: 1195 Constructor code of children 3224 Shape display object.
  • 13.
    Tip #11: Avoidexpensive operations • Bitmap filters and perspective distortion • Frequently-updated Text
  • 14.
    Tip #12: Decreasingexecution time • Primitives vs generic object if...else statements • • Use strict mode Typing over generic objects • • Flex related tips Loops • Use e4x with caution • Array vs ByteArray vs Vector • Increasing rendering speed • • Callbacks andas BitmapData or Bitmap Manual cache events • • Regex as bitmap matrix Cache and search string • Databinding Set all children caching policy • • Check the status of all children Sealed vs. dynamic classes
  • 15.
    Tip #13: Avoidinginitializing and reference to unused classes
  • 16.
    Tip #14: Setredraw region to min
  • 17.
    Tip #15: Reducingswf 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
  • 18.
    #16: Use Toolsto reduce swf file size • Apparat • SWF Optimizer
  • 19.
    Tip #17: Splittingapps into modules
  • 20.
    Tip #18: Reuseobjects - Object pooling
  • 21.
    Tip #19: Workingwith external assets • caching data in the memory • cache data on the local device • Image blitting
  • 22.
    #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.
  • 23.
    Q&A • http://elromdesign.com/blog • eladelrom- preso.googlecode.com/files/OptimizeFl ashContnet.pptx • http://www.slideshare.net/eladnyc @EladElrom
  • 24.