Interactive Node Viewer

We can quickly add interactivity to this picture by putting a button on the attribute counter (Figure 9.4). By pressing this button, the user moves to the second frame of the display which shows the array of attribute assignments. Releasing the button returns to the original display.

Figure 9.4. NodeView 's Layers

This code is attached as the object action:

ActionScript

 on (press) {  gotoAndStop (2);} on (release, releaseOutside) { gotoAndStop (1);} 

The attribute list might contain multiple assignments, but we have created space for only two lines (Figure 9.5). The space could be made larger ”or better, dynamically sized ”in a more robust application.

Figure 9.5. The Alternate State of Her Node Viewer

Draggable Node Hierarchies

We add another button beneath the attribute button but the full size of the panel (Figure 9.6). Pressing this button starts a drag operation until the release event.

Figure 9.6. Drag-Sensitive Area on the Node Viewer

ActionScript

 on( press )   {   this.startDrag(); } on( release ) {   this.stopDrag();  } 

With this button, the nesting of nodes in the XML object becomes quite clear (Figure 9.7). As we drag any node, all of its descendants move with it.

Figure 9.7. Teasing Apart an XML Document

Hierarchy Open and Close

Despite the fun of dragging the trees of nodes around the screen, it is still fairly cluttered. It would be nice to be able to open and close branches of the tree the same way the Mac OS and Windows Explorer function.

This is not so hard. By adding a two-position switch to the node viewer, we can jump again between two frames , one representing a closed hierarchy and the other an open one (Figure 9.8). The frame labeled Open shows the twisty in the open position and has this code:

Figure 9.8. Open and Close Twisty of the Node Viewer

ActionScript

 for(  i in children ) children[i]._visible=true; stop(); 

The Close frame has, of course, the opposite , both graphics and code.