Optimizing Flash Ads by Thibault Imbert

Optimizing Flash Ads 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.Filtered Pig

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

Comments (23)

  1. jpauclair wrote::

    I just posted something about visual optimization and i really think you should take a look.

    http://jpauclair.net/2010/04/20/visual-profiler

    It’s a small profiler that artist and designer (progs too) can use to track “un-optimized” visual components (like Ads)

    Give it a try!

    Wednesday, April 21, 2010 at 7:54 pm #
  2. fr wrote::

    Native Bitmap Rasterization (…), produce bigger SWF’s in some cases

    you know we’re talking about ads under 25k, i suppose… with words, bitmaps, type, etc. :) i Know you know that.

    (…) removing specific effects (…)
    Yep, being able to test this and see if “anyway i didn’t this X blur”…

    Does blur with y=0 or x = 0 calculate faster than blur with x≠0 & y≠0 ? If not, can it be optimized ?

    Wednesday, April 21, 2010 at 8:08 pm #
  3. Thibault Imbert wrote::

    Hi fr,

    Yep, Native Bitmap Rasterization is nice for rendering improvements in general but won’t help for ads because of size restrictions.

    Thanks for your input! ;)

    Thibault

    Thursday, April 22, 2010 at 8:46 am #
  4. Thibault Imbert wrote::

    Hi jpauclair,

    Great project, I will definitely try it and spread the word internally ;)

    I may contact you to discuss about it ;)

    Thanks for taking care of that topic.

    Thibault

    Thursday, April 22, 2010 at 8:51 am #
  5. whizzle wrote::

    Love the new ideas about Flash Pro having built in tools to “warning” of cpu usage. They are all great. Please push them with adobe. Fantastic!

    Thursday, April 22, 2010 at 9:41 am #
  6. peter wrote::

    hello thibault,
    i think you are the right man at the right time. there is still so much to optimize in flash, flash ide, flash player installation process (unity3d and silverlight plugin can be installed without browser restart!).

    1. it would really help if the ide just pointed you to 1 place where a designer and developer can find all these optimization techniques. theres a lack of 1 pace for it all.
    those tips and tricks are splattered around the web and you always have to go around and look for them.

    2. do you know about “aparat” from joa ebert?
    i ‘ve seen his talk at ffk10 in cologne last week.
    its amazing how much optimization he can get out of the flash player!

    http://code.google.com/p/apparat/
    http://blog.joa-ebert.com/

    please talk to him! he is a genius!!!!!!!
    it seems he can do things 10 programmers at adobe can’t.

    Thursday, April 22, 2010 at 6:36 pm #
  7. Hey Thibault,

    Great ideas! I’ll definitely take a close look and see what we can implement for our next release :)

    Thursday, April 22, 2010 at 8:31 pm #
  8. mama wrote::

    Tout ce que tu listes est applicable plus largement à toute production graphique en flash, largement au dela des pubs. Le “Warning mode” est a mon sens une super idée, par contre comme ca doit etre un outils à l’intention des graphistes, il faut le rendre accessible à ce publique, donc attention à mettre un ergonome dans la boucle, pas juste des devs ;) )

    Sinon l’idée de la rasterization “authortime” est interessante, on en a deja parlé, mais franchement je maintiens que c’est plus une rustine qu’autre chose, la vrai bonne idée c’est la rasterization de MovieClip au runtime.

    Friday, April 23, 2010 at 10:11 am #
  9. Thibault Imbert wrote::

    Oui, ces fonctionnalités aideraient de manière générale à produire du contenu plus optimisé pas seulement pour les pubs, je suis d’accord.

    Pour le native rasterize au runtime, je suis convaincu aussi :)

    Thibault

    Friday, April 23, 2010 at 1:19 pm #
  10. Thibault Imbert wrote::

    Hi Peter,

    Thanks for your kind words, I agree with you that all those optimisation techniques have to be centralized. The first whitepaper I worked on and this one related to ads will be linked on the Adobe devnet. I hope this will help people.

    Concerning Joa, he is a friend of mine and yes he is an amazing person. I talk to him very often and it’s always valuable, from coding to fooding ;)

    Thibault

    Sunday, April 25, 2010 at 8:33 pm #
  11. jloa wrote::

    Thibault i really enjoied the first chapter of your book “What can you do with bytes?”. Will there be a continue in english (as far as i know the book is in french)?

    Monday, April 26, 2010 at 10:20 am #
  12. Daniel wrote::

    Anyone know the reason why banners companies still request AS2, and 12fps?

    Monday, April 26, 2010 at 5:29 pm #
  13. Metadata wrote::

    Thanks U. I’m currently working on ads project for my client and information inculed in this post is pretty useful :)

    Wednesday, April 28, 2010 at 1:46 pm #
  14. Geoff wrote::

    If you are doing flash ads often take a look at this online application. I made it to check creatives for clicktags, filesize, fp version, etc. Check out the site http://www.flashbannerking.com/flashBannerPrince

    Hope this one can help.
    grts
    geoff

    Tuesday, May 4, 2010 at 11:00 am #
  15. Philippe wrote::

    In Flash Player:

    CPU cap warning, CPU throttling, option to disable multi-core rendering, etc. to see how it will run on low-end machines.

    In Flash CS:

    We often have a problem with designers abusing or misusing filters. If the IDE could make it easier to analyse an animation to report all filters uses (and bad combinations) this could be very valuable.

    Also a better size reporting is needed: the ol’ text dump could really be improved.

    Thursday, May 6, 2010 at 11:44 pm #
  16. Thibault Imbert wrote::

    Hi Philippe,

    Thanks. These are great suggestions for the player and the tooling. I will add those to the list ;)

    cheers,
    Thibault

    Friday, May 7, 2010 at 12:15 am #
  17. jpauclair wrote::

    There is already an option to disable multicore rendering in mm.cfg:
    DisableMulticoreRenderer = 1

    Read this:
    http://jpauclair.net/2010/02/10/mmcfg-treasure/

    Saturday, May 8, 2010 at 4:34 am #
  18. Florian wrote::

    Good intention, but I don’t know how much a White Paper will help… It is more about the usage of the Flash IDE. Some friends of mine are producing Flash Banner all the time and they have not got the time for optimizing. For this reason, the IDE should optimize the content automatically or at least producing some sample optimized files…

    In my opinion Flash Banner creation is mostly done by (Graphic /) Flash Designer. They have a very professional view on visual issues and they don’t care so much about technical facts. Except the banner runs slowly or something else…

    Please consider not only the technical problems, please consider also the user experience (interaction + interface design) aspects of the Flash IDE and the Flash Banner creation process. Thx!

    Happy to see a very open-minded person is working on the Flash Player! :-)

    Monday, May 10, 2010 at 3:30 pm #
  19. Thibault Imbert wrote::

    Hi Florian,

    Thank you ;)

    The whitepaper cannot be long and technical, it will cover graphical optimizations which talks to anyone from a developer to a designer. But I agree, a whitepaper is the “best” thing to approach those users, but that’s important to have it as a support. That’s the reason why the tools should handle that and help users create optimized content. I am happy to hear you also think, those optimizations should happen through the tools ;)

    best,

    Thibault

    Monday, May 10, 2010 at 3:44 pm #
  20. jpauclair wrote::

    What do you think about this one:
    http://jpauclair.net/FlashPreloadProfiler/

    It’s a profiler that can help you diagnose performance problem for your Ads

    Tuesday, May 18, 2010 at 1:51 am #
  21. Mamzelle wrote::

    Salut, je viens de commencer à lire votre document.

    Il y a une erreur à la page 6:
    stage.addEventListener ( Event.ACTIVATE, onActivate );
    stage.addEventListener ( Event.ACTIVATE, onDeactivate );

    Plutôt ;) :
    stage.addEventListener ( Event.ACTIVATE, onActivate );
    stage.addEventListener ( Event.DESACTIVATE, onDeactivate );

    Voilà

    Monday, June 7, 2010 at 10:12 pm #
  22. Thibault Imbert wrote::

    Ouch, bien vu! Merci Mamzelle ;)

    Monday, June 7, 2010 at 10:16 pm #
  23. Matthieu wrote::

    Bonjour à tous,

    Pour les développeurs intéressés, j’ai effectué une traduction complète de cet excellent livre :
    http://www.actionscript-facile.com/livret-formation-actionscript-optimiser-publicites-flash/article1212573.html
    ou http://bit.ly/pLbrff

    A bientôt,
    Matthieu

    Friday, August 5, 2011 at 9:16 pm #

Trackbacks/Pingbacks (2)

  1. Optimizing web content for Flash Player 10.1 : : IML on Wednesday, June 30, 2010 at 7:44 pm

    [...] Optimizing Flash Ads [ by Thibault Imbert ] http://www.bytearray.org/?p=1586 [...]

     
  2. Optimizing Flash Ads and some XFL Gourmet - ByteArray.org on Wednesday, August 11, 2010 at 6:29 pm

    [...] recently blogged about the Ads optimization topic. I finished writing a little whitepaper on this, covering mainly [...]