This tutorial will show you how to add the Tree component to the stage. Open Flash MX 2004 Professional and follow along.

Create a New Document

• On the File menu select New or press CTRL + N. The New Document window will appear.
• Select Flash Document from the Type frame and click

Adding the Tree Component to the Stage

• The Tree component is in the Components panel. Press CTRL + F7 to open
  the Components panel or on the menu select Window > Development
  Panels > Components.
• The Tree component can be found under the UI Components category. Drag and Drop it onto the stage.

Naming the Tree Component

• In our examples we use the name "myTree". Open the Properties panel. Press CTRL + F3 or select Window > Properties and enter "myTree" in the Instance Name text box field and press Enter.

Populating it with Information

• In this example we will be populating it with XML data.
• Open the Actions panel (F9 or Windows > Development Panels > Action) on Frame 1
• Enter the following code:
  

  // Make sure to put this in the Actions for the Stage not the Tree
  // we are creating a xml document to populate our tree
  // the addTreeNode function adds a node.
  // the first node you add will be equal to myTree.firstChild
  var myTreeXML = new XML();
  myTreeXML.addTreeNode("My Node Label", "Data that goes in the data attribute");
  
  // Use XML.firstChild to nest child nodes "My Node Label"
  var myTreeNode = myTreeXML.firstChild; 
  myTreeNode.addTreeNode("Chloe");
  myTreeNode.addTreeNode("Katlin"); 
  myTreeNode.addTreeNode("Sasha");
  
  // Assign the myTreeDP data source with the myTree component
  myTree.dataProvider = myTreeXML; 
  
  

Test the Movie
In the SWF file, you can see the XML structure displayed in the Tree.