ActionScript 3.0 DOM

Still a work in progress, but I devoted a couple hours today to putting together something that I think will be extremely useful to me and you (if you are a fulltime flash developer). If you are familiar with any HTML development and the insane debugging techniques that were made super easy with Firebug for firefox. One of the things I loved about this plugin is the ability to view the DOM, or "Document Object Model" with an extremely usable interface that highlights the DIV or object your mouse is hovering.

My version, isn't the prettiest yet, but it is extremely useful in the fact that, it recursively moves through the Flash DOM or DOM3 standard. All you as the developer have to do is pass in two varialbs and add it to the Display list.

var dom:DOM = addChild(new DOM(mainStageSprite, align)) as DOM;

Thats it.

Press "Refresh" (this is so it isn't constantly running these intense lookups) at the top of the tree to re-recurse through the display list and generate a tree of instance names that exist in the player. It will scroll if the tree structure is larger than the viewable area.

Known issues:

• Align doesn't function yet.
• Needs to Collapse
• Should have dynamic properties such as colors etc..

As I get time, I will add to this and eventually have a very solid debugging DOM tracer. If you have any suggestions, hit me up in the comments. Happy processing!

Click here or on DOM Deluise to download the source of AS3 DOM viewer.