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
• •
Flash
Benchmark
8: Benchmark
Open
Source
Profiler
- Tools
•
Profiling
FlexUnit
4.1
with
System
Flash
Builder
Profiler
• •Grant
FrameStats
Skinner’s
- Monitor
Benchmark
Frame
AS3Rate
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
•••Strong
AMF,
Use lazy
RTMP.
type
loading
the
Usedata
James
whenever
withWard’s
AMF
possible.
on
tool
client
to and
server
benchmark
side toand
increase
see theperformance.
memory difference:
http://www.jamesward.com/census/.
Tip #5: Manipulating swf Framerate
• Reducing fps when your app is inactive
https://github.com/EladElrom/Flash-Optimizing-Tools
• Increase the fps once the app is active again
•framerateManager:FrameRateOptimizer
Increase fps while animation is= playing to
create a morenew
smooth
experience and
FrameRateOptimizer(
this, keeping
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, since it
• End of Frame cycle - Event.EXIT_FRAME
interrupt phase
the Player
increases the player
• Pre-render
startsand
- Event.RENDER
workuser
load.
• Final
code is executed
• Handle
invalidation
ondisplay
your own using the
• Player
renders
changes to
stage.invalidate()
property
• Cycle
completed
Tip #9: Decrease nesting
Tip #10: Reduce complexity
•• TextField
Shape
• Constructor
Use low level
classes
suchexecuted:
as TextField,
code
of children
68
Constructor
code
ofdisplay
children
executed:
276
SimpleButton
(when
possible)
Player
renders changes
list:over
168 halo and
Spark.
It will require more coding but will
•• mx:Text
Sprite
improve performance.
Constructor
code of children executed: 743
Constructor
code
ofdisplay
children
399
changes
list: executed:
685
• Player
Avoid renders
using TLF
- when
possible.
•• s:Label
UIComponent
Use
Halo components over Spark components.
Constructor code of children executed: 1136
• Player
When
creating
custom
components
Constructor
code
ofdisplay
children
1078
renders
changes
list: executed:
198 use Sprite
over
MovieClip
and
UIComponent
over
Group
•• s:RichText
Group
• Constructor
When creating
it’sexecuted:
recommended
to use
codegraphics
of children
416
Constructor
code
ofdisplay
children
1195
Shaperenders
displaychanges
object.
Player
list: executed:
3224
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
events
Manual cache
BitmapData or Bitmap
Regex
and
search
string
Cache as
bitmap
matrix
Set
all children caching policy
Databinding
Check
of allclasses
children
Sealedthe
vs.status
dynamic
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-player101-mobile-optimi.html
• http://insideria.com/2010/11/optimizeflash-content-and-imp.html
• http://elromdesign.com/blog
@EladElrom
24