I am not sure who wrote FlexSpy back in the day but it struck me that such a tool could benefit from an interactive schematic view of the display list it’s introspecting. If anything it’s useful to see sometimes just how a component or UI is composed.

Included along with this post is a sketch (proof of concept) I put together over coffee this morning. Give it a run (just click on the image below to launch the sample, requires Flash Player 10):

Initially you’ll see a vanilla Flex 4 dialog based UI. Push the ‘E’ key and the UI will transition to an interactive exploded view of the display tree. Push ‘E’ again to tuck things back where they started.

I’d imagine the approach would work with any 2D Flash or Flex content, though it really doesn’t make much sense with 2.5D centric apps. The basic idea is to just walk the display list and assign an appropriate z value to each depth level. I’ve offset siblings so they can be differentiated a bit, and injected a surrogate parent for the application so that I can adjust the registration point of the main application itself.

I have some ideas for use cases but I’d prefer to leave it to your imagination. The source is included in the SWF, please use at your own risk. If anyone feels like continuing to play with it please do, just let me know what other interesting ideas you come up with.

There are certainly bugs. When returning to the default 2D view for example, most nodes end up with zombie matrix3D instances, which cause Flex a few headaches and make the UI appear anti-aliased. As I have time I may toss a few fixes into the sample.

Today I learned:

• I’m still an impulsive buyer.

What a day… I decided to go to Circuit City to buy a new house phone, and came back with a 40" 1080p LCD television. Talk about impulse buy!

They wanted $400.00 to install it, but even then, they wouldn’t install any electrical outlets, so I decided to brave it and do it myself. Well to be fair I did invite a friend over to help since he’s a bit more handy than I. We’ll just call him “Handy Manny”.

• How to install a wall mounted flat panel television.

Before Manny came over, I was successful in fishing the coax to the new location. He showed me a thing or two about safely daisy chaining my existing outlet to a new location behind where the television would be mounted. We then installed several new wall outlets to be used for component cabling from the tv into the wall, and back out the bottom. All this went pretty smoothly, though once things started getting tight we could no longer fish the wires easily, so I just went into the adjacent room (luckily it’s our unfinished garage), and carved a chunk out of the drywall so I could feed the wires cleanly.

• Universal flat panel TV mounting brackets are for the birds.

Lastly we bolted the mounting unit to the wall and attached the brackets to the television. It’s a universal kit (Verge VFXLGMT) that Circuit City provides for this model, to support 40" to 60" televisions. The problem is, my TV is on the low end of this scale, so the brackets stick out like a sore thumb. So next time I do this I will make sure the mounting kit I buy is well short of the television height.

Next project? Hacksaw the ends off those suckers!