XML file structure
The basic template of the XML file:
<?xml version="1.0" encoding="UTF-8"?>
<menu width="200">
<properties>
<treeStructure state="open"/>
<itemHeight level1="24" level2="20"/>
<topLevelIcons enabled="true"/>
<dottedLine level2="true" level3="true"/>
<decoration height="5" rounded="right"/>
<leftMargin value=""/>
<itemIndent level2="true" level3="true"/>
<itemSeparators level1="true" level2="false"/>
<tween duration="0.3" easing="regular" method="easeOut"/>
<rolloverSound src="" volume=""/>
<clickSound src="hifi.mp3" volume="80"/>
<initialStateReturn enabled="true"/>
<selectedStateMode enabled="true"/>
<internalSelectionMode enabled="false"/>
</properties>
<style>
<mainBackground color="F5F9FA" alpha="30"/>
<decorationBackground color="E8EEF0" alpha=""/>
<topLevelBackground color="E8EEF0" alpha=""/>
<treeIcon color="" bgcolor="F5F9FA"/>
<dottedLine color=""/>
<separatorLine color1="CCCCCC" color2="FFFFFF"/>
<rolloverBackgroundColor level1="F5F9FA" level2="E8EEF0"/>
<rolloverBackgroundAlpha level1="" level2="60"/>
<selectedBackgroundColor level2="E8EEF0"/>
<selectedBackgroundAlpha level2="60"/>
<fontSize level1="14" level2="12" level3="11"/>
<fontFamily name="Arial"/>
<fontColor level1="000033" level2="000033" level3="000033"/>
<fontColorRollover level1="CC3300" level2="CC3300" level3="CC3300"/>
<fontColorSelected level2="CC3300" level3="CC3300"/>
<fontWeight level1="bold" level2="" level3=""/>
<fontWeightRollover level1="bold" level2="" level3=""/>
<fontWeightSelected level2="" level3=""/>
<fontStyle level1="" level2="" level3=""/>
<textDecorationRollover level1="" level2="" level3=""/>
</style>
<items>
<item label="Europe" action="getUrl" url="/world/europe/" target="_self" font_color="">
<item label="Northern Europe" action="" url="" target="" font_color="">
<item label="Norway" action="showMap" url="map3" target="_level0.maps" font_color=""/>
</item>
</item>
.......................................
</items>
</menu>
The description of the XML file elements
1. The <menu> element has one optional attribute width which sets the width of an Accordion Tree Menu component instance.
Note: You can transform an Accordion Tree Menu component horizontally and vertically through the XML file and at runtime. At runtime, use the menuWidth ActionScript property.
The width of the bounding box of an Accordion Tree Menu component designates the width of the hit area for the component. If you increase the width of the component, you also increase the width of the hit area. The default value for a component's size is 200 x 100 pixels. If the component's bounding box is too small to fit the component's labels and graphic elements, they are clipped to fit.
Transforming a component instance horizontally reduces or increases its width and does not resize the graphic elements and item labels of the menu. Change the component's width to fit the component labels if necessary.
2. The <properties> element determines mostly how Accordion Tree Menu component behaves. The following table describes the attributes of nodes that the <properties> element contains:
Node
name |
Attribute
name |
Default |
Description |
| treeStructure |
state |
"close" |
Specifies the appearance and initial state of Accordion Tree Menu structure. Possible values: "open", "close", "static".
- "open" — Each second level menu item that has nested third level sub-menu is in open state, and can be closed by clicking on appropriate tree icon.
- "close" — Each second level menu item that has nested third level sub-menu is in closed state, and can be opened by clicking on appropriate tree icon.
- "static" — Each second level menu item that has nested third level sub-menu stays open permanently. No tree icons are drawn.
Note: The component's structure appearance is also depends on values combination of the following parameters: topLevelIcons, itemIndent (level2) and dottedLine (level2).
|
| itemHeight |
level1 |
24 |
Indicates the height of each top level item, in pixels. The value of this parameter is controlled programmatically, considering specified font size and font family. |
| |
level2 |
20 |
Indicates the height of each second and third level item, in pixels. The value of this parameter is controlled programmatically, considering specified font size and font family. |
| topLevelIcons |
enabled |
"true" |
Determines whether to draw the arrow icons for the top level menu items. Possible values: "true", "false".
Note: If both topLevelIcons and itemIndent (level2) parameters are set to "false", then neither tree icons nor dotted lines for second level sub-menus are drawn, and each second level menu item (if it has nested third level sub-menu) stays open permanently. |
| dottedLine |
level2 |
"true" |
Indicates whether the dotted lines for second level sub-menus to be drawn. Possible values: "true", "false". If dottedLine (level2) parameter is set to "false", then no tree icons are drawn, and each second level menu item (if it has nested third level sub-menu) stays open permanently. |
| |
level3 |
"true" |
Indicates whether the dotted lines for third level sub-menus to be drawn. Possible values: "true", "false". |
| decoration |
height |
0 |
Indicates the height of the top and bottom decorations, in pixels. Possible values: from 0 to the value of itemHeight (level 1). If decorationHeight is equal to 0, then no decoration will be drawn. |
| |
rounded |
"all" |
Specifies which corners of the menu decoration to be drawn rounded. Possible values: "left", "right", "all", "none". |
| leftMargin |
value |
0 |
Indicates the left margin of the menu, in pixels. This parameter accepts values from 0 to 100. |
| itemIndent |
level2 |
"true" |
Indicates whether to indent the second level items. Possible values: "true", "false".
Note: If both itemIndent (level2) and topLevelIcons parameters are set to "false", then neither tree icons nor dotted lines for second level sub-menus are drawn, and each second level menu item (if it has nested third level sub-menu) stays open permanently. |
| |
level3 |
"true" |
Indicates whether to indent the third level items. The amount of indent is determined programmatically. Possible values: "true", "false". |
| itemSeparators |
level1 |
"true" |
Determines whether to draw separator lines between the top level menu items. Possible values: "true", "false". |
| |
level2 |
"false" |
Determines whether to draw separator lines between the second level menu items and between the third level menu items. Possible values: "true", "false". |
| tween |
duration |
0.3 |
A number indicating the duration of the tweened animation in seconds. The tweened animation is applied to each third level sub-menu during its movement up and down. Possible values: from 0.05 to 0.5. |
| |
easing |
"regular" |
Specifies which easing class to be applied when opening or closing a second level menu item. Possible values: "regular", "none". |
| |
method |
"easeOut" |
Specifies which easing method to be applied when opening or closing a second level menu item. Possible values: "easeIn", "easeOut", "easeNone". |
| rolloverSound |
src |
undefined |
The path to an external mp3 file loaded into a movie clip and attached to the menu item's rollover event. If no path is specified, the rollover sound will not be used. If the path is incorrect, the rollover sound will not be used. |
| |
volume |
100 |
A number representing a volume level. Possible values: from 0 to 100. |
| clickSound |
src |
undefined |
The path to an external mp3 file loaded into a movie clip and attached to the menu item's click event. If no path is specified, the click sound will not be used. If the path is incorrect, the click sound will not be used. |
| |
volume |
100 |
A number representing a volume level. Possible values: from 0 to 100. |
| initialStateReturn |
enabled |
"true" |
Instructs Accordion Tree Menu how to behave when the mouse pointer rolls out of an open top level item outside the menu area. Possible values: "true", "false".
- "false" — The open top level item remains open.
- "true" — The menu returns to its initial state. If selectedStateMode is set to "true" and the selectedIndex property has a definite value (see selectedStateMode for more information), then the top level item including nested item, which index is equal to the selectedIndex value, will be opened. If there is no item selected, the open top level item will be closed.
|
| selectedStateMode |
enabled |
"true" |
Turns on/off the component's ability to make an item selected. Possible values: "true", "false".
Note: The selectedIndex property has a definite (not undefined) value in the following three cases:
1) The variable selIndex is passed to a SWF (containing Accordion Tree Menu component instance) through HTML tags (see example 1 for more information).
2) The internalSelectionMode parameter is set to "true" and a menu item has been clicked.
3) The setItemSelected() method has been called.
|
| internalSelectionMode |
enabled |
"false" |
Turns on/off the component's ability to make an item selected when it is clicked. That means Accordion Tree Menu can change the value of selectedIndex property inside a movie clip without reloading HTML page. Possible values: "true", "false". |
3. The <style> element determines the appearance of Accordion Tree Menu component. The following table describes the attributes of nodes that the style element contains:
Node
name |
Attribute
name |
Default |
Description |
| mainBackground |
color |
"FFFFFF" |
The main background color of the menu. If omitted, the background is transparent. |
| |
alpha |
100 |
The main background alpha of the menu. Possible values: from 0 to 100. |
| decorationBackground |
color |
"FFFFFF" |
The background color of the top and bottom decorations. If omitted, the background is transparent. |
| |
alpha |
100 |
The background alpha of the top and bottom decorations. Possible values: from 0 to 100. |
| topLevelBackground |
color |
"FFFFFF" |
The background color of the top level menu items. If omitted, the background is transparent. |
| |
alpha |
100 |
The background alpha of the top level menu items. Possible values: from 0 to 100. |
| treeIcon |
color |
— |
The color of the tree icons. If omitted, the color is the same as the text color of a top level item. |
| |
bgcolor |
— |
The background color of the tree icons. If omitted, the background color is the same as the main background color of the menu. |
| dottedLine |
color |
— |
The color of the dotted lines. If omitted, the color is the same as the text color of a top level item. |
| separatorLine |
color1 |
undefined |
The color of the top separator line. If omitted, the line will not be drawn. |
| |
color2 |
undefined |
The color of the bottom separator line. If omitted, the line will not be drawn. |
| rolloverBackgroundColor |
level1 |
"FFFFFF" |
The background color of a rolled-over top level item. If omitted, the background is transparent. |
| |
level2 |
"FFFFFF" |
The background color of a rolled-over second or third level item. If omitted, the background is transparent. |
| rolloverBackgroundAlpha |
level1 |
100 |
The background alpha of a rolled-over top level item. Possible values: from 0 to 100. |
| |
level2 |
100 |
The background alpha of a rolled-over second or third level item. Possible values: from 0 to 100. |
| selectedBackgroundColor |
level2 |
"FFFFFF" |
The background color of a selected second or third level item. If omitted, the background is transparent. |
| selectedBackgroundAlpha |
level2 |
100 |
The background alpha of a selected second or third level item. Possible values: from 0 to 100. |
| fontSize |
level1 |
14 |
The point size for the font of a top level item text. Possible values: from 9 to 30. |
| |
level2 |
12 |
The point size for the font of a second level item text. Possible values: from 9 to 22. |
| |
level3 |
11 |
The point size for the font of a third level item text. Possible values: from 9 to 22. |
| fontFamily |
name |
"_sans" |
The font name for text. |
| embedFonts |
enabled |
"false" |
A Boolean value that indicates whether the font specified in fontFamily is an embedded font. This parameter must be set to "true" if fontFamily refers to an embedded font. Otherwise, the embedded font is not used. If this parameter is set to true and fontFamily does not refer to an embedded font, no text is displayed. Possible values: "true", "false". |
| fontColor |
level1 |
"000033" |
The text color of a top level item. |
| |
level2 |
"000033" |
The text color of a second level item. |
| |
level3 |
"000033" |
The text color of a third level item. |
| fontColorRollover |
level1 |
"CC3300" |
The color of text when the pointer rolls over a top level item. |
| |
level2 |
"CC3300" |
The color of text when the pointer rolls over a second level item. |
| |
level3 |
"CC3300" |
The color of text when the pointer rolls over a third level item. |
| fontColorSelected |
level2 |
"CC3300" |
The color of text in the selected second level item. |
| |
level3 |
"CC3300" |
The color of text in the selected third level item. |
| fontWeight |
level1 |
"none" |
The font weight for the text of a top level item. Possible values: "none", "bold". |
| |
level2 |
"none" |
The font weight for the text of a second level item. Possible values: "none", "bold". |
| |
level3 |
"none" |
The font weight for the text of a third level item. Possible values: "none", "bold". |
| fontWeightRollover |
level1 |
"none" |
The font weight for the text when the pointer rolls over a top level item. Possible values: "none", "bold". |
| |
level2 |
"none" |
The font weight for the text when the pointer rolls over a second level item. Possible values: "none", "bold". |
| |
level3 |
"none" |
The font weight for the text when the pointer rolls over a third level item. Possible values: "none", "bold". |
| fontWeightSelected |
level2 |
"none" |
The font weight for the text in the selected second level item. Possible values: "none", "bold". |
| |
level3 |
"none" |
The font weight for the text in the selected third level item. Possible values: "none", "bold". |
| fontStyle |
level1 |
"normal" |
The font style for the text of a top level item. Possible values: "normal", "italic". |
| |
level2 |
"normal" |
The font style for the text of a second level item. Possible values: "none", "bold". |
| |
level3 |
"normal" |
The font style for the text of a third level item. Possible values: "none", "bold". |
| textDecorationRollover |
level1 |
"none" |
The text decoration when the pointer rolls over a top level item. Possible values: "none", "underline". |
| |
level2 |
"none" |
The text decoration when the pointer rolls over a second level item. Possible values: "none", "underline". |
| |
level3 |
"none" |
The text decoration when the pointer rolls over a third level item. Possible values: "none", "underline". |
Note: All colors should be expressed in RRGGBB format.
4. The <items> element can contain an unlimited number of item nodes. Each item node represents a menu item object and should have one required attribute label. You can also add four optional attributes in the item node: action, url, target, font_color.
Node
name |
Attribute
name |
Default |
Description |
| item |
label |
undefined |
The text that is displayed to represent a menu item. |
| |
action |
undefined |
(Optional) This attribute can be either "getUrl" or the name of your custom Flash function (e.g., "showMap"). In the first case, Flash getURL() method is called — it loads a document from the specified URL into the specified window. In the second case, your custom Flash function is called. |
| |
url |
undefined |
(Optional) This attribute defines either the URL from which to obtain the document (if action attribute is set to "getUrl") or any parameters to be passed to your function (if action attribute is set to the name of your custom Flash function). You can specify zero or more parameters, separating them by commas. |
| |
target |
"_self" |
(Optional) This attribute can be either a parameter ("_self", "_blank", "_parent", "_top" or your custom value) that specifies the window or HTML frame that the document is loaded into (if action attribute is set to "getUrl") or a target movie clip where your function is placed (if action attribute is set to the name of your custom Flash function). |
| |
font_color |
undefined |
(Optional) The text color of a single item (overrides the color setting for appropriate level in the style element). |
|
|
