Mar 26 2009

Exploded Schematic View of Flash and Flex Apps

Published by Corey at 10:48 am under Technology, Toys

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):


LayoutSchematic

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.

4 Responses to “Exploded Schematic View of Flash and Flex Apps”

  1. # Kelvin Luckon 26 Mar 2009 at 7:35 pm

    Very cool idea - I like it…

    I noticed that the checkboxes don’t work after you’ve exploded and unexploded the view - not sure if that’s what you were talking about when you said “cause Flex a few headaches” or if it’s something else?

  2. # Gilles Guilleminon 27 Mar 2009 at 1:10 am

    Nice one again (like all your recent posts actually).
    One little thing though: the example is cropped on small screens. It doesn’t fit all on my 15″ and it must be worse on smaller screens.

  3. # Coreyon 27 Mar 2009 at 4:15 am

    Yep, this is the issue I described. It’s just a small bug in the prerelease Flex 4 SDK..it will be fixed soon.

  4. # Rizon 22 Apr 2009 at 3:36 pm

    This is awesome - I should try this technique out on some pure-AS3 (non-flex) apps i’ve worked on. Could be interesting!

Trackback URI | Comments RSS

Leave a Reply