Jump to content


Photo
- - - - -

XML Tree + custom style (FlashPro)


  • Please log in to reply
No replies to this topic

#1 GTec

GTec

    Young Padawan

  • Members
  • Pip
  • 1 posts
  • Gender:Male
  • Interests:there are so much .... some of them are Photoshop, Flash, Ajax/JS/PHP/mySQL, C4D, Autocad and for sure browsing P2L :)

Posted 29 July 2006 - 04:23 PM

Hello,
in that lil tutorial i'll show you how to make your own xml based tree navigation in flash pro.
It's based on the tutorial form the flash help: Creating an application with the Tree component
You can find that in the flash help "F1" and there goto:
Components Language Reference > Tree component (Flash Professional only) > Using the Tree component (Flash Professional only) > Creating an application with the Tree component >>> To load XML from an external file

that the same code i taked ... well lets start:

In Flash, select File > New and select Flash Document, call it "treeP2L.fla" and save the Document
Drag an instance of the Tree component onto the Stage.
Select the Tree instance. In the Property inspector, enter the instance name myTree.
In the Actions panel on Frame 1, enter the following code:
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load("treeP2L.xml");
myTreeDP.onLoad = function() {
	myTree.dataProvider = this.firstChild;
};
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
	trace("selected node is: "+evt.target.selectedNode);
	trace("");
};
myTree.addEventListener("change", treeListener);

This code creates an XML object called myTreeDP and calls the XML.load() method to load an XML data source. The code then defines an onLoad event handler that sets the dataProvider property of the myTree instance to the new XML object when the XML loads.


now we are finish with our flash file, lets start the basic xml:

Open a text editor and create a new file called treeP2L.xml
Enter the following Code:
<node>
	<node label="Pixel2Life" url="http://www.pixel2life.com">
		<node label="Forum" url="http://www.pixel2life.com/forums"/>
		<node label="Pixel2Life/Twodded" url="http://www.pixel2life.com/twodded">
			<node label="Apply To Write Tutorials" isBranch="true" url="http://www.pixel2life.com/twodded/apply_to_write_tutorials"  />
			<node label="Suggest A Tutorial" isBranch="true" url="http://www.pixel2life.com/twodded/suggest_a_tutorial" /> 
			<node label="Twodded Related Contact Form" isBranch="true" url="http://www.pixel2life.com/contact/?cont_id=12" /> 
			<node label="Twodded Tutorials Comments" isBranch="true" url="http://www.pixel2life.com/forums/index.php?showforum=53"/> 
			<node label="User Submitted Tutorials" isBranch="true" url="http://www.pixel2life.com/forums/index.php?showforum=60" />
		</node>
		<node label="View the Twod Team" isBranch="true" url="http://www.pixel2life.com/twodded/team/" />
		<node label="done by me"/>
	</node>
</node>

Attributes used in our xml file: " label " " isBranch " " url "

label: our label :-)
isBranch: Specifies whether the folder is a branch (has a folder icon and an expander arrow).
url: i defined url in our fla file as string ...

save the treeP2L.xml file in the same folder as you saved the treeP2l.fla file !!!
Select Control > Test Movie and test the file and you'll see your tree

In the SWF file, you can see the XML structure displayed in the tree. Click items in the tree to see the trace() statements in the change event handler send the data values to the Output panel.

Custom Skinnig your icons!
goto: Program Files\Macromedia\Flash 8\en\Configuration\ComponentFLA and open the "StandardComponents.fla"
as next drop the "Flash UI Components 2" folder into your library and customize the icons/movies
Flash UI Components 2 > Themes > MMDefault > Tree Assets
there double click on the TreeAssets movieclip and edite or change the "icons" to your needs, look that your "icons" are not over 18x18
Save and Publish the file to view your new styled tree

good example: Help > Using Components > Customizing Components > About skinning components > Editing component skins in a document

About skinning components
Skins are movie clip symbols a component uses to display its appearance. Most skins contain shapes that represent the component's appearance. Some skins contain only ActionScript code that draws the component in the document.

Version 2 components are compiled clips--you cannot see their assets in the library. However, the Flash installation includes FLA files that contain all the component skins. These FLA files are called themes. Each theme has a different appearance and behavior, but contains skins with the same symbol names and linkage identifiers. This lets you drag a theme onto the Stage in a document to change its appearance. You also use the theme FLA files to edit component skins. The skins are located in the Themes folder in the Library panel of each theme FLA file. (For more information about themes, see About themes.)

Each component comprises many skins. For example, the down arrow of the ScrollBar subcomponent consists of four skins: ScrollDownArrowDisabled, ScrollDownArrowDown, ScrollDownArrowOver, and ScrollDownArrowUp. The entire ScrollBar uses 13 different skin symbols.

Some components share skins; for example, components that use scroll bars--such as ComboBox, List, and ScrollPane--share the skins in the ScrollBar Skins folder. You can edit existing skins and create new skins to change the appearance of components.

* Help > Using Components > Customizing Components > About skinning components



Now that was the simple tree ...
Take a look at the Code below, also check the included infos ;)

Code w/o Infos
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load("treeP2L.xml");
myTreeDP.onLoad = function() {
	myTree.dataProvider = this.firstChild;
};
myTree.vScrollPolicy = "Auto";
var treeListener:Object = new Object();
var url:String = node.attributes.url;
treeListener.change= function(evt:Object) {
	getURL(evt.target.selectedNode.attributes.url, "_blank");
};
myTree.addEventListener("change", treeListener);


Code with Infos
/* Components Language Reference > Tree component (Flash Professional only)
* > Using the Tree component (Flash Professional only) > Creating an application with the Tree component
* > To load XML from an external file:
*/
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load("treeP2L.xml");
myTreeDP.onLoad = function() {
	myTree.dataProvider = this.firstChild;
};
/* we dont want the scroll bar is visible, unless it is needed
* vScrollPolicy can be "on", "off" or "auto"
* "auto" causes the scroll bar to appear just when needed
*!! infos: Components Language Reference > ScrollPane component > ScrollPane.vScrollPolicy
*/
myTree.vScrollPolicy = "Auto";

/* create a new object "treeListener"
* create a new string "url" (that gets the url attribute inside the node in our XML file)
* we have attributes like(label, isBranch, url) in our xml file
* as next we use our object "treeListener" to get to the url form our selected node
*/
var treeListener:Object = new Object();
var url:String = node.attributes.url;
// use change event
// we use change
treeListener.change = function(evt:Object) {
	// what we do here is to get the attribute called "url" from our selected node/item in the tree/xml file
	getURL(evt.target.selectedNode.attributes.url, "_blank");
	//trace("selectet node is: "+evt.target.selectedNode);
	//trace("");
};
myTree.addEventListener("change", treeListener);
/* !!! Description change Event !!!
* !!! Event; broadcast to all registered listeners when an item has been selected !!!
* Version 2 components use a dispatcher/listener event model.
* When a component dispatches a change event, the event is handled by a function
* (also called a handler) that is attached to a listener object (listenerObject) that you create.
* You call the addEventListener() method and pass it the name of the handler as a parameter. 
* When the event is triggered, it automatically passes an event object (eventObject) to the handler.
* Each event object has properties that contain information about the event.
* You can use these properties to write code that handles the event.
*/
//! press F1 and look in the "Components Language Reference" for infos about how/where to use "change" and "cellPress"
//! see also: Components Language Reference >> EventDispatcher class > EventDispatcher.addEventListener()
//! a good example you'll find in: Components Language Reference > List component > List.change
/* !!! Custom icons/style !!!
* goto: Program Files\Macromedia\Flash 8\en\Configuration\ComponentFLA
* and open the "StandardComponents.fla"
* drop the "Flash UI Components 2" folder into your library and customize the icons/movies
*!! Flash UI Components 2 > Themes > MMDefault > Tree Assets >
*!! there double click on the TreeAssets movieclip and edite or change the "icons" to your needs
*!! look that your "icons" are not over 18x18
*!! save and publish the file to view your tree
* i have here just changed the TreeAssets but not the scrollbar or border
*/
//! good example: Help> Using Components > Customizing Components > About skinning components > Editing component skins in a document
//! press F1 and search for "MMDefault" ...

Attached File  treeP2l.zip   161.81KB   907 downloadssource files (xml, fla) flash8

THX for reading :D comments are welcome (pos & neg)
Have a great day

edtied: added infos

Edited by GTec, 29 July 2006 - 04:43 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users