Menu:

Sponsor

Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

Follow Me

 

Forum's topics

Latest Files

Archives

Top Rated

Categories

Photo Gallery


Customize the Tree Flash MX 2004 component

What we will see in this tutorial

In this tutorial we will take a look at the macromedia Tree component (available in flash mx 2004 pro) and how to customize it in order to have a collapsable menu (something like the old macromedia site menu)

Requisites to run this tutorial:

Download files used in this tutorial

Example

Here is shown the final example swf we're going to create, by modifying a little the macromedia Tree component.
Here you can see the XML used in this tutorial

 

1. Create the menu.xml file

Very first thing is to set up our xml file which will be used in order to populate our tree component.
Open a text editor and write these lines:

<node label="» COOL DESIGN" value="1">
	<node label="» UNSORTED SITES">
		<node label="Google.com" />
		<node label="Macromedia.com" />
		<node label="Microsoft.com" />
		<node label="Mozilla.org" />
	</node>
	<node label="Digital Media Minute" value="2" />
	<node label="Norio Matsumoto Gallery" value="2" />
</node>
<node label="» ICONS">
	<node label="Iconmaniac 2003" />
	<node label="Mac OS X icons" />
	<node label="» SOFTWARE">
		<node label="Axialis Icon" />
		<node label="Unknow Program" />
		<node label="Another Unknow Program" />
	</node>
</node>
<node label="» PROGRAMMING">
	<node label="» ACTIONSCRIPT">
		<node label="» TUTORIALS">
			<node label="Using the Data Binding Classes" />
			<node label="Build A PhotoGallery" />
			<node label="Customize DataGrid" />
		</node>
		<node label="» LIVEDOCS">
			<node label="Customizing the DataGrid" />
			<node label="PopUpManager.createPopUp()" />
			<node label="Using Components" />
			<node label="LiveDocs HomePage" />
		</node>
		<node label="Flash MX 2004" />
	</node>
	<node label="» PYTHON">
		<node label="» WXPYTHON">
			<node label="» WIKI">
				<node label="wx.ToolBar" />
				<node label="wx.App" />
				<node label="Customize wx.STC" />
			</node>
			<node label="» ARTICLES">
				<node label="» SCINTILLA">
					<node label="Scintilla.org" />
					<node label="Scintilla Docs" />
				</node>
				<node label="Python COM+" />
				<node label="py2exe examples" />
				<node label="py2app - MAC-OSX" />
			</node>
		</node>
		<node label="python.org home" />
		<node label="Jython python for java" />
	</node>
</node>

 

2. Connect menu.xml

Now it's time to use the menu.xml file in order to populate a tree component.

  • Create a new Flash document
  • Tree componentDrag into the stage a Tree component and give it the instance name of "tree"
  • XML connector componentDrag into the stage an XML Connector component (from data component group) and give it instance name "xml_conn"
  • Select the xml connector instance and in the params panel set "menu.xml" as URL and "receive" as direction.
  • Now open the component inspector panel, always with the xml connector instance selected, and select the "Bindings" tab
  • click on the "+" icon. A dialog will open. Select "result: XML", as shown in figure 1
  • Now select as bound direction "out", double click on "bound to" option and set as "bound to" target the tree dataprovider, as show in figure 2

Add binding
Figure 1.

Assign the bound to target
Figure 2.

 

Now add a new layer in your fla and in the keyframe add this simple action:

xml_conn.trigger();
					 

CTRL+ENTER to test movie and verify that the tree is fully populated with the items come from the xml file.