Skip to content

New Flash Visual Profiler

April 20, 2010

I frequently use Flex Profiler for my job in order to track slow functions, bad memory usage and other things.

But when it come to diagnose a problem in a project, it’s often hard to tell what’s going wrong “in the screen”. You can use other live performances analyzer like “Hi-ReS” or even MonsterDebugger… But it’s always detached from what’s in the screen!

So I decided to make a Visual Profiler that can help diagnose quickly problem with memory allocation, bad assets re-use, and Garbage Collector Overhead.

*Edit 2010/05/24*
This post was a pre-release of my tool “Flash Preload Profiler
If you want something more comlpete: Get it here
*End edit*


The tool is VERY simple but quite helpful.
1: Draw a RED rectangle when an assets is added to the stage for the first time, then it add the object to a HUGE (Weak Key) Dictionary containing all object in the scene.
2: Draw a GREEN rectangle when an assets is removed from the stage, set the Dictionary object value to false (removed)
3: Draw a YELLOW rectangle is the sprite is put on the stage but was already in the Dictionary (meaning it’s re-use and hence no memory allocation was done)
4: At each frame, Draw a BLUE rectangle (alpha .25 because it adds up!) for every object in the Dictionary that are “still on the stage” (.stage != null) but their flags is set to “removed from stage”

Here is a good example of what it can look like in a real case:
Custom Shape Particle (3th example)

Before:

After:

In a bad flash application, this is going to blink like a Christmas tree!
The more red you see, the more memory allocation is done, and you can see what is allocating it.

The more yellow you see, the more re-use you are doing!

The last one is tricky. (The blue one)
It looks like it’s possible for a MovieClip to be removed from stage, but to continue playing and to receive events until the GC collect it.
I did a lot of test, and in many cases the result was a lot of blue rectangle waiting for collection.

The flash GC doesn’t guarantee that all “dead” objects will be collected in a single pass. The GC is lazy and safe.
But having those blue rectangle collected almost randomly is really fun to see.

To prove that those assets are still animated, you only have to watch the rectangles move around… And to prove that they are really eligible for collection, you can call the famous LocalConnection GC trick and ALL the blue rectangles will be gone next frame. So when you see blue rectangles, you can assume that some CPU is spent managing, updating, animating thoses assets.

You can add the source-code right into your project but It won’t be very generic and it would be hard to manage.
Instead I added it to my MicroProfiler using the PreloadSWF trick.
This way it can also be use on ANY as3 project (debug or not) on the whole internet!

Everything is on Google Code (Rev. 49), even the “bin/MicroProfiler.swf” for those who don’t want to build it.

Enjoy the colors!

I suggest you take a look at this site with the profiler on.
Most game are very good target too!
If you find interesting example please share them here.

add to del.icio.usAdd to Blinkslistadd to furlDigg itadd to ma.gnoliaStumble It!add to simpyseed the vineTailRankpost to facebook

About these ads

From → general

14 Comments
  1. This sounds really cool! I can’t wait to give it a try…

    • I’ve got it working now with local SWFs, but it doesn’t seem to work with remote ones on various websites. I’ve read through the comments on your first MicroProfiler.swf post and made sure that the location is trusted, the SWFs I’m looking at are pure AS3, and that there aren’t any errors in flashlog.txt. In fact, I even see this at the very start of flashlog.txt:

      Preload::Constuctor
      PreloadSWF::init()
      Usage Overlay initialized

      Still, the top bar and overlay rectangles do not appear. Any ideas on how to get this working?

      I’ve checked out some apps I’ve made locally and it’s really cool to see the rectangles, either where you expect them or, especially, where you don’t. I haven’t seen any yellow or blue rectangles at all though…

  2. damian permalink

    Hey, nice effort, really useful!

    I just wanted to share something that i’ve found with flash and memory. I’ve been finding this the last few days, and your visual debugger just makes it easier to find.

    if you have a movieclip, and inside that movieclip you have animation involving other movieclips; as the playhead advances along, you will continuously get memory allocations that result from the internal movieclips getting created and destroyed.

    i’m not sure if this is a bug or not, but it seems wasteful on flash’s part, as well as giving you a headache if you’ve lots of animations.

    to see what i’m talking about, download this simple swf and check it with your visual debugger: http://divillysausages.com/test/movieclip_memory.swf

  3. There is a bug in the submitted version of the profiler. It traces rectangle and events!
    I’m going to correct it tonight

  4. thienhaflash permalink

    just Wow idea, checking out… and tweaking up…

  5. you’re truly a just right webmaster. The site loading pace is amazing. It seems that you are doing any unique trick. Furthermore, The contents are masterpiece. you’ve done a excellent job on this matter!

  6. Dimon permalink

    Just an awesome tool! Keep it up!
    Let me play with your donate button a bit…

  7. I am extremely inspired together with your writing talents as well as with the format in your weblog.
    Is that this a paid theme or did you modify it yourself? Either way keep up the excellent
    high quality writing, it is uncommon to peer
    a nice blog like this one today..

Trackbacks & Pingbacks

  1. The Ultimate Debugging And Profiling at Jozef Chúťka's blog
  2. Weekly Shared Items – 27. April, 2010 | TOXIN LABS - weblog of a german design student from wuerzburg
  3. AS3 hidden treasure in the mm.cfg file. Revealing and documenting many Flash secrets! « jpauclair
  4. Quick Tip: Debugging Module Inside Non-debug Application at Jozef Chúťka's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 33 other followers

%d bloggers like this: