I am working on a new document on Flash Ads performance, the idea of this document is to focus on graphical optimizations, cause ActionScript is rarely (sometimes it is) in fault in ads, and mainly created by designers. Flash ads talks to anyone, we all see them when browsing different websites, some of them are creative, some of them are not, some of them are optimized and some of them are not.
So what do I mean by saying optimized ?
As you can imagine, it is mainly related to CPU usage and memory, and how simple ads can sometimes require more CPU cycles than they should. So, I decided to browse the web for a day and gathered as much ads as possible, I had a large choice, and I decided to save different kind of ads, made of video, bitmaps, manually or programmatically animated. Let's just put this out there, the intention of this post is not to criticize people producing ads but better understand what kind of pitfalls designers and developers tend to fall into when producing ads and why. More than that, I am sure that most of these bad practices could be adressed by the tools by giving more feedback on how to produce optimized content.
First thing people tend to forget is how a shape can be simplified through tools like the Simplify tool in Adobe Illustrator or just through the Smooth tool in Flash Pro. A lot of control points can be removed from paths and dramatically reduce the size of the final SWF and improve rendering performance. Another issue, in order to bypass the size limitations and the usage of bitmaps, designers use dynamic filters for any effect they need. As you know it, filters are not CPU-friendly when overused, especially when nested and with attributes changing over frames. Each frame the filter has to be recalculated and this can slow down rendering performance and require extra CPU cycles. Same for transparency effects which can be avoided or truly removed by using opaque DisplayObjects (opaqueBackground).
Whatever coding environnement you use, assets may still be created inside of Flash, exported to SWC or SWF and then linked inside your project. For ads, most of the work is done in Flash Pro only, cause code used is not complex and can fit on the timeline only.
I am wondering what kind of things could be added to Flash Pro for for instance, to help designers and even developers to produce optimized assets in general.
Here are some features I thought about :
- Show Redraw Regions
This should be enabled by default in the IDE (when playing animations on the Stage) and animators, designers, developers, would better understand what is wrong and costing CPU cycles for nothing. Ex : DisplayObjects hidden by others and still being renderered and not deactivated.
- Expose the opaqueBackground feature in Flash Pro IDE just like cache as bitmap.
Sometimes transparency is not required, and designers could disable it by assigning a background color to any DisplayObject. This would make it easier for the Flash Player.
- Native Bitmap Rasterization
You select a MovieClip and rasterize each frame as a bitmap, produce bigger SWF's in some cases, but blazing fast in terms of rendering. This could be performed at runtime by the player too, but a first step would be doing it at authortime.
- Graphical effects presets for publishing
I create and save a publishing profile for Nike and I say, disable all the filters, the transparency effects and instantly see performance differences by checking and unchecking effects between different publishing.
- History Panel 2.0
The History panel in Flash CS5 would be enhanced by showing more than the size and time history but also average framerate, CPU and memory usage.
- Optimization Perspective and size limit
The tool could have an optimization perspective, which would audit your graphics and let you know about potential graphics optimizations to reach a specific framerate and size, with text rendering, fonts, control points reduction, etc.). It would allow you to specify a size limit and the tool would generate a report by saying you can compress that bitmap more, you can use device fonts here, etc.
- Having a "Warning Mode" for graphics.
The tool shows you a heat map of the graphics in your app, showing where rendering time is spent. Warn about what is costing a lot in memory and CPU like nested filters, animated filters, bad usage of cacheAsBitmap, non-simplified shapes, etc. This should be pretty cool in the profiler for Flash Builder too.
For the Flash Player, maybe an HTML tag (stricter than the hasPriority tag in Flash Player 10.1) which would restrict the SWF being played to consume a specific amount of memory and CPU, otherwise throttle down the SWF. Another solution would be automatically removing specific effects when the framerate and performance is critical ? Is that something you would prefer ?
Let me know if you think any topic should be covered in the whitepaper, I would be happy sharing your ideas about all that.
Download the whitepaper here.