Customization
You can set the following authoring parameters for each Accordion Tree Menu component instance in the Component inspector:
Decoration Height: Indicates the height of the top and bottom decorations, in pixels. This parameter accepts positive integers (including 0) but not greater than the value of Item Height (level 1) parameter. If Decoration Height is equal to 0, then no decoration will be drawn. The default value is 0.
Decoration Rounded: Specifies which corners of the menu decoration to be drawn rounded. This parameter can be one of four predefined values: "left", "right", "all", "none". The default value is "all".
Dotted Line (level 2): Indicates whether the dotted lines for second level sub-menus to be drawn ("true") or not ("false"). If Dotted Line (level 2) 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. The default value is "true".
Dotted Line (level 3): Indicates whether the dotted lines for third level sub-menus to be drawn ("true") or not ("false"). The default value is "true".
Easing Class: Specifies which easing class to be applied when opening or closing a second level menu item. This parameter can be either "regular" or "none". The default value is "regular".
Easing Method: Specifies which easing method to be applied when opening or closing a second level menu item. This parameter can be one of three predefined values: "easeIn", "easeOut" or "easeNone"; the default value is "easeOut".
Initial State Return: This parameter instructs the menu how to behave when the mouse pointer rolls out of an open top level item outside the menu area. There are two values available:
false The open top level item remains open.
true The menu returns to its initial state. If Selected State Mode is set to "true" and the selectedIndex property has a definite value (see Selected State Mode 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.
The default value is "true".
Internal Selection Mode: Turns on/off the component's ability ("true" or "false") to make an item selected when it is clicked. That means the Accordion Tree Menu can change the value of the selectedIndex property inside a movie clip without reloading HTML page. This option is useful, first of all, for Flash-based web applications.
Note: For this parameter to be activated, Selected State Mode has to be set to "true".
The default value is "false".
Item Height (level 1): 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. The default value is 24.
Item Height (level 2): 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. The default value is 20.
Item Indent (level 2): This parameter indicates whether to indent the second level items. The amount of indent is determined programmatically. The default value is "true".
Note: If both Item Indent (level 2) and Top Level Icons 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. Item Indent (level 3): This parameter indicates whether to indent the third level items. The amount of indent is determined programmatically. The default value is "true".
Note: If Item Indent (level 3) is set to "false", then no dotted lines for third level sub-menus are drawn.
Item Separators (level 1): Determines whether to draw separator lines between the top level menu items. The default value is "true".
Item Separators (level 2): Determines whether to draw separator lines between the second level menu items and between the third level menu items. The default value is "false".
Left Margin: Indicates the left margin of the menu, in pixels. This parameter accepts values from 0 to 100. The default value is 0.
Selected State Mode: Turns on/off the component's ability ("true" or "false") to make an item selected if the selectedIndex property has a definite value.
Note: The selectedIndex property has a definite (not undefined) value in the following three cases:
- The variable
selIndex is passed to a SWF (containing Accordion Tree Menu component instance) through HTML tags (see example for more information). If the component instance is not at the top level of a movie, you must specify the selIndex variable at the component's level.
- The
Internal Selection Mode parameter is set to "true" and a menu item has been clicked.
- The
setItemSelected() method has been called.
The default value is "true".
Sound onClick: An object type parameter that contains two values to be set: source and volume.
source This parameter is 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. The default value is undefined.
volume A number from 0 to 100 representing a volume level. 100 is full volume and 0 is no volume. The default setting is 100.
Sound onRollover: An object type parameter that contains two values to be set: source and volume.
source This parameter is 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. The default value is undefined.
volume A number from 0 to 100 representing a volume level. 100 is full volume and 0 is no volume. The default setting is 100.
Top Level Icons: Determines whether to draw the arrow icons for the top level menu items. The default value is "true".
Note: If both Top Level Icons and Item Indent (level 2) 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. Tree Structure: Specifies the appearance and initial state of Accordion Tree Menu structure. This parameter can be one of three predefined values: "open", "close", "static". The default value is "close".
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: Top Level Icons, Item Indent (level 2) and Dotted Line (level 2).
Tweening Duration: 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. This parameter accepts values from 0.05 to 0.5. The default value is 0.3.
XML-file URL: This parameter is the path to configuration XML file. The default value is undefined.
Note: Another way to set the path to configuration XML file is to pass the variable xmlURL to a SWF (containing Accordion Tree Menu component instance) through HTML tags (see example for more information).
This is the basic template of your configuration 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>
Note: Setting a property in the XML file overrides the parameter of the same name set in the Component inspector. If the value of a property in the XML file is undefined (omitted), it will be ignored.
The menu element has one optional attribute width which sets the width of an Accordion Tree Menu component instance.
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". |
| itemHeight |
level1 |
24 |
Indicates the height of each top level item, in pixels. |
| |
level2 |
20 |
Indicates the height of each second and third level item, in pixels. |
| topLevelIcons |
enabled |
"true" |
Determines whether to draw the arrow icons for the top level menu items. Possible values: "true", "false". |
| dottedLine |
level2 |
"true" |
Indicates whether the dotted lines for second level sub-menus to be drawn. Possible values: "true", "false". |
| |
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). |
| |
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". |
| |
level3 |
"true" |
Indicates whether to indent the third level items. 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. |
| |
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. |
| |
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". |
| selectedStateMode |
enabled |
"true" |
Turns on/off the component's ability to make an item selected. Possible values: "true", "false". |
| 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". |
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.
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). |
|
